treeshaking(摇晃树,也就是把不需要的东西拿下来)
- 生产环境下的插件
- package.json下设定sideEffects:false 优缺点: 自动判定,只要引入没使用的都会去掉
"sideEffects":false,
"sideEffects":["**/*.css"], // 这样的话是识别的时候会刨除掉.css文件
scopeHosit (减少作用域的产生)
webpack4以后是自动执行不用管 特性: 每次执行都是把页面内部使用的属性会自动累加,不会形成多个作用域 举例:
let a = 1;
let b = 2;
let c = a + b;
export default c
hot(热更新)
css热更新
webpack.config.js的devServer的hot属性 每次刷新都是局部的css刷新,不用每次修改属性都刷新页面,提升效率
-
如果是style-loader是热更新,但是如果是用minicssloader就不热更新(把css分离成为link标签那种,就不热更新了)
- 解决: 在plugins里引入new webpack.hotModuleReplacementPlugin()
plugins: [ // 这里存放的是webpack的插件 // new webpack.hotModuleReplacementPlugin(), // css插件热更新js热更新
- 需要检测module.hot如果是true,就触发热更新
- 手动设置路径'./test'.default
- 然后动态设置元素内容为返回值
懒加载(动态加载模块)
- 点击的时候动态引入(不是module的引入,)不太懂
- 在webpack.config.js文件里写一个值,name是动态的0123
懒加载的模块重命名
webpackprefetch预引入模块(在其他文件都加载完成的情况下,预引入一些模块),引入是不能看到,加载是可以看到的模块. vue都是使用了预引入
webpackpreload 预加载
跟子模块同时异步加载,不影响的.但是不会引入
打包文件分析图表(生产环境下引入)
- webpack-bundle-analyzer
- 需要npm安装 然后webpack.config.js页面require引入,需要解构 然后在plugin页面new执行
- splitchunkS(包分割)
resolve(设置别名=>@符代表src)
- extensions(拓展)
- 每次书写路径不用写.js就是因为这里设定了自动寻找.js文件
- 后面可以写多个文件格式,会一次寻找
- alias(别名)
- 每个文件路径都可以给起一个别名作为快速查找的方式 ,比如很多项目@符代表src
happyback(多线程打包)
百度吧
根据mode分离配置环境
1.会拆分掉webpack.config.js文件到下面三个文件 2.如果是这三个文件,会先加载base文件,然后根据情况执行dev/prod
- webpack.base.js // 公共配置
- webpack.dev.js 开发配置
- webpack.prod.js 生产配置
