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


210

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.


@Amit, c'est une question. Je ne peux pas comprendre. Parce que si j'utilise la syntaxe es6 dans webpack.config, j'obtiens des erreurs.
Whisher

21
La question est de savoir comment utiliser es6 dans webpack.config.Il me semble clair.Je mets à jour ma question avec un exemple.
Whisher

1
Le fichier est analysé par node.js, qui ne prend pas en charge es6 par défaut. Il existe des drapeaux de ligne de commande pour activer cela, mais je ne sais pas ce qu'ils sont. Vous pouvez également essayer d'utiliser io.js au lieu de node
KJ Tsanaktsidis

@KJTsanaktsidis merci pour l'astuce mais j'ai aussi essayé avec --harmony sans succès
Whisher

Je n'ai pas essayé cela, mais essayez d'exécuter "node --harmony which webpack"
KJ Tsanaktsidis

Réponses:


230

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.


4
Cela a fonctionné pour moi. Je npm runce script: webpack --config webpack.config.babel.js.
Mat Gessel

9
Je pense qu'il pourrait être en mesure de le récupérer directement, même sans --config.
Juho Vepsäläinen

4
Je pense qu'il convient d'ajouter que le babel-loadermodule est également requis
paperboard

7
En fait, cela fonctionne bien, il suffit de définir vos préréglages babel dans un fichier .babelrc.
peter

10
J'ai utilisé ce préréglage spécifique pour que cela fonctionne:echo '{ "presets": ["es2015"] }' > .babelrc
killthrush

39

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:


2
Bien qu'un peu complexe, c'est exactement ce que le kit de démarrage React utilise. Ce devrait être la meilleure réponse.
darkbaby123

20

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.


Cela ne semble pas fonctionner lors du passage d'une configuration personnalisée à webpack babel-node ./node_modules/webpack/bin/webpack --config custom-webpack.config
Abhinav Singi

16

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 }],
        ],
    },
},

2
De nos jours (Webpack 3), cela ressemblerait probablement à ceci: module:{rules: [{test: /\.js$/, include: path.resolve('src'), loader: 'babel-loader', options: {babelrc: false, presets: [['env', {modules: false}]]}}]}( gist ). -loaderle suffixe n'est plus facultatif. Essayez d'éviter excludeet préférez include. Les chaînes incluses / exclues ne fonctionnent que si les chemins absolus. querya été renommé en options.
x-yuri

Veuillez également indiquer clairement que vous ne voulez pas que {modules: false}in .babelrcpuisse utiliser import's in webpack.config.babel.js.
x-yuri

Pour Webpack 4, le -loadersuffixe doit être ajouté à nouveau webpack.js.org/migrate/3/…
kmmbvnr

12

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

1
Je n'utilise pas babel car webpack lui-même prend déjà en charge la syntaxe du module ES6, et mon projet n'a pas besoin d'être compatible avec ES5. C'est juste le fichier de configuration qui a encore besoin require. C'est bizarre non?
Kokodoko

Woah c'est intéressant! Je ne le savais pas. Je vais devoir revoir cela. Bizarre que le fichier de configuration nécessite toujours
Dmitry Minkovsky

11

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.


Il semble que le service Web soit obsolète. Une idée de comment faire fonctionner cela avec webpack-dev-server? Je ne vois pas d'option --require pour cela dans les documents: webpack.js.org/configuration/dev-server/#devserver
Crhistian Ramirez

1
@CrhistianRamirez, utilisez l' --config-registeroption. Aussi le dépôt pour webpack-servedéplacé ici: github.com/shellscape/webpack-serve
smac89

1
Cool! cela a fonctionné pour moi. Voici à quoi ressemble mon script: webpack --config-register @babel/register --config webpack/development.config.jsj'ai dû spécifier --config car ma configuration webpack se trouve dans un dossier. Je vous remercie!
Crhistian Ramirez

6

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.


Spectacular - regardait juste Electron et démarrait un serveur séparé, votre réponse a parfaitement aidé! :)
Matt

6

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

Cela ne fonctionne toujours pas pour moi, mais IMHO semble être l'exemple le plus à jour et le plus propre (les entrées liées aux propriétés de classe sont superflues pour la tâche à accomplir).
rawpower

4

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 .


4

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).


Merci pour cela, impossible de faire fonctionner les modules pour webpack.config.js mais heureux d'utiliser plutôt TypeScript qui fonctionne.
Paul Watson, le

3

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"


2

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


2

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


2

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


2

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'
                }
              ]
           }
    
    1. Créez un .babel.rc et ajoutez-le à l'intérieur
{
    "presets": ["@babel/env", "@babel/react"],
    "plugins": [
        [
          "@babel/plugin-proposal-class-properties",
        ]
      ]
}
  1. 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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.