javascript - 如何在 webpack/vue cli 中使用 uglifyjs 缩小和压缩 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。

这里有什么不工作：

应用程序.vue

<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 构建）：

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

标签： javascriptcssnode.jswebpacksass

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"
            }
        ]
    }
};