Wie kann ich ES6 in webpack.config.js verwenden?

Wie verwende ich ES6 in webpack.config? Gefällt dir dieses Repo https://github.com/kriasoft/react-starter-kit ?

Zum Beispiel:

mit diesem

import webpack from 'webpack';

anstatt

var webpack = require('webpack');

Es ist eher eine Kuriosität als ein Bedürfnis.

Versuchen Sie, Ihre Konfiguration als zu benennen webpack.config.babel.js. Sie sollten ein Babel-Register im Projekt haben. Beispiel bei React-Router-Bootstrap .

Webpack ist auf interne Interpretation angewiesen , damit dies funktioniert.

Alternativ zu den Vorschlägen von @bebraw können Sie ein JavaScript-Automatisierungsskript mit ES6 + -Syntax erstellen:

// tools/bundle.js

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

const bundler = webpack(webpackConfig);

bundler.run(...);

Und führe es mit babel aus:

$ babel-node tools/bundle

PS : Das Aufrufen von Webpack über die JavaScript-API ist möglicherweise ein besserer Ansatz (als das Aufrufen über eine Befehlszeile), wenn Sie komplexere Erstellungsschritte implementieren müssen. Starten Sie beispielsweise nach dem Bereitstellen des serverseitigen Bundles den Node.js-App-Server und starten Sie den BrowserSync-Dev-Server direkt nach dem Start des Node.js-Servers.

Siehe auch:

• Reagieren Starter Kit ( package.json/scripts, tools/bundle.js, tools/webpack.config.js)
• Reagieren Static Boiler ( run.js, webpack.config.js, node run)
• Möglicherweise benötigen Sie Gulp.js nicht

Ein anderer Ansatz besteht darin, ein npm-Skript wie das folgende zu haben: "webpack": "babel-node ./node_modules/webpack/bin/webpack"und es wie folgt auszuführen : npm run webpack.

Ich hatte ein Problem damit, die Lösung von @ Juho mit Webpack 2 zum Laufen zu bringen. In den Webpack-Migrationsdokumenten wird empfohlen, die Analyse von Babel-Modulen zu deaktivieren:

Es ist wichtig zu beachten, dass Sie Babel anweisen möchten, diese Modulsymbole nicht zu analysieren, damit das Webpack sie verwenden kann. Sie können dies tun, indem Sie in den Optionen .babelrc oder babel-loader Folgendes festlegen.

.babelrc:

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

Leider widerspricht dies der automatischen Babel-Register-Funktionalität. Entfernen

{ "modules": false }

Von der Babel-Konfiguration aus lief es wieder. Dies würde jedoch dazu führen, dass das Baumschütteln unterbrochen wird. Eine vollständige Lösung würde das Überschreiben der Voreinstellungen in den Ladeoptionen beinhalten :

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

Bearbeiten , 13. November 2017; aktualisiertes Webpack-Konfigurations-Snippet auf Webpack 3 (dank @ x-yuri). Altes Webpack 2-Snippet:

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

Das ist wirklich einfach, aber aus keiner der Antworten war es mir ersichtlich. Wenn also jemand wie ich verwirrt ist:

Fügen Sie einfach .babelden Teil Ihres Dateinamens vor der Erweiterung hinzu (vorausgesetzt, Sie habenbabel-register als Abhängigkeit installiert).

Beispiel:

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

Dies hat bei mir mit Webpack 4 funktioniert:

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

Sie können deutlich sehen, wie jede Abhängigkeit verwendet wird, also keine Überraschungen.

Hinweis Ich verwende webpack-serve--require , aber wenn Sie webpackstattdessen den Befehl verwenden möchten , ersetzen Sie ihn durch webpack --config-register. In beiden Fällen,@babel/register ist dies erforderlich, damit dies funktioniert.

Und das ist es!

yarn dev

Und Sie können es6in der Konfiguration verwenden!

Für webpack-dev-serverdie Verwendung --config-registerOption , die die gleichen wie bei dem ist webpackBefehl

HINWEIS:

KEINE Notwendigkeit, die Konfigurationsdatei in umzubenennen webpack.config.babel.js(wie in der akzeptierten Antwort vorgeschlagen). webpack.config.jswird gut funktionieren.

Eine weitere Möglichkeit besteht darin, das Argument require für node zu verwenden:

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

Gefunden auf diese Weise in Elektron-React-Boilerplate , Blick build-mainund build-rendererSkripte.

Konfiguration für 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'
        },

Umbenennen webpack.config.jsin webpack.config.babel.js.

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

Wenn Sie jedoch eine andere babel-Konfiguration für babel-cli verwenden möchten, sieht Ihre .babelrc möglicherweise folgendermaßen aus:

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

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

Es ist dumm, aber das {"modules": false}Webpack wird kaputt gehen, wenn Sie keine anderen Envs verwenden.

Weitere Informationen zu .babelrc finden Sie in den offiziellen Dokumenten .

Für TypeScript : direkt von 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

Schreiben Sie dann Ihre, z. B.: 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;

Überprüfen Sie den Link für weitere Details, wo Sie ein Plugin verwenden können, um eine separate tsconfig-Datei nur für die Webpack-Konfiguration zu haben, wenn Sie nicht auf commonjs abzielen (dies ist eine Voraussetzung dafür, dass dies funktioniert, da es auf ts-node basiert).

Ich habe nicht genug Repräsentanten, um Kommentare abzugeben, aber ich wollte für alle TypeScript-Benutzer eine ähnliche Lösung wie oben für @Sandrik hinzufügen

Ich habe zwei Skripte, die auf Webpack-Konfigurationen (JS-Dateien) verweisen, die ES6-Syntax enthalten.

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

und

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

Mein bester Ansatz zusammen mit dem npm-Skript ist

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

und konfigurieren Sie die restlichen Skripte gemäß Ihren Anforderungen für Babel

Nach Tonnen von Dokumenten ...

1. Installieren Sie einfach die Voreinstellung es2015 (nicht env !!!) und fügen Sie sie hinzu

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

2. Benennen Sie Ihre webpack.config.jsin umwebpack.config.babel.js

Verwenden von Webpack 4 und Babel 7

Zum Einrichten einer Webpack-Konfigurationsdatei für die Verwendung von ES2015 ist Babel erforderlich:

Installieren Sie Entwicklungsabhängigkeiten:

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

Erstellen Sie eine .babelrcDatei:

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

Erstellen Sie Ihre Webpack-Konfiguration 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;

Erstellen Sie Ihre Skripte in package.json:

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

Führen Sie npm run buildund npm start.

Die Webpack-Konfiguration basiert auf einem Beispielprojekt mit der folgenden Verzeichnisstruktur:

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

Beispielprojekt: Webpack-Konfigurationssprache mit Babel

Das Hinzufügen von es6 zum Webpack erfolgt in drei Schritten

1. In webpack.config.js hinzufügen

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

   2. Erstellen Sie eine .babel.rc und fügen Sie sie hinzu

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

3. in package.json hinzufügen

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