如何使用 uglifyjs 在 webpack/vue cli 中縮小和壓縮 css/scss？

Question

我有帶有 cli 的 vue 應用程序。 我想使用uglifyjs 插件。

所以我將此代碼添加到我的 vue.config.js 中：

configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            parse: {},
            compress: {},
            mangle: true, // Note `mangle.properties` is `false` by default.
            output: null,
            toplevel: false,
            nameCache: null,
            ie8: false,
            keep_fnames: false,
         },
     }),
  ],
},

我想壓縮 *.scss 和 *.vue 文件中存在的所有 css。 如何配置UglifyJsPlugin來壓縮和縮小？ 例如，我有這個選擇器： .some-thing輸出應該是： .x 。

這里有什么不起作用：

應用程序

<template>
  <div class="some">appp</div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style lang="scss" scoped>
 .some { border:1px solid red;}
</style>

我運行這個命令（哪個 vue cli build）：

npm run build (for production).

我的完整 vue.config.js：

const merge = require('lodash/merge');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {

  css: {
    loaderOptions: {
      sass: {
        prependData: `
              @import "~@/sass/mixins.scss";
            `,
      },
    },
  },

  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            parse: {},
            compress: {},
            mangle: true, // Note `mangle.properties` is `false` by default.
            output: null,
            toplevel: false,
            nameCache: null,
            ie8: false,
            keep_fnames: false,
          },
        }),
      ],
    },
  },

};

css/app.css 的內容如下：

.some[..] {border:1px solid red;}...

** 編輯 ** @Tony Ngo 回答后：

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {

  css: {
    loaderOptions: {
      sass: {
        prependData: `
              @import "~@/sass/mixins.scss";
            `,
      },
    },
  },

  configureWebpack: {
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: false,
          extractComments: 'all',
          uglifyOptions: {
            compress: true,
            output: null,
          },
        }),
        new OptimizeCSSAssetsPlugin({
          cssProcessorOptions: {
            safe: true,
            discardComments: {
              removeAll: true,
            },
          },
        }),
      ],
    },
    plugins: [
      new CompressionPlugin({
        test: /\.(js|css)/,
      }),
      new UglifyJsPlugin(),
    ],
  },

  chainWebpack: (config) => {
    // nothing here yet
  },
};

.some仍然在我的 app.css 包中。 我想縮小和壓縮，所以我希望像.x

Answer 1

你可以在這里查看我的完整代碼

這是您丑化代碼所需的基本設置

module.exports = {
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: false,
                extractComments: 'all',
                uglifyOptions: {
                    compress: true,
                    output: null
                }
            }),
            new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                    safe: true,
                    discardComments: {
                        removeAll: true,
                    },
                },
            })
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        new CompressionPlugin({
            test: /\.(js|css)/
        }),
        new UglifyJsPlugin(),
    ],
    module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: ["babel-loader", "eslint-loader"]
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                loader: "file-loader"
            },
            {
                test: /\.(woff|ttf|otf|eot|woff2|svg)$/i,
                loader: "file-loader"
            }
        ]
    }
};