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

Question

嗨，我正在尝试使用Define插件来更新版本号，以确保在发布新版本后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'
}

- Tintinabulator Zea

---

在我的情况下，我使用了 'process.env.VARIABLE_NAME' 而不是普通变量，它起作用了。 - Vahid

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'。

- Fernando Colom

---

你在哪里设置了 "settings": { "import/resolver": { "webpack": { "config": "webpack.dev.js" } } }？能否展示你的整个配置文件，这样我就可以看到在哪些部分放置插件和配置了？ - Tintinabulator Zea

Answer 2

如果您正在使用Laravel Mix，您可以将new webpack.DefinePlugin代码放入您的.webpackConfig块的plugins数组中：

webpack.mix.js:

mix
.webpackConfig({
    devtool: 'source-map',
    resolve: {
        alias: {
            'sass': path.resolve('resources/sass'),
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
        'window.Quill': 'quill',     // <--------------------- this right here
        __VERSION__: JSON.stringify('12345')
        })
    ]
})
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.copy([
    'resources/fonts/*',
], 'public/fonts');

通过外推，这意味着您也可以将此代码添加到常规（非 Laravel Mix）webpack 配置中的类似块中。

- Abraham Brookes

Answer 3

全局安装devtools

npm install -g @vue/devtools

...请重试。

如果您有任何问题，请尝试遵循官方说明。

- Max S.

Answer 4

{
 "parser": "babel-eslint",
 "extends": [
    "airbnb",
    "plugin:react/recommended",
    "prettier",
    "prettier/react"
 ],
 "plugins": ["react", "import", "prettier"],
 "env": {
   "browser": true
 },
 "settings": {
 "import/resolver": {
  "webpack": {
    "config": "webpack.dev.js"
   }
  }
 }
}

这是我的eslintrc文件。它用于使用在webpack配置中创建的模块别名进行绝对导入。您需要安装eslint-import-resolver-webpack。

- Fernando Colom

---

请再检查一下问题，是否涉及到eslint配置？ - Rantiev