webpack3 css,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()

.....

]

打完收工！

觉得有帮助，点个赞吧