FT（第一天） - webpack4.0 入门第三节（笔记）（webpack 高级部分）

1.tree shaking   作用：只打包我使用到的内容，不使用的内容不打包（他只支持ES Module（静态引入require为动态）方式的引入）

module.exports={
    entry:"./addp.js"
    ouput:{...},
    optimization: {                             //优化 
       usedExports: false,                      //启用 tree shaking
       // 注意：如果使用了pollyfill这样的库，由于代码中没有使用，所以在package.json内添加 
       // "sideEffects": ["@babel/polyfill","*.css"]字段    所有的css都不要使用tree shaking
    
       minimize: false
   }
}

2.development   production  不同模式的打包

1）区别生产与开发环境的不同   source-map   deveserver等的不同  需要用到webpack-merg来合并生产与开发环境和公用部分的配置代码

3.code splitting 代码分割   （就是将代码分割成合适大小的文件，加快网站运行速度）配置如下

   optimization: {
        splitChunks: {          //代码分割
            chunks: 'async',                  //选定预配置的模块
            minSize: 0,  //当文件超过30kb就做代码分割分割后的位置在下方default字段配置
            maxSize: 0,  //最大文件的拆分
            minChunks: 2,   //引用超过两次，就做代码分割
            maxAsyncRequests: 6,     //做代码分割的时候超过6个就不做代码分割了
            maxInitialRequests: 4,    //入口引入的代码分割4个
            automaticNameDelimiter: '~',
            cacheGroups: {
                //代码分割后放的位置
                defaultVendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true,    //打包过的模块就不要打包了，直接使用就好
                    filename: "common.js"        //打包到common.js
                }
            }
        }
    }