webpack打包后发现有一部分代码还携带注释，如何解决？/webpack打包删除注释以及console.log--快快点进来看一看吧~~

1.自己配置了一个webpack，打包后发现里边部分代码还存在注释，顿感不妙

废话不多说 解决如下：

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

然后在webpack.config.js文件中进行配置

const TerserWebpackPlugin = require('terser-webpack-plugin');
// 实例化TerserWebpackPlugin对象
const terserPlugin = new TerserWebpackPlugin({
  parallel: 4,
  extractComments: true,
  terserOptions: {
    compress: {
      warnings: false,
      drop_console: true,
      drop_debugger: true,
      pure_funcs: ['console.log'] //移除console
    }
  }
});

module.exports = {
	optimization: {
    	minimizer: [
      	// 只有打包环境为production时才能生效
      	terserPlugin
    ],
  },
}

开开心心运行 npm run build

啪啪啪打脸，报错了,报错信息如下：

const hooks = compiler.webpack.javascript.JavascriptModulesPlugin.getCompilationHooks(compilation); 
TypeError: Cannot read property 'javascript' of undefined

解决问题：由于terser-webpack-plugin@5与webpack @ 4不兼容，所以运行npm uninstall terser-webpack-plugin

然后运行 试一把~~~~

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

打包成功了 为啥还有注释？？？？

啪啪啪又打脸了？？？？！！！！

好了，最终发现原因，因为生产环境配置了devtool: 'cheap-module-eval-source-map'导致代码被转成了字符串，所以无法删除注释

最终解决方案如下： 打包时候注释掉 webpack.config.js里的

devtool: 'cheap-module-eval-source-map', //开发环境下使用

保存代码 ，重新打包~ 完美~~

完整版的webpack.config.js配置，打包时候记得注释掉那个map插件，然后publicPath根据需要设置，其实注释掉不要也可以的

// 如果有額外的.babelrc配置的話就可以使用這段代碼1
// module.exports = {
//   module: {
//     rules: [
//       {
//         test:/.jsx?$/,
//         use: ['babel-loader'],
//         exclude:/node_modules/  //排除 node_modules目錄
//       }
//     ]
//   }
// }
// 如果有額外的.babelrc配置的話就可以使用這段代碼2
// 在webpack中配置 babel，如果沒有額外的.babelrc配置的話就可以使用這段代碼1
//webpack.config.js
// 首先引入插件1
// 导入terser-webpack-plugin-->减少js体积(其中删除js的console.log和注释)
const TerserWebpackPlugin = require('terser-webpack-plugin')
// 实例化TerserWebpackPlugin对象
const terserPlugin = new TerserWebpackPlugin({
  parallel: 4,
  extractComments: true,
  terserOptions: {
    compress: {
      warnings: false,
      drop_console: true,
      drop_debugger: true,
      pure_funcs: ['console.log'], //移除console
    },
  },
})
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const isDev = process.env.NODE_ENV.trim() === 'development' //html-webpack-plugin 的 config 的妙用4-1
const { CleanWebpackPlugin } = require('clean-webpack-plugin') //清理dist目錄的插件
const path = require('path') //設置出口使用
const config = require('./public/config')[isDev ? 'dev' : 'build'] //html-webpack-plugin 的 config 的妙用4-2
module.exports = {
  entry: './src/index.js', //webpack的默認配置，也可以寫一個數組
  output: {
    path: path.resolve(__dirname, 'dist'), //必須是絕對路徑
    // filename: 'bundle.js',
    // filename: 'bundle.[hash].js',
    filename: 'bundle.[hash:6].js', //考虑到CDN缓存的问题，我们一般会给文件名加上 hash
    // publicPath: '/' // 打包上线之前要改一下这个哦TODU-LIST
  },
  mode: isDev ? 'development' : 'production', //html-webpack-plugin 的 config 的妙用4-3
  module: {
    rules: [
      {
        test: /.jsx?$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [
              [
                '@babel/plugin-transform-runtime',
                {
                  corejs: 3,
                },
              ],
            ],
          },
        },
        exclude: /node_modules/,
      },
      {
        //看清楚啦  這裡有四個loaderloader 的执行顺序是从右向左执行的，也就是后面的 loader 先执行，上面 loader 的执行顺序为: less-loader ---> postcss-loader ---> css-loader ---> style-loader
        test: /.(le|c)ss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [
                  require('autoprefixer')({
                    overrideBrowserslist: ['>0.25%', 'not dead'],
                  }),
                ]
              },
            },
          },
          'less-loader',
        ],
        exclude: /node_modules/,
      },
      {
        test: /.(png|jpg|gif|jpeg|webp|svg|eot|gltf|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'url-loader',
            // options: {
            //     limit: 10240, //10K
            //     esModule: false
            // }
            // ,
            // 使用上面的那一段運行後會把圖片名字改為MD5哈希值，使用下面的會保留原有名稱加上六位哈希值
            options: {
              limit: 10240, //10K
              // publicPath: './src/',
              esModule: false,
              name: '[name]_[hash:0].[ext]',
              outputPath: 'assets', //這個可以將打包後的資源放到指定的文件夾下
            },
          },
        ],
        exclude: /node_modules/,
      },
      // {
      //   test: /.html$/,
      //   use: 'html-withimg-loader'
      // },
    ],
  },
  optimization: {
    minimizer: [
      // 只有打包环境为production时才能生效
      terserPlugin,
    ],
  },
  plugins: [
    // 數組，放著所有的webpack插件
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
      config: config.template, //html-webpack-plugin 的 config 的妙用4-4
      minify: {
        removeAttributeQuotes: false, //是否刪除屬性的雙引號
        collapseWhitespace: false, //是否折疊空白
      },
      hash: true, //是否加上hash,默認是false
    }),
    new CleanWebpackPlugin(), //清理dist目錄插件，不需要傳參數，它自己可以找到outPath
    // new CleanWebpackPlugin({cleanOnceBeforeBuildPatterns:['**/*','!dll','!dll/**']}) //如果你有需要不刪除dll目錄下的文件的話可以這樣子寫
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'src/assets/',
          to: 'assets/',
        },
      ],
    }),
  ],
  devServer: {
    port: '8080', //默認是8080
    quiet: false, //默認不啟動
    inline: true, // 默認開啟inline 模式，如果設置為false, 開啟 iframe模式
    stats: 'errors-only', //終端僅僅打印 error
    overlay: false, //默認不啟用
    clientLogLevel: 'silent', //日誌等級
    compress: true, //是否啟用gzip壓縮
  },
  devtool: 'cheap-module-eval-source-map', //开发环境下使用 打包上线之前要改一下这个哦TODU-LIST
}

// 在webpack中配置 babel，如果沒有額外的.babelrc配置的話就可以使用這段代碼2