webpack高级特性，相关性能优化也基于该知识点，优化见下一篇

高级特性

多入口

• 入口配置
  - 输出配置
  • dev不需要
  • prod（用name变量区分多文件入口）
  • plugins配置（把上面打的js包根据plugins配置引入到对应html）

抽离和压缩css

• dev环境
  

• prod环境

  • 安装mini-css-extract-plugin插件
    

  • 此时不需要使用style-loader把css塞到style里去了
    

  • 在plugins里配置抽离css文件
    

  • 压缩配置

           //  安装相关依赖
    		const TerserJSPlugin = require('terser-webpack-plugin')
    		const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
    1
    2
    3

    		optimization: {
            // 压缩 css
            minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
        }
    1
    2
    3
    4

抽离公共代码

• 第三方模块一般抽离（特别大，不改动的时候容易命中缓存）
• 公共代码一般抽离
• 配置

  • dev环境:不配置（不然运行慢不便于调试）

  • prod环境

      	- 在optimization中配置
      	- minSize一般不会设置0，太小应该不拆分
    1
    2

  • common配置
    

懒加载

• webpack默认支持的不需要配置
• 类似定义一个chunk，另外生成一个文件
  

处理React和vue

• 即处理JSX

  • 安装 npm install --save-dev @babel/preset-react

  • 在.babelrc里配置

  • common中配置
    

• 处理Vue

  • 安装 npm i vue-loader
  • common中配置