webpack 之 oneOf babel缓存 tree shaking

oneOf:

提高loader匹配效率，使用方法如下，匹配到一个loader后，后面的就不会再继续匹配了。

注意：不能有两个配置处理同一种类型文件

module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                // //优先执行
                enforce:'pre',
                loader:'eslint-loader',
                options:{
                    fix:true
                }
            },
            {
                //下面的loader只会匹配一个，处理性能更好
                //注意：不能有两个配置处理同一种类型文件
                oneOf:[
                    {
                        test:/\.css$/,
                        use:[...commenCssLoader]
                    },
                    {
                        test:/\.less$/,
                        use:[...commenCssLoader,'less-loader']
                    },
                ]
            }
        ]
    },

babel缓存：

不用重新加载所有的文件，用户第二次进入页面的时候直接读取缓存
1.在匹配.js文件的loader中写入配置cacheDirectory

{
                        test:/\.js$/,
                        exclude:/node_modules/,
                        loader:'babel-loader',
                        options:{
                            presets:[
                                [
                                    '@babel/preset-env',
                                    {
                                        useBuiltIns:'usage',
                                        corejs:{version:3},
                                        targets:{
                                            chrome:'70',
                                            firefox:'62',
                                            ie:'9',
                                            safari:'10',
                                            edge:'17',
                                        }
                                    }
                                ]
                            ],
                            //开启babel缓存
                            //第二次构建时，会读取之前的缓存
                            cacheDirectory:true
                        }
                    },

2.给输出的js文件还有css文件设置打包输出名称

output:{
        filename:'js/built.[contenthash:10].js',
        path:resolve(__dirname,'build')
    },

 new MiniCssExtractPlugin({
            filename:'css/built.[contenthash:10].css'
        }),

配置详情

/**
 * babel缓存
 *   cacheDirectory:true
 * 文件资源缓存
 *   hash:每次webpack构建时会生成一个唯一的hash值。
 *      问题：因为js和css同时使用一个hash值。
 *        如果重新打包，会导致所有缓存失效。(可能只改变了一个文件)
 *   chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk,那么hash值就一样
 *      问题：js和css的hash值还是一样的。因为css是在js中被引用的，两个同属一个chunk
 *   contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样
 */

 tree shaking（树摇）:

去除无用代码(未使用的代码)
自动开启条件：1.必须使用es6模块化。2.开启mode:production环境。3.在package.json中配置sideEffects

/**
  * tree shaking（树摇）:
  * 去除无用代码(未使用的代码)
  * 自动开启条件：1.必须使用es6模块化。2.开启mode:production环境。
  * 作用:减少代码体积
  * 
  * 在package.json中配置
  * "sideEffects":false 所有代码都没有副作用 （都可以进行tree shaking）
  *   问题：可能会把css/ @babel/polyfill (副作用)文件干掉
  *   解决：
  *     "sideEffects":["*.css"]
  */