标签：指南 ... CLI4 Vue console bundle webpack plugins config

Vue CLI4.x 配置指南

持续更新中

Version

Vue CLI 测试版本：@vue/cli 4.5.4

Table of content

• 去掉console.log
• 添加打包分析

⚡去掉console.log

// 内置插件不需要安装
const TerserPlugin = require('terser-webpack-plugin')

// 方法一：简单配置
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
          terserOptions: {
              compress: {
                  drop_console: true,
                  drop_debugger: true,
              },
          },
          sourceMap: false,
      })
    ],
  },
};

// 方法二：基于环境有条件地配置
module.exports = {
  configureWebpack: (config) => {
          if (process.env.NODE_ENV === 'production') {
              const plugins = []
              plugins.push(
                  new TerserPlugin({
                      terserOptions: {
                          compress: {
                              drop_console: true,
                              drop_debugger: true,
                          },
                      },
                      sourceMap: false,
                  })
              )
              config.optimization.minimizer = [
                  ...config.optimization.minimizer,
                  ...plugins,
              ]
          }
      },
}

⚡添加打包分析

• Install

# NPM
npm install --save-dev webpack-bundle-analyzer
# Yarn
yarn add -D webpack-bundle-analyzer

• Usage

// 方法一：通过configureWebpack选项配置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  configureWebpack: (config) => {
          if (process.env.NODE_ENV === 'production') {
              const plugins = []
              plugins.push(
                  new BundleAnalyzerPlugin()
              )
              config.plugins = [
                  ...config.plugins,
                  ...plugins,
              ]
          }
      },
}

• Reference
  • webpack-bundle-analyzer Homepage

License

MIT

Links

repo

标签：指南,...,CLI4,Vue,console,bundle,webpack,plugins,config
来源： https://www.cnblogs.com/GeniusLyzh/p/14852563.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。