file-loader
之前我们使用如下的配置代码,进行了项目的打包
const path = require('path');
module.exports = {
mode: 'production',
entry: {
main: './src/index.js'
},
module: {
rules: [{
test: /\.png$/,
use: {
loader: 'file-loader'
}
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'bundle')
}
}
打包后文件如下。
我们可以看到 png 图片打包后的名字变得很长。如果我们想要打包后,图片名称保持不变,那么就需要对loader 做额外的配置。配置loader 我们可以将参数放在一个配置项options 里面。如下。
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js'
},
module: {
rules: [{
test: /\.png$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'bundle')
}
}
使用命令打包后。生成的图片文件名就与原来一样了。
上面使用[name].[ext] 这种配置的语法,我们叫做 placeholder 占位符。
可以在webpack 官网 documentation > loaders > file-loader > placeholder 中查到更多的信息。
然后我们,可以把test 中正则改一下,把常用的图片后缀加上,如下。
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
}]
},
另一种情况,当我们想要把图片打包放在 img 文件夹下的话,可以如下配置。
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'imgs/'
}
}
}]
},
url-loader
url-loader 除了能做file-loader 能做的事情外,还能做额外的一些事。
我们先试一下,将webpack.config.js 中的 “file-loader” 改为 “url-loader” ,如下。
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js'
},
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
outputPath: 'imgs/'
}
}
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'bundle')
}
}
然后使用命令安装url-loader,如下。
npm install url-loader --save-dev
然后使用命令 npm run bundle 打包。
好啦,发现网页照常,但是打包后文件确没有图片了。
这是因为,当要打包图片的时候,如果使用的是url-loader 的话,它会直接将图片转化为base64 的字符串,然后放在js 里面。它不会生成图片文件。
这里,将图片放在js 里面,省略了一次http 请求去寻找图片,但是如果图片很大,那么js 打包后的文件也会很大,那么加载js 的时间就会很长,那么页面加载的时候可能要空白很长时间。因此,当一个图片很小,1、2kb 那么使用url-loader 是一个很好的选择。反之,还是使用file-loader 比较好。
这种情况,就可以这样配置。limit 中的单位为字节。如果超过limit,那么url-loader 就会像file-loader 一样使用,否则,就会像前面一样将图片放在js 里。
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './src/index.js'
},
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]',
outputPath: 'imgs/',
limit: 20480
}
}
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'bundle')
}
}