recently, in learning webpack4, I found a lot of differences from the previous version, the most significant is the handling of css, in version 4.8 of webpack can also run css compression, the current version does not support, but also drunk, I now do not know how to carry out css compression and prefix, is there any great guidance, attach my current configuration file:
const webpack = require("webpack");
const path = require("path");
const HTMLPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// setting webpack config
const config = {
target: "web",
devtool: "-sharpsource-map", // output mode
entry: { // multiple entry
pageA: "./src/pageA.js",
pageB: "./src/pageB.js"
},
output: { // output config
filename: "./[name].[hash].js",
chunkFilename: "./[name].[hash].js",
path: path.resolve(__dirname, "dist")
},
module: {
rules: [{ // loader sass and css
test: /\.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader?modules=false",
options: {
importLoaders: 1,
minimize: true
}
},
{
loader: "postcss-loader",
options: {
config: {
path: path.resolve(__dirname, "./postcss.config.js")
}
},
},
"sass-loader"
]
}]
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new HTMLPlugin({
template: "index.html"
})
]
};
module.exports = config;module.exports = {
plugins: [
require("autoprefixer")
]
};ask for God"s guidance, thank you very much!