admin管理员组

文章数量:1404924

In production mode my webpack minifies the .js (as it should). But I also need to minify my .css, and to do this I must use OptimizeCssAssetsPlugin. When I use it, it minifies my .css but then my .js stays unminified.

My guess is that when I use optimization (next to 'modules, and 'plugins') something is missing for js because without whole 'optimization' block it works. But what is it? And why?

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WriteFilePlugin = require("write-file-webpack-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                exclude: /node_modules/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./demo/index.html",
            filename: "index.html", 
            inject: false
        }),
        new MiniCssExtractPlugin({
            filename: "style.css"
        }),
        new WriteFilePlugin() 
    ],
    optimization: {
        minimizer: [
          new OptimizeCssAssetsPlugin(), 
        ],
      },
};

In production mode my webpack minifies the .js (as it should). But I also need to minify my .css, and to do this I must use OptimizeCssAssetsPlugin. When I use it, it minifies my .css but then my .js stays unminified.

My guess is that when I use optimization (next to 'modules, and 'plugins') something is missing for js because without whole 'optimization' block it works. But what is it? And why?

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WriteFilePlugin = require("write-file-webpack-plugin");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                exclude: /node_modules/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./demo/index.html",
            filename: "index.html", 
            inject: false
        }),
        new MiniCssExtractPlugin({
            filename: "style.css"
        }),
        new WriteFilePlugin() 
    ],
    optimization: {
        minimizer: [
          new OptimizeCssAssetsPlugin(), 
        ],
      },
};

• javascript
• webpack
• minify

Share Improve this question Follow edited Mar 27, 2019 at 19:11 prk_001 asked Mar 25, 2019 at 14:38 prk_001prk_001 38133 silver badges1818 bronze badges 3

• 1 Please have a look at the production configuration of MiniCssExtractPlugin documentation : While webpack 5 is likely to e with a CSS minimizer built-in, with webpack 4 you need to bring your own. To minify the output, use a plugin like optimize-css-assets-webpack-plugin. Setting optimization.minimizer overrides the defaults provided by webpack, so make sure to also specify a JS minimizer... – tagkiller Commented Mar 25, 2019 at 15:05
• 1 Thank you @tagkiller ! You should post it as an answer as it is a correct answer. I'd never think to look for it in MiniCssExtractPlugin doc though. – prk_001 Commented Mar 25, 2019 at 15:10
• Thanks to let me know it helped you, I just put the answer as it was what you were looking for :-) – tagkiller Commented Mar 26, 2019 at 17:04

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Please have a look at the production configuration of MiniCssExtractPlugin documentation :

While webpack 5 is likely to e with a CSS minimizer built-in, with webpack 4 you need to bring your own. To minify the output, use a plugin like optimize-css-assets-webpack-plugin. Setting optimization.minimizer overrides the defaults provided by webpack, so make sure to also specify a JS minimizer...

Regards,

const TerserJSPlugin = require('terser-webpack-plugin');

....

optimization: {
    minimizer: [
        // Minify js files:
        // (TerserJS is webpack default minifier but we have to specify it explicitly 
        // as soon as we include more minifiers)
        new TerserJSPlugin({}),
        // Minify css files:
        new OptimizeCSSAssetsPlugin(),
    ],
},

First, install the plugin:

 npm install optimize-css-assets-webpack-plugin --save-dev

Then we need to require it at the top of our webpack.config.js:

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

Optimization.minimizer” setting:

module.exports = {......
optimization: {minimizer: [new TerserJSPlugin({}),new OptimizeCSSAssetsPlugin({})],}

Note : that besides the “OptimizeCSSAssetsPlugin,” there is another one called “TerserJSPlugin,” which is a plugin that already es with webpack.

You won’t need to install it yourself; that’s the plugin used by default to minify your JavaScript when you use “production” mode.

However, the thing you need to do is require it at the top of your webpack configuration file:

const TerserJSPlugin = require('terser-webpack-plugin');

本文标签：