Как включить и использовать 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'
}

Answer 1

{
 "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. Это для абсолютного импорта, созданного в вашей конфигурации веб-пакета с псевдонимом модулей. Вам необходимо установить eslint-import-resolver-webpack

Answer 2

У меня есть «webpack»: «^ 4.28.4» и определите в конфигурации webpack

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

, если вы поддерживаете эти переменные, вы его не найдете.Я использую в условных

if (PRODUCTION) {
 //do stuff
}

Другой случай - установить глобальные переменные в объекте и поделиться с веб-пакетом.

вот пример

        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} из 'CONFIG'