webpack缓存

在webpack中，缓存可分为编译缓存和文件缓存两部分，其中，编译缓存指的是启动webpack时减少其编译源代码的时间，而文件缓存我们主要是指让浏览器缓存我们的静态资源文件，只有页面第一次被加载时才请求服务器，从第二次开始直接从缓存里进行读取。

编译缓存

编译缓存我们主要指的还是babel与loader这两块。

开启bebel缓存

使用 cacheDirectory: true 来开启babel的编译缓存。

// webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                useBuiltIns: 'usage',
                                corejs: {
                                    version: 3
                                },
                                targets: {
                                    chrome: '50',
                                    firefox: '50',
                                    ie: '8',
                                    safari: '10',
                                    edge: '15'
                                }
                            }
                        ]
                    ],
                    // 开启babel缓存，加上这一句就可以开启babel的缓存
                    cacheDirectory: true
                }
            }
        ]
    }
}

文件缓存

文件缓存我们主要是通过 hash 文件名的方式来实现，简单来说，就是你把构建后的静态资源文件以hash值命名就可以了，其它的交给浏览器和后台。

在webpack中，hash的类型有3种：

hash：每次构建都会生成全新的hash。
chunkhash：根据文件所在的代码块进行hash，如果多个文件所在的代码块相同，则这些文件所对应的hash也相同，换句话说，就是多个文件可能存在hash一样的情况。
contenthash：根据文件的内容来生成hash，只要文件的内容发生变化，该文件的hash就会发生变化，否则不变。

// webpack.config.js
module.exports = {
    output: {
        filename: '[contenthash].js',
        path: path.resolve(__dirname, 'build'),
        assetModuleFilename: 'images/[contenthash:10][ext]'
    },
    plugins: [
        new MiniCssExtractPlugin({
        	filename: 'css/[name]-[contenthash:10].css',
    	}),
    ]
}

就跟上面的写法类似，假如其它地方也需要使用hash来给文件命名，参照上面的写法就可以了。

loader优化

最后我们说一下loader的优化问题。

我们的loader配置都是写在 rules 中，我们可能会碰到一个类型的文件有可能会被多个loader进行处理的情况，这不否认，但也可能会存在其它只需要被执行一次的文件，我们可以用 oneOf 来优化一下。

// webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                enforce: 'pre', // 优先处理
                loader: 'eslint-loader',
                options: {
                    fix: true
                }
            },
            // 在这里使用oneOf代表这里面的loader只会执行一次
            oneOf: [
            	{
            		test: /\.js$/,
            		use: [
            			'@babel/preset-env',
            			{
            				useBilutIns: 'usage',
            				corejs: '3'
            			}
        			]
            	}
        	]
        ]
    }
}