6
votes

Comment inclure et utiliser DefinePlugin dans la configuration du pack Web?

Bonjour, j'essaie d'utiliser le plugin define afin de pouvoir mettre à jour le numéro de version pour m'assurer que mon JS s'actualise après la sortie d'une nouvelle version. Je n'arrive pas à faire fonctionner DefinePlugin correctement. Je le vois dans le dossier webpack et j'essaye de suivre la documentation mais j'obtiens des erreurs qu'il ne trouve pas. Voici ma configuration:

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

javascript npm webpack

0 commentaires

3 Réponses :

2
votes

J'ai "webpack": "^ 4.28.4" et je le définis dans la configuration du webpack

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

si vous console ces variables, vous ne les trouvez pas. J'utilise en conditionnel

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

Un autre cas est de définir des variables globales dans un objet et de les partager avec webpack.

voici un exemple

XXX

Dans le fichier eslintrc, vous pouvez ajouter ces variables pour éviter les erreurs d'importation.

if (PRODUCTION) {
 //do stuff
}

alors dans n'importe quel fichier, vous pouvez utiliser import {value} depuis 'CONFIG'

1 commentaires

où est-ce que vous définissez "settings": {"import / resolver": {"webpack": {"config": "webpack.dev.js"}}}? Pourriez-vous afficher votre fichier de configuration complet afin que je puisse voir sous quelles sections mettre le plugin et la configuration?

1
votes

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

0 commentaires

0
votes

Si vous utilisez laravel mix, vous pouvez placer ce nouveau code webpack.DefinePlugin dans le tableau plugins de votre bloc .webpackConfig :

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

Par extrapolation, cela signifie que vous pouvez également ajouter ce code au bloc similaire dans votre configuration webpack standard (pas de mélange laravel).

0 commentaires