mini-css-extract-plugin搭配optimize-css-assets-webpack-plugin不生成source-map问题

前言：最近刚刚在玩webpack，一开始使用的就是webpack4+，玩到css分离和css压缩，百度得知需要两个插件：mini-css-extract-plugin和optimize-css-assets-webpack-plugin，毫不犹豫就npm install了，但是后面的坑。。。。。。

解决前的配置文件(webpack.config.js)

module.exports = {
	devtool: 'source-map',
    plugins: [
        // 分离css
        new MiniCssExtractPlugin({
            // 相对output.path目录
            filename: 'static/css/[name].[chunkhash].css'
        }),
        // 压缩css
        new OptimizeCssAssetsPlugin({})
    ]
};

• 上面的配置看似ok了，实际运行的时候也的确是ok了，css分离成单个文件，也进行了压缩，但是呢！source-map文件不见了，你没听错，不见了，什么鬼？？？
• 然后就爬贴了，百度，谷歌，最终终于找到了答案，几经波折(中间与正确答案擦肩而过，白白浪费了大白天时间)

解决后的配置文件(webpack.config.js)

module.exports = {
	devtool: 'source-map',
    plugins: [
        // 分离css
        new MiniCssExtractPlugin({
            // 分离文件路径
            filename: 'static/css/[name].[chunkhash].css'
        }),
        // 压缩css
        new OptimizeCssAssetsPlugin({
			cssProcessorOptions: {
                map: {
                    // 不生成内联映射,这样配置就会生成一个source-map文件
                    inline: false,
                    // 向css文件添加source-map路径注释
                    // 如果没有此项压缩后的css会去除source-map路径注释
                    annotation: true
                }
            }
		})
    ]
};

爬贴地址

Source Maps not working with Webpack 4.8 #53