OneOf
当规则匹配时，只使用第一个匹配规则
当webpack处理静态资源的时候，需要经过每一个loader进行判断，是否可以处理当前的静态资源，如果其中一个a-loader可以解析，这个静态资源还是会被b-loader、c-loader等检测是否可以解析，浪费打包性能。可以使用oneOf
在webpack.config.js中配置
module: {
rules: [
// 每个文件只能被一个loader处理，不在遍历所有loader
oneOf: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
// less-loader
{
test: /\.less$/i,
use: ["style-loader", "css-loader", "less-loader"], // 执行顺序从左到右
},
// sass-loader
{
test: /\.s[ac]ss$/i,
use: ["style-loader", "css-loader", "sass-loader"], // 执行顺序从左到右
},
{
test: /\.styl$/,
// loader 只能引入一个loader use 可以引入多个文
use: ["style-loader", "css-loader", "stylus-loader"], // 执行顺序从左到右
},
{
test: /\.(png|jpg|gif)$/i,
type: "asset", //资源模块
generator: {
//[hash:10] 打包出来的图片名称为hash值，长度10位
filename:'image/[hash:10][ext][query]'
},
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 10kb
}
}
},
{
test: /\.(ttf|woff2?)$/i,
type: "asset/resource", //资源模块
generator: {
//[hash:10] 打包出来的图片名称为hash值，长度10位
filename:'media/[hash:10][ext][query]'
},
},
{
test: /\.m?js$/,
exclude: /node_modules/, // 去除node-module下的文件转换
use: {
loader: 'babel-loader',
}
}
]
]
}
exclude/include
开发时我们需要使用第三方的库或插件，所有文件都下载到 node_modules中，而这些文件是不需要webapck 编译的，所以我们在对js文件处理时，就要排除它们。
Include
包含，只解析XXX文件
Exclude排除，指定不解析xxx文件
在webapck.config.js中
注意inclede与exclude使用一种即可
Cache
缓存生成的 webpack模块 和 chunk, 来改善构建速度。
每次打包时js文件都要经过Eslint和Babel，速度比较慢。我们可以缓存之前的 Eslint检查和Babel编译的结果。这样第二次打包更快。
在 webpack.config.js
Thread多进程打包
当项目越来越大时，打包的速度越来越慢，我们想要继续提高打包速度，其实就是要提升js的打包速度，因为其他文件比较少。而对js文件的处理主要是 Eslint Babel Terser三个工具，所以我们要提升他们的运行速度，我们可以开启多进程同时处理js文件，这样速度就比之前的单进程打包更快。
仅在耗时比较长的项目使用，因为每个进程启动就有大约600ms左右的开销
- 获取cpu的核数，每个电脑的不一样
// node的核心模块
const os = require(os)
// 获取cpu核数
const threads = os.cpus().length
- 下载
thread-loader
npm install thread-loader --save-dev
- 在
webpack.config.js配置
// 这里只处理js文件
module.exports = {
module: {
rules: [
...,
{
test: /\.m?js$/,
// exclude: /node_modules/, // 排除node-module的文件转换
include: path.resolve(__dirname,'../src'), // 只处理src下面的文件，其他文件不解析
use: [
{
loader: 'thread-loader', // 开启多进程
options: {
// 产生的 worker 的数量，默认是 (cpu 核心数 - 1)，或者
workers: threads //
},
},
{
loader: 'babel-loader',
options: {
cacheDirectory: true, // 开启babel缓存
cacheCompression: false, //关闭babel缓存的zip压缩
},
},
]
}
]
},
// 在eslint插件中也可以开启多线程
plugins: [
new Eslint({
// 哪些文件我们检查，这里我们检测src下面的文件
context: path.resolve(__dirname, "../src"),
exclude: 'node_modules', // 排除node-module的文件转换
cache: true, // 开启缓存
cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintcache"), // 缓存文件的位置。
threads: true, // 开启多进程
}),
],
}
