这是我参与11月更文挑战的第27天,活动详情查看:2021最后一次更文挑战
source-map是什么?
source-map是一种提供构建后代码到源代码的映射技术,可以根据这个映射来追踪源代码的错误。
设置source-map的方法
我们只需在webpack.config.js中添加一个配置项即可。
devtool: "source-map"
复制代码
选择类型
- 开发环境:eval-source-map
- 生产环境:source-map
oneOf是什么?
有时候,我们在webpack配置中写了很多的loader,这也就意味着,一个文件要被多个loader过滤一遍,这在有些情况下是很冗余的,因此,我们希望只匹配一个loader,这就是我们为什么需要oneOf的原因。
oneOf如何使用?
module: {
rules: [
{
// 进行Eslint检查
test: /\.js$/,
// 排除其他文件
exclude: /node_modules/,
// 优先执行
enforce: 'pre',
loader: 'eslint-loader',
options: {
// 设置自动修复
fix: true
}
},
{
oneOf: [
{
// 处理CSS
test: /\.css$/,
use: [...commonCssLoader]
},
{
test: /\.less$/,
use: [...commonCssLoader, 'less-loader']
},
{
// 进行js兼容性的处理
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firefox: '50'
}
}
]
]
}
},
{
// 打包图片资源
test: /\.(jpg|png|gif)/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
outputPath: 'imgs',
esModule: false
}
},
{
// 处理HTML中的图片资源
test: /\.html$/,
loader: 'html-loader'
},
{
// 处理其他资源
exclude: /\.(js|css|less|html|jpg|png|gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
}
]
}
复制代码
需要注意的是:被oneOf包裹的所有loader中,不能存在两个配置处理同一种类型的文件,如果存在这样的两个loader,可以将其中一个提取出来,就像上面的那种处理方式一样。
缓存
之所以需要缓存的原因在于,以babel为例,对一个项目进行编译,如果每次都是对整个项目进行重新编译比较浪费资源,因为我们可能只是对项目中进行了细微的改动,这就是为什么需要缓存的原因。
babel-loader开启缓存
只需给babel-loader的options中添加一个配置项即可。
{
// 进行js兼容性的处理
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: { version: 3 },
targets: {
chrome: '60',
firefox: '50'
}
}
]
],
cacheDirectory: true
}
}
复制代码
文件资源缓存
hash配置
每次进行webpack打包的时候,给文件生成不同的文件名,这样静态资源的引入路径名也会发生变化,所以一旦进行重新打包,即使是强缓存,也能够感知到最新的变化,因为文件名变啦。
- 修改js文件的哈希后缀
output: {
filename: 'js/built.[hash:10].js',
path: resolve(__dirname, 'build')
}
复制代码
- 修改CSS文件的哈希后缀
new MiniCssExtractPlugin({
filename: 'css/built.[hash:10].css'
})
复制代码
注意:上面的这种方式存在一个缺点,就是一旦重新打包,会导致所有的缓存失效,即使只改动了一个文件。
contenthash(推荐使用)
contenthash根据文件的内容生成hash值,不同文件hash值一定不一样。
- 处理JS文件
output: {
filename: 'js/built.[contenthash:10].js',
path: resolve(__dirname, 'build')
}
复制代码
- 处理CSS文件
new MiniCssExtractPlugin({
filename: 'css/built.[contenthash:10].css'
})
复制代码