webpack.config.js配置如下
var ExtractTextPlugin = require("extract-text-webpack-plugin")//extract-text-webpack-plugin安装此插件
module:{
loaders:[
{test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}
]
},
plugins:[
new ExtractTextPlugin("css/[name].css")//则会生成一个css文件
]
比如你的js文件中这样引入即可：
import './css/lib/bootstrap.min.css'
import './css/test.css'
配置 其中outputPath 负责输出目录, 即打包后的写在磁盘的位置.publicPath 则是对页面引入资源的补充,比如 img 标签引入或者 css 引入等. 按上面路径配置时, 打包后文件都在 build/img 开发环境 下可以正确引入文件,引入路径为 localhost:8080/img 生产环境 下引入路径为 f:///img 导致找不到图片output : 指定将放置目标文件的文件系统路径. 这跟我们遇到的文件没多大关系.那问题就是在 publicPath publicPath : 指定目标文件的 自定义公共 路径,它是定义公共路径,所以我们在开发模式下能正确引入文件,因为都在同一个路径下,即 localhost:8080 . 别忘了我们引进图片有两种方式, img 标签或者 css 引入. 当我将 file-loader 路径配置修改为 因为打包后目录结构是 结果通过 css 引入的图片打包后还可以正确引入,路径是 ../img 但是通过 img 标签引入的图片则报错,引入路径是 项目根目录/img ,正确的应该是 项目根目录/build/img我们看看打包后的 js 中的引入路径 看起来好像是正确的,但是有一点, CSS 和 JS 引入图片的机制是不一样,详细可以看 css和js引用图片的路径问题我们已经找到问题所在了, 那么该如何解决呢? 不设置 file-loader 的 outputPath 和 publicPath ,默认跟随 webpack 的打包目录, 这还不够,我们还得将 css 文件也打包到跟图片文件同级. 打包后目录为 这样不管是 生产环境 还是 开发环境下 都能正确引入图片. 但是当图片多了之后 build 目录下会有很多的文件,我们还是希望图片文件打包后在 img 文件夹.让我们再来看看这该怎么解决. 我们已经知道了设置了 file-loader 下的 publicPath 就是 css 文件与 js 文件引入图片的路径,因为 css 和 js 引入的机制不同,我们只需要将 css 文件打包之后与 html 同级即可. 修改 webpack 配置 修改前 修改后 打包后目录结构 完美解决. 修改 extract-text-webpack-plugin 的options以及 file-loader 的 publicPath打包后的目录 根据两个文件夹的位置关系, 我们设置 extract-text-webpack-plugin移除 file-loader 的干扰1、打开vscode，创建一个html页面。
2、在测试页面的同级目录，添加一张演示图片。
3、在测试页面中添加一个div标签，在标签内部添加一个img图片标签，设置图片的src地址。
4、在div的标签中，直接书写css的样式，设置div的宽度为500像素，高度为300像素，边框为1像素的红色框。再次在浏览器中打开，就可以看到图片，并没有填满整个div的空间。
5、想要让图片充满整个div，只需要对图片设置高宽都是100%即可。此处为了演示，将所有的img标签都设置成了100%，而且，使用的是外部css的书写形式。
6、如果图片使用的是背景图，不是img标签的形式，图片默认会在x和y轴重复，并不会拉伸，最终仍然填满了这个div的空间。
7、如果想要背景图也拉伸填满整个div空间，就需要设置背景图的，background-size:100%100%。
