Please take a look at this code. The packaged css can be separated but not compressed. Minimize: true has been set
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
let pathsToClean = [
"build"
]
module.exports = {
entry: __dirname + "/app/main.js",//
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
devtool: false,
devServer: {
contentBase: "./public",//
historyApiFallback: true,//
inline: true//
},
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
},
{
test: /\.(less|css)$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
//resolve-url-loader may be chained before sass-loader if necessary
use: [{
loader: "css-loader",
options: {
minimize: true //css
}
}, {
loader: "postcss-loader"
},{
loader:"less-loader"
}]
})
}
]
},
plugins: [
new webpack.BannerPlugin(""),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.html"//new
}),
new CleanWebpackPlugin(pathsToClean),
new ExtractTextPlugin("css/style_[chunkhash].css"),
new webpack.optimize.UglifyJsPlugin({ //js
compress: { //
dead_code: true, //
warnings: false, //
loops: true //dowhile for
},
except: ["$super", "$", "exports", "require"] //,
})
],
};