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.
which webpack
"Antworten:
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.
quelle
npm run
dieses Skript :webpack --config webpack.config.babel.js
.--config
.babel-loader
Modul auch benötigt wirdecho '{ "presets": ["es2015"] }' > .babelrc
Alternativ zu den Vorschlägen von @bebraw können Sie ein JavaScript-Automatisierungsskript mit ES6 + -Syntax erstellen:
Und führe es mit babel aus:
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:
package.json/scripts
,tools/bundle.js
,tools/webpack.config.js
)run.js
,webpack.config.js
,node run
)quelle
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
.quelle
babel-node ./node_modules/webpack/bin/webpack --config custom-webpack.config
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:
Leider widerspricht dies der automatischen Babel-Register-Funktionalität. Entfernen
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 :
Bearbeiten , 13. November 2017; aktualisiertes Webpack-Konfigurations-Snippet auf Webpack 3 (dank @ x-yuri). Altes Webpack 2-Snippet:
quelle
module:{rules: [{test: /\.js$/, include: path.resolve('src'), loader: 'babel-loader', options: {babelrc: false, presets: [['env', {modules: false}]]}}]}
( Kern ).-loader
Suffix nicht mehr optional. Versuche es zu vermeidenexclude
und zu bevorzugeninclude
. Zeichenfolgen in Einschluss / Ausschluss funktionieren nur bei absoluten Pfaden.query
wurde umbenannt inoptions
.{modules: false}
in.babelrc
der Lage sein möchtenimport
, s in zu verwendenwebpack.config.babel.js
.-loader
Suffix zurück hinzugefügt werden. Webpack.js.org/migrate/3/…Das ist wirklich einfach, aber aus keiner der Antworten war es mir ersichtlich. Wenn also jemand wie ich verwirrt ist:
Fügen Sie einfach
.babel
den Teil Ihres Dateinamens vor der Erweiterung hinzu (vorausgesetzt, Sie habenbabel-register
als Abhängigkeit installiert).Beispiel:
quelle
require
. Das ist komisch, nicht wahr?Dies hat bei mir mit Webpack 4 funktioniert:
In
package.json
:Sie können deutlich sehen, wie jede Abhängigkeit verwendet wird, also keine Überraschungen.
Hinweis Ich verwende
webpack-serve
--require , aber wenn Siewebpack
stattdessen den Befehl verwenden möchten , ersetzen Sie ihn durchwebpack --config-register
. In beiden Fällen,@babel/register
ist dies erforderlich, damit dies funktioniert.Und das ist es!
yarn dev
Und Sie können
es6
in der Konfiguration verwenden!Für
webpack-dev-server
die Verwendung--config-register
Option , die die gleichen wie bei dem istwebpack
BefehlHINWEIS:
KEINE Notwendigkeit, die Konfigurationsdatei in umzubenennen
webpack.config.babel.js
(wie in der akzeptierten Antwort vorgeschlagen).webpack.config.js
wird gut funktionieren.quelle
--config-register
Option. Auch das Repo fürwebpack-serve
hierher gezogen: github.com/shellscape/webpack-servewebpack --config-register @babel/register --config webpack/development.config.js
Ich musste --config angeben, da sich meine Webpack-Konfiguration in einem Ordner befindet. Danke dir!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-main
undbuild-renderer
Skripte.quelle
Konfiguration für Babel 7 & Webpack 4
package.json
.babelrc
webpack.config.babel.js
quelle
Umbenennen
webpack.config.js
inwebpack.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:
Und in package.json:
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 .
quelle
Für TypeScript : direkt von https://webpack.js.org/configuration/configuration-languages/
Schreiben Sie dann Ihre, z. B.: webpack.config.ts
Ü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).
quelle
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"
quelle
Mein bester Ansatz zusammen mit dem npm-Skript ist
und konfigurieren Sie die restlichen Skripte gemäß Ihren Anforderungen für Babel
quelle
Nach Tonnen von Dokumenten ...
Installieren Sie einfach die Voreinstellung es2015 (nicht env !!!) und fügen Sie sie hinzu
Benennen Sie Ihre
webpack.config.js
in umwebpack.config.babel.js
quelle
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:
Erstellen Sie eine
.babelrc
Datei:Erstellen Sie Ihre Webpack-Konfiguration
webpack.config.babel.js
:Erstellen Sie Ihre Skripte in
package.json
:Führen Sie
npm run build
undnpm start
.Die Webpack-Konfiguration basiert auf einem Beispielprojekt mit der folgenden Verzeichnisstruktur:
Beispielprojekt: Webpack-Konfigurationssprache mit Babel
quelle
Das Hinzufügen von es6 zum Webpack erfolgt in drei Schritten
In webpack.config.js hinzufügen
quelle