开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情
前言
这一篇主要写了webpack中Include/Exclude和Cache的使用！
Include/Exclude
在我们开发的时候需要使用第三方的库或插件，比如vue-router、Vuex,z这些文件都会下载到 node_modules 中了。而这些文件都是已经编译好可以直接使用的，所以我们在对 js 文件处理时，要排除 node_modules 下面的文件，所以我们就要用到Include/Exclude。
include:包含，只对xxx文件进行编译处理。
exclude:排除，除了xxx文件都进行编译处理。
使用
Include/Exclude主要是针对js文件进行处理
// webpack.dev.js 和 webpack.prod.js
{
test: /\.js$/,
// exclude: /(node_modules)/,
include: path.resolve(__dirname, "../src"), // 也可以用包含
loader: 'babel-loader',
}
......
plugins: [
new ESLintPlugin({
context: path.resolve(__dirname, "../src"), // 需要检查的文件路径
exclude:'node_modules' // 默认就会忽略node_modules
})
]
注意:Include 和 Exclude只需要写一个就可以了，如果两个都写会报错！生产环境和开发环境同样的配置，完成之后分别进行打包测试即可。
Cache
在我们每次打包时 js 文件都要经过 Eslint 检查 和 Babel 编译，速度比较慢,但是我们并不会每次打包都对所有js文件进行了更改。所以我们可以缓存之前的 Eslint 检查 和 Babel 编译结果，这样第二次打包时就只会对更改过的js文件进行编译处理，这样的话运行的速度就会更快了。
Babel编译缓存
对Babel编译结果进行缓存，需要在options中通过cacheDirectory来开启babel缓存，为了追求打包速度可以关闭对缓存的压缩cacheCompression:false,生产模式和开发模式配置相同。
{
test: /\.js$/,
// exclude: /(node_modules)/,
include: path.resolve(__dirname, "../src"), // 也可以用包含
loader: 'babel-loader',
options: {
cacheDirectory: true, // 开启babel编译缓存
cacheCompression: false, // 缓存文件不要压缩
},
}
运行打包就可以看到在node_modules下多出一个.cache的文件，这个就是babel的缓存文件存放的位置。
Eslint检查缓存
对Eslint检查结果进行缓存，需要在plugins中通过cache来开启Eslint缓存，可以通过cacheLocation来设置缓存存储的位置,生产模式和开发模式配置相同。
plugins: [
new ESLintPlugin({
context: path.resolve(__dirname, '../src'), // 需要检查的文件路径
exclude:'node_modules',
cache: true, // 开启缓存
cacheLocation: path.resolve(__dirname,"../node_modules/.cache/.eslintcache"), // 缓存目录
})
]
运行打包就可以看到在node_modules/.cache下多出一个.eslintcache的文件，这个就是Eslint的缓存文件。
小结
通过上面的配置，能够大大提高webpack打包运行的速度！今天是更文的第九天了,加油！！！
