webpack3压缩js和css

注意，本文讲的是webpack3的方法。
首先压缩js，需要使用的plugin是uglifyjs-webpack-plugin, 压缩css，使用的plugun是extract-text-webpack-plugin。不过最新的uglifyjs-webpack-plugin不支持webpack3，所以这里要安装一个老的版本。

查看所有版本

 npm view uglifyjs-webpack-plugin versions

or

yarn info uglifyjs-webpack-plugin versions

添加依赖，这里使用yarn

yarn add extract-text-webpack-plugin --dev
yarn add uglifyjs-webpack-plugin@1.3.0 --dev

webpack配置，关键部分，配合vue

    rules:[
          {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                   fallback: 'vue-style-loader',
                   use: [{
                           loader: 'css-loader',
                           options: {
                               minimize: true
                           }
                         }],

                }),
            },
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'vue-style-loader',
                    use: [{
                            loader: 'css-loader',
                            options: {
                                minimize: true
                            }
                         },{
                            loader: 'sass-loader',
                         }]
                })
            }
          ...
        ],
    devtool: false,
    plugins:[
        new VueLoaderPlugin(),
        new ExtractTextPlugin('css/[name].[chunkhash:8].css'),
        new UglifyJsPlugin()
        .....
    ]

打完收工！

觉得有帮助，点个赞吧