javascript - 如何在 webpack 配置中包含和使用 DefinePlugin？

Question

您好我正在尝试使用定义插件，这样我就可以更新版本号以确保我的 JS 在发布新版本后刷新。不过，我似乎无法让 DefinePlugin 正常工作。我在文件夹 webpack 中看到它，我正在尝试遵循文档，但我得到了找不到它的错误。这是我的配置:

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: [new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify('5fa3b9'),
  })]
  },
  optimization: {
    minimizer: [new UglifyJsPlugin({ 
            uglifyOptions: {
                mangle: true,
                output: {
                    comments: false
                }
            }
       })]
  },
  mode: 'production'
}

Answer 1

我有 "webpack": "^4.28.4"并在 webpack 配置中定义

new webpack.DefinePlugin({
 PRODUCTION: JSON.stringify(true),
});

如果你控制这些变量，你就找不到它。我在有条件的情况下使用

if (PRODUCTION) {
 //do stuff
}

另一种情况是在对象中设置全局变量并与 webpack 共享。

这是一个例子

        new webpack.ProvidePlugin({
        CONFIG: path.resolve(__dirname, './CONSTS.js')
        }),
        // the path is src/CONST.JS

在 eslintrc 文件中，您可以添加该变量以避免导入错误。

    "settings": {
     "import/resolver": {
      "webpack": {
       "config": "webpack.dev.js"
      }
     }
    }

然后在任何文件中，您都可以使用 import {value} from 'CONFIG'