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

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

Webpack s’appuie sur l’ interprétation en interne pour que cela fonctionne.

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 l'exécute 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, lorsque le paquet côté serveur est prêt, lancez le serveur d'application Node.js et, immédiatement 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 Static Boilerplate ( run.js , webpack.config.js , node run )
• Vous pourriez ne pas avoir besoin de Gulp.js

Une autre approche consiste à avoir un script npm comme celui-ci: "webpack": "babel-node ./node_modules/webpack/bin/webpack" , et l’exécuter ainsi: npm run webpack .

J’ai eu un problème pour faire fonctionner la solution @ Juho avec Webpack 2. Les documents de migration Webpack vous proposent de tourner l’parsing de module babel:

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

.babelrc:

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

Malheureusement, cela est en conflit avec la fonctionnalité de registre automatique de babel. Enlever

 { "modules": false } 

à partir de la configuration de babel, les choses ont repris. Cependant, cela résulterait en une rupture des arborescences. Une solution complète consisterait donc à remplacer les parameters prédéfinis 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 Webpack sur 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 pour moi, ce n’était pas évident dans aucune des réponses, donc si quelqu’un est confus comme moi:

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

Exemple:

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

Un autre moyen consiste à utiliser l’argument de l’exigence pour le noeud:

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

Trouvés de cette façon dans les réacteurs à électrons , examinez les scripts build-main et build-renderer .

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

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

Cependant, si vous voulez utiliser une configuration de babel différente pour babel-cli, votre fichier .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 les {"modules": false} vont casser webpack si vous n’utilisez pas d’autres envs.

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

Ma meilleure approche avec le script npm est

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

et configurer le rest des scripts selon vos besoins pour Babel

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

J’ai deux scripts que j’utilise pour pointer vers les configs webpack (fichiers JS) contenant 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"

C’est ce qui a fonctionné pour moi avec 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.

Note J’utilise webpack-serve –require , mais si vous voulez utiliser la commande webpack place, remplacez-la 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 la configuration!

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.js fonctionnera très bien.

Après des tonnes de documents …

1. Installez simplement es2015 preset (pas env !!!) et ajoutez-le à

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

2. Renommez votre webpack.config.js en webpack.config.babel.js