7.自动清理构建目录产物

[lizj-core]

当前构建时的问题：每次构建的时候不会清理目录，造成构建的输出目录output文件越来越多

可以通过npm scripts清理构建目录：

rm -rf ./dist && webpack
rimraf ./dist && webpack

自动清理构建目录，能避免构建前每次都需要手动删除dist 使用 clean-webpack-plugin : 默认会删除output指定的输出目录 安装： npm i clean-webpack-plugin -D

webpack.prod.js与webpack.dev.js:

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugin:[
    ...
    new CleanWebpackPlugin()
]

[lizj-core]

8.自动补齐css3前缀

使用autoprefixer插件，如css3的：display: flex; 与postcss-loader一起使用 安装： npm i postcss-loader autoprefixer -D

webpack.prod.js:

 {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,  
                    "css-loader",
                    "less-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [
                                require('autoprefixer')({
                                    browsers: ['last 2 version', '>1%', 'ios 7']
                                })
                            ]
                        }
                    }
                ]
            },

[lizj-core]

9.移动端自动转换成rem

以前：css媒体查询实现响应式布局 缺陷： 需要写多套适配样式的代码 现在： rem和px的对比： rem是相对单位 px是绝对单位 使用px2rem-loader 页面渲染时计算根元素的font-size值 安装： npm i px2rem-loader -D

webpack.prod.js

 {
                        loader: 'px2rem-loader',
                        options: {
                            remUnit: 75,
                            remPrecision: 8
                        }
                    }

到node_module找到：lib-flexible，将代码引入到index.html里面，就能实时计算， 下面实现在webpack做资源的内联

[lizj-core]

10.提取公共资源

利用SplitChunksPlugin 进行公共脚本分离 webpack4内置的，替代CommonsChunkPlugin插件

chunks参数说明： async： 异步引入的库进行分离（默认） initial： 同步引入的库进行分离 all： 所有引入的库进行分离（推荐）

module.exports = {
    optimization: {
        splitChunks: {
     minSize: 0,
            cacheGroups: {
                commons: {
                    test: /(react|react-dom)/,
                    name: 'vendors',
                    chunks:'all'
                }
            }
        }
    }
}

 new HtmlWebpachPlugin({
            template: path.join(__dirname, 'src/index.html'), // html模板所在位置
            filename: 'index.html',  // 指定打包出来的html文件名称
            chunks: ['vendors', 'main'], // 指定html要使用哪些chunk
            // inject: true,
            // minify: {
            //     html5: true,
            //     collapseWhitespace: true,
            //     preserveLineBreaks: false,
            //     minifyCSS: true,
            //     minifyJS: true,
            //     removeComments: false,
            // }
        }),

[lizj-core]

11.Webpack友好的错误提示插件friendly-errors-webpack-plugin

Friendly-errors-webpack-plugin识别某些类别的webpack错误，并清理，聚合和优先级，以提供更好的开发人员体验。 npm install friendly-errors-webpack-plugin --save-dev

const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
plugins: [
new FriendlyErrorsWebpackPlugin()
]