请问webpack如何压缩css和js，求具体例子代码，谢谢。

Question

如题。我看了webpack视频，介绍了minify压缩html，使用了 html-webpack-plugin我想知道css和js怎么处理

Answer 1

可以用UglifyJsPlugin压缩js和css,如果需要需要单独把css提取出来,可以用extract-text-webpack-plugin

const path = require("path");    
const htmlWP = require("html-webpack-plugin");    
const webpack = require("webpack");    
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");    
module.exports = {    
entry: "./src/script/main.js",    
output: {    
path: path.join(__dirname + "/dist"),    
filename: "js/bundle.js"    
},    
module: {    
rules: [{    
test: /\.css$/,    
use: [    
"style-loader",    
"css-loader"    
]    
},    
{    
test:/\.(png|svg|jpg|gif)$/,    
use:[    
"file-loader"    
]    
},    
{    
test:/\.js$/,    
use:[    
"babel-loader"    
],    
exclude: path.join(__dirname + "/node_modules"),    
include: path.join(__dirname + "/src")    
}],    
},    
plugins: [    
new htmlWP({    
filename: "index.html",    
template: "index.html",    
minify: {    
collapseWhitespace: false,    
removeComments: true    
}    
}),    
new webpack.LoaderOptionsPlugin({    
options: {    
postcss: [require("autoprefixer")({    
browsers: ["last 5 versions"]    
})]    
}    
}),    
new UglifyJsPlugin({    
compress: {    
warnings: false    
}    
}),    
new webpack.DefinePlugin({    
"process.env": {    
NODE_ENV: JSON.stringify("production")    
}    
})    
]    
};