Come posso usare ES6 in webpack.config.js?

Come usare ES6 in webpack.config? Come questo repository https://github.com/kriasoft/react-starter-kit fa?

Per esempio:

usando questo

import webpack from 'webpack';

invece di

var webpack = require('webpack');

È piuttosto una curiosità piuttosto che un'esigenza.

Prova a nominare la tua configurazione come webpack.config.babel.js. Dovresti avere il registro delle babele incluso nel progetto. Esempio su React-router-bootstrap .

Webpack si affida a interpretare internamente per farlo funzionare.

In alternativa a quanto suggerisce @bebraw, è possibile creare uno script di automazione JavaScript con sintassi ES6 +:

// tools/bundle.js

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

const bundler = webpack(webpackConfig);

bundler.run(...);

Ed eseguilo con Babele:

$ babel-node tools/bundle

PS : La chiamata al webpack tramite l'API JavaScript potrebbe essere un approccio migliore (piuttosto che chiamandolo da una riga di comando) quando è necessario implementare passaggi di compilazione più complessi. Ad esempio, quando il bundle sul lato server è pronto, avviare il server app Node.js e subito dopo l'avvio del server Node.js, avviare il server di sviluppo BrowserSync.

Guarda anche:

• Reagire Starter Kit ( package.json/scripts, tools/bundle.js, tools/webpack.config.js)
• Reagire statico Boilerplate ( run.js, webpack.config.js, node run)
• Potrebbe non essere necessario Gulp.js

Un altro approccio è quello di avere uno script NPM come questo: "webpack": "babel-node ./node_modules/webpack/bin/webpack"ed eseguirlo in questo modo: npm run webpack.

Ho avuto un problema a far funzionare la soluzione di @ Juho con Webpack 2. I documenti di migrazione di Webpack suggeriscono di disattivare l'analisi del modulo babel:

È importante notare che vorrai dire a Babel di non analizzare questi simboli del modulo in modo che il webpack possa usarli. Puoi farlo impostando quanto segue nelle tue opzioni .babelrc o babel-loader.

.babelrc:

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

Purtroppo, questo è in conflitto con la funzionalità automatica del registro babel. Rimozione

{ "modules": false }

dalla configurazione della babele è tornato a funzionare. Tuttavia, ciò comporterebbe la rottura del tremolio dell'albero, quindi una soluzione completa implicherebbe la sovrascrittura dei preset nelle opzioni del caricatore :

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

Modifica , 13 nov 2017; frammento di configurazione webpack aggiornato a Webpack 3 (grazie a @ x-yuri). Vecchio, frammento di Webpack 2:

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

Questo è davvero facile, ma non è ovvio per me da nessuna delle risposte, quindi se qualcun altro è confuso come me:

Basta aggiungere .babelalla parte del tuo nome file prima dell'estensione (supponendo che tu abbia babel-registerinstallato come dipendenza).

Esempio:

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

Questo è ciò che ha funzionato per me utilizzando Webpack 4:

In 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"
  ]
}

Puoi vedere chiaramente come viene utilizzata ogni dipendenza, quindi nessuna sorpresa lì.

Nota Sto usando webpack-serve--require , ma se si desidera utilizzare webpackinvece il comando, sostituirlo con webpack --config-register. In entrambi i casi, @babel/registerè necessario per farlo funzionare.

E questo è tutto!

yarn dev

E sei in grado di utilizzare es6nella configurazione!

Per webpack-dev-server, usa l' --config-registeropzione che è la stessa del webpackcomando

NOTA:

Non è necessario rinominare il file di configurazione in webpack.config.babel.js(come suggerito dalla risposta accettata). webpack.config.jsfunzionerà bene.

Un altro modo è utilizzare l'argomento request per il nodo:

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

Trovato in questo modo in electron-reagire-boilerplate , guarda build-maine build-rendererscript.

Configurazione per Babel 7 e 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'
        },

Rinomina webpack.config.jsin webpack.config.babel.js.

Quindi in .babelrc: {"presets": ["es2015"]}

Tuttavia, se vuoi usare una configurazione babel diversa per babel-cli, il tuo .babelrc potrebbe assomigliare a questo:

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

E in 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",
    ...
  },
  ...
}

È stupido ma {"modules": false}si romperà il webpack se non si usano envs diversi.

Per maggiori informazioni su .babelrc, consulta i documenti ufficiali .

Per TypeScript : direttamente da 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

quindi procedi a scrivere il tuo, ad esempio: 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;

Controlla il link per maggiori dettagli in cui puoi usare un plugin per avere un file tsconfig separato solo per la configurazione del webpack se non stai prendendo di mira commonjs (che è un req per farlo funzionare poiché si basa su ts-node).

Non ho abbastanza rappresentante per commentare, ma volevo aggiungere per qualsiasi utente TypeScript una soluzione simile a @Sandrik sopra

Ho due script che uso puntando a configurazioni di webpack (file JS) che contengono la sintassi ES6.

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

e

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

Il mio approccio migliore insieme allo script npm è

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

e configura il resto degli script secondo i tuoi requisiti per Babele

Dopo tonnellate di documenti ...

1. Installa il preset es2015 (non env !!!) e aggiungilo a

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

2. Rinominare il webpack.config.jsawebpack.config.babel.js

Utilizzo di Webpack 4 e Babel 7

Per impostare un file di configurazione del webpack per utilizzare ES2015 è necessario Babel:

Installa le dipendenze degli sviluppatori:

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

Crea un .babelrcfile:

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

Crea il tuo 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;

Crea i tuoi script in package.json:

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

Corri npm run builde npm start.

La configurazione del webpack si basa su un progetto di esempio con la seguente struttura di directory:

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

Progetto di esempio: linguaggio di configurazione Webpack che utilizza Babel

L'aggiunta di es6 al webpack è un processo in 3 fasi

1. In webpack.config.js aggiungere

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

   2. Crea un .babel.rc e aggiungilo al suo interno

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

3. in package.json aggiungere

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

Non puoi. Devi convertirlo in CommonJS, con babelo esm.

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

Ma puoi scappare webpack -r esm @babel/register