在这个地方由于不同文件类型中的引用方式和file-loader的配置方式折腾了好半天。所以记录下来最终折腾出来的配置方法以及引用方式。
1. 安装。npm install file-loader –save-dev
2. webpack.config .js 的配置
// publicPath 这里配置指向最终的生产目录,bundle.js所在的文件夹
output: {
path:__dirname + '/build',
publicPath: '/webBlog/build/',
filename:'bundle.js'
},
// loader 的配置
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader',
query:{
name:'img/[name]-[hash:5].[ext]' //这里img是存放打包后图片文件夹,结合publicPath来看就是/webBlog/build/img文件夹中,后边接的是打包后图片的命名方式。
}
},
- css 文件中的引用
.hd {
height: 200px;
background: url("../../img/lance.jpg") no-repeat center center;
background-size: 100%;
}
- 模板中的引用:开发的时候所在的路径用require引入,file-loader会按照配置路径打包到配置的文件夹。
<img src={require("../../img/233.jpg")} alt=""/>
简单介绍下url-loader的配置
其实跟file-loader相比差不多,url-loader会按照配置把小于一定大小的图片以dataUrl的形式储存。
引用方式与上面相同:loader的配置如下:
{
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8000&name=img/[name]-[hash:5].[ext]',//小于8kb的图片以dataurl的方式存储
}
补充一个:如何打包html文件中的图片呢?
首先安装相应的loader:
$ npm install html-withimg-loader --save-dev
在webpack.config.js中做相应的配置:
module: {
loaders: [
{
test: /\.html$/,
loader: 'html-withimg-loader'
}
]
}
最后在入口的js文件中引入html
import '../index.html';
over。