webpack 自带优化
- tree-shaking
- scope-hoisting
多线程打
需要用到 happypack 实现多线程打包. 注意: 如果体积较小会使打包时间更长
第一步:下载
npm install happypack --save-dev
const HappyPack = require('happypack');
module.exports = {
...
}
第二步: 将常用的 loader 替换为 happypack/loader
const HappyPack = require('happypack');
module.exports = {
...
module: {
rules: [
test: /\.js$/,
// use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader
// 现在用下面的方式替换成 happypack/loader，并使用 id 指定创建的 HappyPack 插件
use: ['happypack/loader?id=babel'],
// 排除 node_modules 目录下的文件
exclude: /node_modules/
]
}
}
第三步：创建 HappyPack 插件
module.exports = {
...
module: {
rules: [
test: /\.js$/,
// use: ['babel-loader?cacheDirectory'] 之前是使用这种方式直接使用 loader
// 现在用下面的方式替换成 happypack/loader，并使用 id 指定创建的 HappyPack 插件
use: ['happypack/loader?id=babel'],
// 排除 node_modules 目录下的文件
exclude: /node_modules/
]
},
plugins: [
...,
new HappyPack({
/*
* 必须配置
*/
// id 标识符，要和 rules 中指定的 id 对应起来
id: 'babel',
// 需要使用的 loader，用法和 rules 中 Loader 配置一样
// 可以直接是字符串，也可以是对象形式
loaders: ['babel-loader?cacheDirectory']
})
]
}
关于语言包的打包
有些包自带语言包，有时候不需要把所有的语言包跟着打包比如 moment，那么我们就需要把这个包特殊对待，主要是通过 webpack 自带的 IgnorePlugin
// webpack.config.js
plugins: [...new webpack.IgnorePlugin(/\.\/locale/, /moment/)]
不打包某个文件
有些文件我们不希望打包，比如已经在 cdn 中引入了的文件，此时要用 externals 进行配置
modules:{
noParse:/jquery/,
...
}
plugins: [
...
new webpack.ProvidePlugin({
'$': 'jquery'
}),
]
//忽略打包的文件
externals:{
'jquery': '$'
}