Front-end (VUE) packaging online removal solution

Preface

When front-end project packaging is launched, it often encounters a problem. Forgot to delete it while writing code and brings it to the formal environment, which is definitely not friendly to formal projects. You can directly use the plugin "terser-webpack-plugin" to solve it

Introduced

npm install terser-webpack-plugin --save-dev

Configuration

Projects built with webpack

In your , configure terser-webpack-plugin:

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

 = {
  // Other configuration items...  optimization: {
    minimize: true, // Must be enabled, otherwise the configuration will not fail    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
};

Projects built with vue-cli

In your , configure terser-webpack-plugin:

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

 = {
  // Other configuration items...configureWebpack: config =&gt; {
    // Remove the packaged    let optimization = {
      minimize: true, // Must be enabled, otherwise the configuration will not fail      minimizer: [
        new TerserPlugin({
          terserOptions: {
            compress: {
              drop_console: true,
            },
          },
        }),
      ],
    };
    (config, {
      optimization,
    });
  },
};

Summarize

This is the article about the solution to online removal of front-end (VUE) packaging. For more related content on online removal of VUE packaging, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!