• 移除掉未引用的代码
    • webpack production 模式下自动开启
    • webpack是一组功能搭配的一种效果

    • webpack其它模式下使用方法

      1. optimization: {
      2.       usedExports: true,
      3.       minimize: true,
      4.   },

    • webpack合并模块

      • concatenateModules:true
      • 将模块尽可能的合并到一个函数中，减少代码体积并提高运行效率
    • tree-shaking 和 babel
      • tree-shaking原理是esmodule，
      • 避免babel转换esm
    • 多页面打包
      • 将entry设置为对象，键用文件名即可
      • 同时修改输出的文件名，使用[name]占位符

    • 提取公共模块

      • optimiaztion中添加 splitChunks属性
        • 设置chunks:all
          1. mode: "none",
          2. // entry: "./src/index.js",
          3. //多文件入口
          4. entry:{
          5. index:"./src/index.js",
          6. album:"./src/album.js"
          7. },
          8. output: {
          9. // filename: "bundle.js",
          10. filename:'[name].bundle.js'
          11. },
          12. optimization: {
          13. usedExports: true,
          14. // minimize: true, //负责去掉无用代码
          15. concatenateModules:true,
          16. chunks:all //提取公共模块
          17. },
          18. plugins:[
          19. new HtmlWebpackPlugin({
          20. filename:"index.html",
          21. chunks:['index']
          22. }),
          23. new HtmlWebpackPlugin({
          24. filename:"album.html",
          25. chunks:['album']
          26. })
          27. ]
          28. }
          、

    • webpack动态导入

      • 按照esm动态导入的方式导入模块，webpack自动处理分包
    • 魔法注释
      • 调用import参数位置添加行内注释
        • /webpackChunkName:’name’/
        • name就会使用所命名名称
    • webpack MiniCssExtractPlugin
      • 实现css模块的按需加载
    • 压缩css
      • optimize-css-assets-webpack-plugin
      • 此处注意可以写在plugins里边
    • 输出文件名hash
      • 生产模式下，文件名当中使用hash
      • 解决缓存问题
      • finename用占位符
        • filename:[name]-[contenthash] 文件级别
        • filename:[name]-[hash]项目级别的，项目任何一个地方改动，项目hash值发生变化
        • filename:[name]-[chunkhash] chunk级别，打包过程中同一路的打包chunkhash一样，控制更精确一点，最好的方式：文件发生改变才改变，也可以指定hash长度，通过chunkhash:长度 来指定长度