webpack4.0-webpack与浏览器缓存问题-10

通过出口配置output中配置通配符 contenthash来调整，老版本webpack会失效;一般在optimization中配置

runtimeChunk:{ name:' runtime '}来将mainfest抽离

const merge = require('webpack-merge')
const commonConfig = require('./webpack.common.js')
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 抽离css
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 对抽离的css进行压缩合并
const prodConfig = {
    mode:'production',
    devtool:'cheap-module-source-map',
    output: {
        filename: '[name].[contenthash].js', // 优化浏览器缓存
        chunkFilename: '[name].[contenthash].chunk.js' // 打包时chunk的命名 若为直接引用，打包时，走的是filename;若为间接引用，打包时走的是chunkFilename // 优化浏览器缓存
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename:'[name].css',
            chunkFilename:'[name].chunk.css'
        })
    ],
    optimization:{ // 配置用于对抽离的css进行压缩合并
        minimizer:[new OptimizeCSSAssetsPlugin({})],
    },
    performance: false, // 取消性能提示
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader, 'css-loader'] // 抽离css
            },
            {
                test:/\.scss$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader'] // 抽离css
            }
        ]
    }
}

module.exports = merge(commonConfig, prodConfig)