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

Comme alternative à ce que @ bebraw suggère, 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: appeler webpack via L'API JavaScript peut être une meilleure approche (que de l'appeler via une ligne de commande) lorsque vous devez implémenter des étapes de construction plus complexes. Par exemple, après que le bundle côté serveur est prêt, noeud de démarrage.serveur d'applications js, et juste après le nœud.le serveur js est démarré, Lancez BrowserSync dev serveur.

Voir aussi:

• Réagir Starter Kit (package.json/scripts, tools/bundle.js, tools/webpack.config.js)
• Réagir Statique Standard (run.js, webpack.config.js, node run)
• vous pourriez ne pas avoir besoin de Gulp.js

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

J'ai eu un problème à faire fonctionner la solution de @Juho avec Webpack 2. Les documents de migration Webpack vous suggèrent de tourner 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 par définir ce qui suit dans votre .options babelrc ou babel-loader.

.babelrc:

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

Malheureusement, cela est en conflit avec la fonctionnalité de Registre automatique babel. Supprimer

{ "modules": false }

De la configuration de babel a fait fonctionner les choses à nouveau. Cependant, cela entraînerait la rupture de l'arborescence, donc une solution complète impliquerait é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; extrait de configuration webpack mis à jour vers Webpack 3 (grâce à @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 il n'était pas évident pour moi de toute les réponses, donc si quelqu'un d'autre est confus comme moi: -

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

Exemple:

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

Une autre façon est d'utiliser l'argument require pour le noeud:

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

Trouvé cette façon de électrons réagissent-standard, regardez build-main et build-renderer scripts.

Renommez webpack.config.js en webpack.config.babel.js.

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

Cependant, si vous voulez 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 le paquet.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 stupide mais le {"modules": false} va casser webpack si vous n'utilisez pas d'envs différents.

Pour plus d'informations sur .babelrc, vérifiez les documents officiels .

C'est ce qui a fonctionné pour moi en utilisant 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 surprises là-bas.

Remarque, je suis en utilisant webpack-serve--exiger, mais si vous souhaitez utiliser le webpack commande au lieu de cela, le remplacer par webpack --config-register. Dans les deux cas, @babel/register est nécessaire pour que cela fonctionne.

Et c'est tout!

yarn dev

Et vous pouvez utiliser es6 dans le config!

REMARQUE:

Pas besoin de renommer le fichier de configuration en webpack.config.babel.js (comme suggéré par la réponse acceptée). {[9] } fonctionnera très bien.

Ma meilleure approche avec le script npm est

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

Et configurez le reste des scripts selon vos besoins pour Babel

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

J'ai deux scripts que j'utilise pointant vers webpack configs (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"

Après des tonnes de documents...

1. Il suffit d'installer ES2015 preset (pas env !!!) et ajoutez-le à

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

2. Renommer votre webpack.config.js pour webpack.config.babel.js

Configuration pour Babel 7 & Webpack 4

Paquet.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'
        },