Comment puis-je utiliser ES6 dans webpack.config.js?

Comment utiliser ES6 dans webpack.config? Comme ce repo https://github.com/kriasoft/react-starter-kit fait?

Par exemple:

en utilisant cela

import webpack from 'webpack';

au lieu de

var webpack = require('webpack');

C'est plutôt une curiosité qu'un besoin.

Essayez de nommer votre configuration comme webpack.config.babel.js. Vous devriez avoir babel-register inclus dans le projet. Exemple sur react-router-bootstrap .

Webpack s'appuie sur interpréter en interne pour que cela fonctionne.

Comme alternative à ce que suggère @bebraw, vous pouvez créer un script d'automatisation JavaScript avec la syntaxe ES6 +:

// tools/bundle.js

import webpack from 'webpack';
import webpackConfig from './webpack.config.js'; // <-- Contains ES6+

const bundler = webpack(webpackConfig);

bundler.run(...);

Et exécutez-le avec babel:

$ babel-node tools/bundle

PS : L'appel de webpack via l'API JavaScript peut être une meilleure approche (qu'en l'appelant via une ligne de commande) lorsque vous devez implémenter des étapes de construction plus complexes. Par exemple, une fois que le bundle côté serveur est prêt, démarrez le serveur d'application Node.js et juste après le démarrage du serveur Node.js, lancez le serveur de développement BrowserSync.

Voir également:

• React Starter Kit ( package.json/scripts, tools/bundle.js, tools/webpack.config.js)
• React statique boilerplate ( run.js, webpack.config.js, node run)
• Vous pourriez ne pas avoir besoin de Gulp.js

Une autre approche est d'avoir un script NPM comme ceci: "webpack": "babel-node ./node_modules/webpack/bin/webpack"et l' exécuter comme ceci: npm run webpack.

J'ai rencontré un problème lors de l'exécution de la solution de @ Juho avec Webpack 2. Les documents de migration de Webpack vous suggèrent de désactiver l'analyse du module babel:

Il est important de noter que vous voudrez dire à Babel de ne pas analyser ces symboles de module afin que webpack puisse les utiliser. Vous pouvez le faire en définissant ce qui suit dans vos options .babelrc ou babel-loader.

.babelrc:

{
    "presets": [
         ["es2015", { "modules": false }]
    ]
}

Malheureusement, cela entre en conflit avec la fonctionnalité d'enregistrement automatique de babel. Suppression

{ "modules": false }

de la config babel a remis les choses en marche. Cependant, cela entraînerait la rupture de l'arborescence, donc une solution complète impliquerait d' écraser les préréglages dans les options du chargeur :

module: {
    rules: [
        {
            test: /\.js$/,
            include: path.resolve('src'),
            loader: 'babel-loader',
            options: {
                babelrc: false,
                presets: [['env', {modules: false}]]
            }
        }
    ]
}

Edit , 13 novembre 2017; mise à jour de l'extrait de configuration de webpack vers Webpack 3 (merci à @ x-yuri). Ancien extrait de Webpack 2:

{
    test: /\.js$/,
    exclude: ['node_modules'],
    loader: 'babel',
    query: {
        babelrc: false,
        presets: [
            ['es2015', { modules: false }],
        ],
    },
},

C'est vraiment facile, mais ce n'était pas évident pour moi à partir de l'une des réponses, donc si quelqu'un d'autre est confus comme moi:

Ajoutez simplement .babella partie de votre nom de fichier avant l'extension (en supposant que vous avez babel-registerinstallé en tant que dépendance).

Exemple:

mv webpack.config.js webpack.config.babel.js

C'est ce qui a fonctionné pour moi en utilisant le webpack 4:

Dans package.json:

"scripts": {
    "dev": "cross-env APP_ENV=dev webpack-serve --require @babel/register"
},

"devDependencies": {
    "@babel/core": "^7.0.0-rc.1",
    "@babel/register": "^7.0.0-rc.1",
    "@babel/preset-env": "^7.0.0-rc.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2"
},

"babel": {
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "node": "current"
      }
    }]
  ],
  "plugins": [
    "transform-es2015-modules-commonjs"
  ]
}

Vous pouvez voir clairement comment chaque dépendance est utilisée, donc pas de surprise là-bas.

Remarque J'utilise webpack-serve--require , mais si vous souhaitez utiliser la webpackcommande à la place, remplacez-la par webpack --config-register. Dans les deux cas, @babel/registerest nécessaire pour que cela fonctionne.

Et c'est tout!

yarn dev

Et vous pouvez l'utiliser es6dans la config!

Pour webpack-dev-server, utilisez l' --config-registeroption qui est la même qu'avec la webpackcommande

REMARQUE:

PAS besoin de renommer le fichier de configuration en webpack.config.babel.js(comme suggéré par la réponse acceptée). webpack.config.jsfonctionnera très bien.

Une autre façon consiste à utiliser l'argument require pour le nœud:

node -r babel-register ./node_modules/webpack/bin/webpack

Trouvé de cette façon dans la plaque de réaction électronique , regardez build-mainet build-rendererscripts.

Configuration pour Babel 7 et Webpack 4

package.json

    ...
    "scripts": {
        "start": "webpack-dev-server --env.dev",
        "build": "webpack --env.prod",
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.0.0",
        "@babel/plugin-proposal-class-properties": "^7.0.0",
        "@babel/preset-env": "^7.0.0",
        "@babel/preset-react": "^7.0.0",
        "@babel/register": "^7.0.0",
        "babel-loader": "^8.0.0",
        ...
        "webpack": "^4.17.2",
        "webpack-cli": "^3.1.0",
        "webpack-config-utils": "^2.3.1",
        "webpack-dev-server": "^3.1.8"

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

webpack.config.babel.js

import webpack from 'webpack';
import { resolve } from 'path';

import { getIfUtils, removeEmpty } from 'webpack-config-utils';

export default env => {
    const { ifProd, ifNotProd } = getIfUtils(env);

    return {
        mode: ifProd('production', 'development'),
        devtool: ifNotProd('cheap-module-source-map'),
        output: {
            path: resolve(__dirname, ifProd('prod', 'dev')),
            filename: 'bundle.js'
        },

Renommer webpack.config.jspour webpack.config.babel.js.

Puis en .babelrc: {"presets": ["es2015"]}

Cependant, si vous souhaitez utiliser une configuration babel différente pour babel-cli, votre .babelrc pourrait ressembler à ceci:

{
  "env": {
    "babel-cli": {
      "presets": [["es2015", {"modules": false}]]
    },
    "production": {
      "presets": ["es2015"]
    },
    "development": {
      "presets": ["es2015"]
    }
  }
}

Et dans package.json:

{
  "scripts": {
    "babel": "BABEL_ENV='babel-cli' babel src -d dist/babel --source-maps",
    "build-dev": "NODE_ENV='development' webpack -d --progress --profile --colors",
    ...
  },
  ...
}

C'est idiot mais le {"modules": false}webpack se cassera si vous n'utilisez pas différents envs.

Pour plus d'informations sur .babelrc, consultez les documents officiels .

Pour TypeScript : directement depuis https://webpack.js.org/configuration/configuration-languages/

npm install --save-dev typescript ts-node @types/node @types/webpack
# and, if using webpack-dev-server
npm install --save-dev @types/webpack-dev-server

puis passez à écrire votre, par exemple: webpack.config.ts

import path from 'path';
import webpack from 'webpack';

const config: webpack.Configuration = {
  mode: 'production',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js'
  }
};

export default config;

Vérifiez le lien pour plus de détails où vous pouvez utiliser un plugin pour avoir un fichier tsconfig séparé juste pour la configuration du webpack si vous ne ciblez pas commonjs (ce qui est une exigence pour que cela fonctionne car il repose sur ts-node).

Je n'ai pas assez de représentants pour commenter, mais je voulais ajouter pour tous les utilisateurs de TypeScript une solution similaire à @Sandrik ci-dessus

J'ai deux scripts que j'utilise pointant vers des configurations webpack (fichiers JS) qui contiennent la syntaxe ES6.

"start-dev": "./node_modules/.bin/ts-node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack/webpack.config.dev.js"

et

"build": "./node_modules/.bin/ts-node ./node_modules/webpack/bin/webpack.js --config webpack/webpack.config.js"

Ma meilleure approche avec le script npm est

node -r babel-register ./node_modules/webpack/bin/webpack

et configurer le reste des scripts selon vos besoins pour Babel

Après des tonnes de documents ...

1. Installez simplement le préréglage es2015 (pas env !!!) et ajoutez-le à

   .babelrc:
   {
       "presets": [
            ["es2015", { "modules": false }]
       ]
   }
   

2. Renommez webpack.config.jsàwebpack.config.babel.js

Utilisation de Webpack 4 et Babel 7

Pour configurer un fichier de configuration de webpack pour utiliser ES2015, Babel nécessite:

Installer les dépendances dev:

npm i -D  webpack \
          webpack-cli \
          webpack-dev-server \
          @babel/core \
          @babel/register \
          @babel/preset-env
npm i -D  html-webpack-plugin

Créez un .babelrcfichier:

{
  "presets": ["@babel/preset-env"]
}

Créez votre config webpack, webpack.config.babel.js:

import { resolve as _resolve } from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';

const config = {
  mode: 'development',
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'src/index.html'
    })
  ],
  resolve: {
    modules: [_resolve(__dirname, './src'), 'node_modules']
  }
};

export default config;

Créez vos scripts dans package.json:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },

Exécutez npm run buildet npm start.

La configuration du webpack est basée sur un exemple de projet avec la structure de répertoires suivante:

├── README.md
├── package-lock.json
├── package.json
├── src
│   ├── Greeter.js
│   ├── index.html
│   └── index.js
└── webpack.config.babel.js

Exemple de projet: Langage de configuration Webpack utilisant Babel

L'ajout d'es6 au webpack est un processus en 3 étapes

1. Dans webpack.config.js, ajoutez

   module:{
   
             rules:[
               {
                 test: /\.js$/,
                 loader: 'babel-loader'
               }
             ]
          }
   

   2. Créez un .babel.rc et ajoutez-le à l'intérieur

{
    "presets": ["@babel/env", "@babel/react"],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
        ]
      ]
}

3. dans package.json add

npm install @babel/core --save-dev
npm install @babel/preset-env --save-dev
npm install @babel/preset-react --save-dev
npm install @babel/plugin-proposal-class-properties --save-dev
npm install babel-loader --save-dev

Tu ne peux pas. Vous devez le convertir en CommonJS, soit avec babelou esm.

https://github.com/webpack/webpack-cli/issues/282

Mais tu peux courir webpack -r esm @babel/register