接上一篇 webpack4.0 配置记录 (1), 继续记录学习 webpack 配置。
定义环境变量
new Webpack.DefinePlugin({// 用来定义全局环境变量
DEV:JSON.stringify(‘dev’),
FLAG:’true’
}),
webpack 简单优化
noParse
module:{
noParse:’/jquery/’,// 不去解析设置的包所依赖的关系, 如 jquery
}
ignorePlugin
module:{
noParse:’/jquery/’,// 不去解析设置的包所依赖的关系
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
include:path.resolve(‘src’),
use:{
loader:’babel-loader’,
options:{
presets:[
‘@babel/preset-env’,
‘@babel/preset-react’
]
}
}
}
]
}
通过 exclude 排除和 include 包含某些模块 另外也可以使用 webpack 自带的 ignorePlugin 插件排除某些包，减少体积。
new webpack.IgnorePlugin(/\.\/locale/,/moment/),
以上配置忽略了时间格式化 moment.js 中的语言包
happypack 多线程打包
let Happypack=require(‘happypack’)
…
module.exports={
module:{
noParse:’/jquery/’,// 不去解析设置的包所依赖的关系
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
include:path.resolve(‘src’),
use:’Happypack/loader?id=js’
// use:{
// loader:’babel-loader’,
// options:{
// presets:[
// ‘@babel/preset-env’,
// ‘@babel/preset-react’
// ]
// }
// }
}
]
},
plugins:[
new Happypack({
id:’js’,
use:[
{
loader:’babel-loader’,
options:{
presets:[
‘@babel/preset-env’,
‘@babel/preset-react’
]
}
}
]
})
]
}
webpack 内置功能
(1)tree-shaking (2)scope-hosting 这两项优化只在生产环境下有效
抽离公共代码
module.exports={
optimization:{
splitChunks:{// 分割代码块
cacheGroups:{// 缓冲组
common:{
chunks:’initial’,
minSize:0,// 抽离模块最小粒度是 0
minChunks:2// 表示代码块用过 2 次以上就要抽离
},
vendor:{
priority:1,// 相当于权重，先抽离第三方模块，如果不设置该属性，分割代码块将从上到下，无法抽离第三方模块。
test:/node_modules/,
chunks:’initial’,
minSize:0,// 抽离模块最小是 0
minChunks:2// 表示用过 2 次以上就要抽离
}
}
}
},
}
文件热更新
devServer:{
hot:true
},
plugins:[
new webpack.NamedModulesPlugin(),// 打印更新的模块路径
new webpack.HotModuleReplacementPlugin()// 热更新
]
7. 可以使用 dllPlugin 动态链接库优化 DllPlugin 和 DllReferencePlugin 提供了以大幅度提高构建时间性能的方式拆分软件包的方法。原理是将特定的第三方 NPM 包模块提前构建，然后通过页面引入。这不仅能够使得 vendor 文件可以大幅度减小，同时，也极大的提高了构件速度。网上别的大神有一篇文章写的很详细，可以参考，传送门。
以上就是一些自己在学习 webpack4.0 配置过程中的一些学习记录，写出来和大家分享，如果有错误，还望告知。个人博客同步更新，欢迎关注交流！不要忘了点个赞，谢谢！