webpack多页面打包

[sophister]

主要参考这些文章：

• http://www.cnblogs.com/lvdabao/p/5944420.html
• https://github.com/vhtml/webpack-MultiplePage

[sophister]

OptimizeCSSAssetsPlugin 会删除 css 的 浏览器兼容前缀 -webkit-

webpack 4中新增了 mode 配置，默认是 production，在 production模式下，会自动设置 optimization.minimize: true，我们在配置里，设置了 optimization.minimize 如下:

minimizer: [
                new UglifyJsPlugin({
                    cache: true,
                    parallel: true,
                    sourceMap: prod ? false : true // set to true if you want JS source maps
                }),
                new OptimizeCSSAssetsPlugin()
            ],

然后在 postcss-loader 里，使用 autoprefixer 来自动添加浏览器兼容的前缀：

{
                    test: /(_\.sass)|(_\.scss)$/,
                    use:[
                        MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: !!prod ? false : true, // 
                                modules: true,
                                camelCase: true,
                                minimize: !!prod ? true : false,
                                localIdentName: '[name]__[local]--[hash:base64:5]'
                            },
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                ident: 'postcss',
                                sourceMap: prod ? false : true ,
                                plugins: (loader) => [
                                    require('autoprefixer')(),
                                ],
                            },
                        },
                        {
                            loader: "sass-loader",
                            options: {
                                sourceMap: prod ? false : true ,
                                includePaths: [
                                    path.resolve(__dirname, '../src/'),
                                ],
                            },
                        },
                    ],
                },

根据这个配置，发现在 development 下打包的 css 文件，兼容代码会自动添加上；但是在 production 下，却没有兼容的css代码！！

测试发现，OptimizeCSSAssetsPlugin 这个默认会删掉 css 中的浏览器前缀！必须要这样设置，明确的禁止OptimizeCSSAssetsPlugin中删除前缀才行：

minimizer: [
                new UglifyJsPlugin({
                    cache: true,
                    parallel: true,
                    sourceMap: prod ? false : true // set to true if you want JS source maps
                }),
                new OptimizeCSSAssetsPlugin({
                    cssProcessorOptions: {
                        autoprefixer: {
                            disable: true,
                        }
                    }
                })
            ],

根据 这篇issue ，还有一些其他的配置项，还没找到文档都是什么作用……