How to include and use DefinePlugin in webpack config?

If you are using laravel mix, you can place that new webpack.DefinePlugin code into the plugins array of your .webpackConfig block:

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');

By extrapolation, that means you can also add this code to the similar block in your regular (not laravel mix) webpack config.

{
 "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"
   }
  }
 }
}

That's my eslintrc. This is for use absolute imports created in your webpack config with the modules alias. You need to install eslint-import-resolver-webpack

I Have "webpack": "^4.28.4" and define in webpack config

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

if you console that variables, you don't find it. I use in conditional

if (PRODUCTION) {
 //do stuff
}

Another case is to set globals variables in a object and share with webpack.

here is an example

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

In the eslintrc file you can add that variables to avoid import errors.

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

then in any file you can use import {value} from 'CONFIG'