- Extracted CSS into own file in production - Minified CSS in production - Added TerserJS back in to minify JS in production - Minified HTML in production as well
47 lines
1.3 KiB
JavaScript
47 lines
1.3 KiB
JavaScript
const path = require("path");
|
|
const common = require("./webpack.common");
|
|
const merge = require("webpack-merge");
|
|
const CleanWebpackPlugin = require("clean-webpack-plugin");
|
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
|
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
|
|
const TerserPlugin = require("terser-webpack-plugin");
|
|
var HtmlWebpackPlugin = require("html-webpack-plugin");
|
|
|
|
module.exports = merge(common, {
|
|
mode: "production",
|
|
output: {
|
|
filename: "[name].[contentHash].bundle.js",
|
|
path: path.resolve(__dirname, "dist")
|
|
},
|
|
optimization: {
|
|
minimizer: [
|
|
new OptimizeCssAssetsPlugin(),
|
|
new TerserPlugin(),
|
|
new HtmlWebpackPlugin({
|
|
template: "./src/template.html",
|
|
minify: {
|
|
removeAttributeQuotes: true,
|
|
collapseWhitespace: true,
|
|
removeComments: true
|
|
}
|
|
})
|
|
]
|
|
},
|
|
plugins: [
|
|
new MiniCssExtractPlugin({ filename: "[name].[contentHash].css" }),
|
|
new CleanWebpackPlugin()
|
|
],
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.scss$/,
|
|
use: [
|
|
MiniCssExtractPlugin.loader, //3. Extract css into files
|
|
"css-loader", //2. Turns css into commonjs
|
|
"sass-loader" //1. Turns sass into css
|
|
]
|
|
}
|
|
]
|
|
}
|
|
});
|