目录
作用主要是过滤不需要解析的文件,比如打包的时候依赖了三方库(jquyer、lodash)等,而这些三方库里面没有其他依赖,可以通过配置noParse不去解析文件,提高打包效率。
是module中的一个属性,设置一个正则表达式,过滤多个库以|分割
module: {
noParse: '/jquery|lodash/',
// rules:[]
}
指定loader解析的规则,配置包含和排除目录一般两者写其一就行。
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'], // 预设,转换js语法
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }], // 解析类的装饰器
["@babel/plugin-proposal-class-properties", { "loose": true }], // 解析类的属性
"@babel/plugin-transform-runtime", // 解析promise,Generator等新的API
]
}
},
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/
}
该插件是webpack的内置插件,用于忽略某些特定的模块,不被webpack打包进去。
在实际开发项目时,moment库是非常常用的处理时间的库,虽然设置了语种为中文zh-cn,但是在打包的时候,还是会将所有语言都打包进去。就导致包很大,打包速度慢,locale 目录中存放的是多语种的语言包,不希望全部被打包进文件。此时就可以配置下IgnorePlugin
// src/index.js
import moment from 'moment'
// 忽略locale后,就必须手动单独引入需要的语言包
import 'moment/locale/zh-cn';
moment.locale('zh-cn'); //设置中文
let r = moment().endOf('day').fromNow();
console.log(r);
// webpack.config.js
let Webpack = require('webpack');
module.exports = {
plugins:[
new Webpack.IgnorePlugin(/\.\/locale/,/moment/), // locale 目录中存放的是多语种的语言包,不希望全部被打包进文件
]
}
多线程打包,多用于大型项目,因为在项目很小的时候,效果反而会慢,因为而分配线程,也会消耗时间。
npm install happypack
let HappyPack = require('happypack');
module.exports = {
// ...
module:{
rules:[
{
test:/\.js$/,
use:'HappyPack/loader?id=js' // id=js 代表打包js
},
{
test:/\.css$/,
use:'HappyPack/loader?id=css' // id=css 代表打包css
}
]
},
plugins:[
new HappyPack({
id:'css', // 打包css
use:['style-loader','css-loader']
}),
new HappyPack({
id:'js', // 打包js
use:[{ // 原本rules中 loader的配置即可
loader:'babel-loader',
options:{
presets:['@babel/presets-env', '@babel/presets-react']
}
}]
})
]
}
之前专门整理过完整的一篇关于DllPlugin动态链接库
的学习笔记,由于时间和精力的关系,不在赘述,感兴趣的同学可以跳转链接了解一下。
webpack性能优化方式之dll--- webpack.dll.config.js
之前专门整理过完整的一篇关于webpack热更新
的学习笔记,由于时间和精力的关系,不在赘述,感兴趣的同学可以跳转链接了解一下。
webpack4.15.1 学习笔记(三) — 模块热替换HMR
之前专门整理过完整的一篇关于webpack tree-shaking
的学习笔记,由于时间和精力的关系,不在赘述,感兴趣的同学可以跳转链接了解一下。
webpack4.15.1 学习笔记(四) — Tree shaking
之前专门整理过完整的一篇关于webpack抽离公共代码
的学习笔记,由于时间和精力的关系,不在赘述,感兴趣的同学可以跳转链接了解一下。
webpack4.15.1 学习笔记(六) — 代码拆分(Code Splitting)
之前专门整理过完整的一篇关于webpack懒加载
的学习笔记,由于时间和精力的关系,不在赘述,感兴趣的同学可以跳转链接了解一下。
手机扫一扫
移动阅读更方便
你可能感兴趣的文章