1. //开发环境使用
    2. devtool:'souce-map' //错误检测
    3. //babel缓存
    4. cacheDirectory:true
    5. //devserver:
    6. devServer{
    7.   //gzip压缩
    8. compress:true,
    9. prot:3000,
    10. hot:true,
    11. //不显示日志
    12. clientLogLevel:'silent',
    13. //只打印基本信息
    14. quiet:true,
    15. //代理 跨域
    16. proxy:{
    17.   '/api':{
    18.   target:'localhost:3000/api',
    19.   //发送请求路径重写
    20.   pathRewrite:{}
    21.   },
    22. //忽略
    23. watchOptions:{
    24. ignored:/node_modules/
    25. }  
    26. }
    27. //生产环境
    28. //文件缓存
    29. [hash]:index.[hash].js
    30. [chunkhash]:长效缓存 ,如果打包来源相同chunk hash 相同
    31. [contenthash]:不同文件使用不同的hash 比如jscss 不同
    32. # tree shaking
    33. 树摇:去除代码没有使用的代码
    34. > 必须es6模块化 生产环境
    35. package.json
    36. "sideEffects":["*.css"]
    37. #抽离node_module
    38. omtimization:{
    39.    splitChunks:{
    40.    chunks:'all'
    41.    }
    42. }
    43. # 懒加载lazy-loadding
    44. 预加载 webpackPrefetch:true //空闲提前加载
    45. import(/* webpackChunkName: "print",webpackPrefetch:true*/'./').then(()=>{})
    46. # 多进程打包
    47. thread-loader
    48. 哪个loader用就配置哪个 常用于babel 
    49. 常用于大量代码
    50. 如:
    51. use[
    52.   {
    53.   loader:'thread-loader',
    54.     options:{workers:2}//设置进程
    55.   },
    56.   {...loader}
    57. ]
    58. ## externals
    59. 使用cdn代替
    60. //webpack.config.js
    61. externals:{
    62.   库名:npm包名
    63.  Jquery:"jQuery"
    64. }
    65. 然后在html引入cdn
    66. ## dll
    67. 动态连接库 将多个库打包为一个chunk
    68. ## resolve
    69. webpack.config.js
    70. resolve:{
    71.   //配置路径别名
    72.   alias:{
    73.   $css:resolve(__dirname,'src/css/index.css')
    74.     //import $css === import '...index.css'
    75.   }
    76.   //忽略文件名
    77.   extensions:['.js','.css']
    78.   告诉webpack哪里查找node_modules
    79.   modules:[resolve(__dirname,'../../node_modules'),node_modules]
    80. }
    • optimization
      1. optimization:{
      2. splitChunks:{
      3.   chunks:'all',
      4.   minSize:30*1024, //分割代码大于30kb 小于不分割
      5.   maxSize:0//无最大限制
      6.   minChunks:1,至少引用一起才会被chunk
      7.   maxAsyncRequests:5 //按需加载时并行加载的数量
      8.   maxInitialRequests:3 //入口js最大并行请求数量
      9.   automaticNameDelimiter:'~'//名称连接符号,xx~
      10.   name:true //命名规则
      11.   cacheGroups:{
      12.     //分割规则
      13.     vendors:{
      14.       test:/node_modules/,//需要写成正则
      15.         priority:-10
      16.     }
      17.   },
      18.     //js压缩
      19.    minimizer: [new TerserPlugin(
      20.    cache:true,
      21.    parallel:true
      22.    )],
      23. }
      optimization: {
  minimizer: [new OptimizeCSSAssetsPlugin({}),
  new terserwebpackplugin({
    cache: true,
    parallel: true 
  })],
  runtimeChunk: {
    name: 'manifest',
  },
  splitChunks: {
    chunks: 'async',
    minSize: 30000,
    minChunks: 1,
    maxAsyncRequests: 5,
    maxInitialRequests: 3,
    name: false,
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendor',
        chunks: 'all',
      },
      styles: {
        name: 'styles',
        test: /\.(scss|css)$/,
        chunks: 'all',
        enforce: true
      }
    },
  },
},