定制Webpack Loader：精细把控Vue/Cli3控制台日志输出

2023-10-05 05:04:27

导语

在Web项目开发过程中，为了方便调试，我们经常会在控制台通过console.log输出很多日志。然而，通常在项目上线的时候，我们需要把这些日志屏蔽掉。通过配置Webpack，可以轻松实现这一功能。

操作步骤

新建loaders文件夹

在项目根目录下，新建一个名为loaders的文件夹，用于存放自定义的Webpack Loader。

创建自定义Loader

在loaders文件夹下，创建一个名为console-log-loader.js的文件，并输入以下代码：

// console-log-loader.js
const loaderUtils = require('loader-utils');

module.exports = function(source) {
  const options = loaderUtils.getOptions(this);

  if (options.mode === 'production') {
    // 在生产环境下，移除所有console.log语句
    return source.replace(/console\.log\((.*?)\);/g, '');
  } else {
    // 在开发环境下，保留console.log语句
    return source;
  }
};

在Webpack配置文件中配置Loader

在Webpack配置文件（通常是webpack.config.js）中，找到module.rules数组，并添加以下配置：

// webpack.config.js
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: [
        {
          loader: path.resolve(__dirname, 'loaders/console-log-loader.js'),
          options: {
            mode: process.env.NODE_ENV,
          },
        },
      ],
    },
  ],
},