如何在Webpack配置中引入使用DefinePlugin？配置报错求助

嘿，我一眼就揪出了你配置里的关键问题——你把plugins数组错误地嵌套到module对象里面去了！这完全不符合Webpack的配置结构规范，也是触发“找不到插件”报错的核心原因。

问题根源拆解 #

Webpack的配置文件中，plugins是和entry、output、module平级的顶层配置项，而不是module的子属性。你现在把DefinePlugin的配置塞在module里，Webpack根本识别不到这个插件配置，自然会抛出找不到插件的错误。

修正后的完整配置代码 #

只需要把plugins移到顶层，和module、optimization同级就可以解决问题：

const path = require('path'), settings = require('./settings');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');

module.exports = {
 entry: {
  'scrollerbundled': [settings.themeLocation + "js/scroller.js"],
  'mapbundled': [settings.themeLocation + "js/shopmap.js"],
  'sculptor': [settings.themeLocation + "js/sculptor.js"]
 },
 output: {
  path: path.resolve(__dirname, settings.themeLocation + "js-dist"),
  filename: "[name].js"
 },
 module: {
  rules: [
   { 
    test: /\.js$/,
    exclude: /node_modules/,
    use: { 
     loader: 'babel-loader',
     options: { presets: ['@babel/preset-env'] }
    } 
   }
  ]
 },
 // 将plugins移至顶层，与module平级
 plugins: [
  new webpack.DefinePlugin({
   PRODUCTION: JSON.stringify(true),
   VERSION: JSON.stringify('5fa3b9'),
  })
 ],
 optimization: {
  minimizer: [new UglifyJsPlugin({ 
   uglifyOptions: { mangle: true, output: { comments: false } }
  })]
 },
 mode: 'production'
}

快速验证插件是否生效 #

修正后，你可以在任意业务JS文件里加一行测试代码，确认DefinePlugin是否正常工作：

// 比如在scroller.js中添加
console.log('当前版本号:', VERSION);
console.log('是否为生产环境:', PRODUCTION);

打包后运行代码，若控制台能正确打印出5fa3b9和true，就说明插件已经按预期运行了。

内容的提问来源于stack exchange，提问作者Tintinabulator Zea