web-dev-qa-db-fra.com

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 cette

import webpack from 'webpack';

au lieu de

var webpack = require('webpack');

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

webpack
192
Whisher

Essayez de nommer votre configuration sous le nom 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.

218
Juho Vepsäläinen

Au lieu de 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

P.S : L'appel de webpack via une 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. Une fois le paquet côté serveur prêt, démarrez le serveur d'applications Node.js et, immédiatement après le démarrage du serveur Node.js, lancez le serveur de développement BrowserSync.

Voir également:

37
Konstantin Tarkus

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

18
alexb

J'ai eu un problème à faire fonctionner la solution de @ Juho avec Webpack 2. Les documents de migration Webpack vous proposent 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é de registre automatique babel. Enlever

{ "modules": false }

de la config de babel a de nouveau fonctionné. Cependant, cela résulterait en une rupture d'arborescence, donc une solution complète impliquerait écrasant 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). Vieux, extrait de Webpack 2:

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

C’est très facile, mais cela n’a pas été évident pour moi, donc si quelqu'un est confus comme moi:

Ajoutez simplement .babel à la partie de votre nom de fichier située 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
11
Dmitry Minkovsky

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 clairement voir comment chaque dépendance est utilisée, donc pas de surprises.

Remarque J'utilise webpack-serve-- require , mais si vous souhaitez utiliser la commande webpack, 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!

Pour webpack-dev-server, utilisez l'option --config-register qui est identique à la commande webpack.

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

7
smac89

Une autre méthode consiste à utiliser l'argument require pour le noeud:

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

Présentée de cette façon dans electron-react-boilerplate , regardez les scripts build-main et build-renderer.

5
Dmitry Glinyanov

Configuration pour Babel 7 & 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'
        },
4
keemor

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 .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} va rompre le webpack si vous n'utilisez pas d'environnements différents.

Pour plus d'informations sur .babelrc, consultez le documentation officielle .

3
Peter Tseng

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

1
Farhan Ansari

Après des tonnes de documents ...

  1. Il suffit d'installer le préréglage es2015 (pas env !!!) et de l'ajouter à

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

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

1
andrew I.

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

J'utilise deux scripts pointant vers des configurations 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"

1
Dylan Stewart

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 continuez pour é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 config webpack si vous ne ciblez pas commonjs (ce qui est un req pour que cela fonctionne car il repose sur ts-node).

0
Mark Zhukovsky

Utiliser Webpack 4 et Babel 7

Pour configurer un fichier de configuration WebPack en vue d'utiliser ES2015, Babel a besoin:

Installez 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 fichier .babelrc:

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

Créez votre configuration 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 build et npm start.

La configuration 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

0
stormwild