Как использовать ES6 в webpack.config? Подобно этому репо https://github.com/kriasoft/react-starter-kit делает?
Например:
используя этот
import webpack from 'webpack';
вместо
var webpack = require('webpack');
Это скорее любопытство, чем необходимость.
Попробуйте присвоить свой конфиг как webpack.config.babel.js. Вы должны иметь babel-register, включенный в проект. Пример react-router-bootstrap.
Webpack полагается на interpret внутренне, чтобы сделать эту работу.
В качестве альтернативы тому, что предлагает @bebraw, вы можете создать автоматизацию JavaScript script с синтаксисом ES6 +:
// tools/bundle.js
import webpack from 'webpack';
import webpackConfig from './webpack.config.js'; // <-- Contains ES6+
const bundler = webpack(webpackConfig);
bundler.run(...);
И выполните его с babel:
$ babel-node tools/bundle
P.S.. Вызов webpack через JavaScript API может быть лучшим подходом (чем вызывать его через командную строку), когда вам нужно реализовать более сложные шаги сборки. Например. после того, как серверный пакет готов, запускает сервер приложений Node.js, а сразу после запуска сервера Node.js запустите сервер BrowserSync dev.
package.json/scripts, tools/bundle.js, tools/webpack.config.js)run.js, webpack.config.js, node run)Другой подход состоит в том, чтобы иметь npm script следующим образом: "webpack": "babel-node ./node_modules/webpack/bin/webpack" и запустить его следующим образом: npm run webpack.
У меня возникла проблема с запуском решения @Juho с Webpack 2. Документы по миграции Webpack предлагают вам отказаться от разбора модуля babel:
Важно отметить, что вы захотите сказать Babel не анализировать эти символы модуля, чтобы веб-пакет мог их использовать. Вы можете сделать это, установив следующее в опциях .babelrc или babel-loader.
.babelrc:
{
"presets": [
["es2015", { "modules": false }]
]
}
К сожалению, это вступает в противоречие с функциональностью автоматического регистра Babel. Удаление
{ "modules": false }
из вавилонского конфига опять все заработало. Тем не менее, это может привести к прерыванию тряски дерева, поэтому полное решение будет включать перезапись предустановок в параметрах загрузчика:
module: {
rules: [
{
test: /\.js$/,
include: path.resolve('src'),
loader: 'babel-loader',
options: {
babelrc: false,
presets: [['env', {modules: false}]]
}
}
]
}
Редактировать, 13 ноября 2017 года; обновлен фрагмент конфигурации webpack до Webpack 3 (спасибо @x-yuri). Старый фрагмент Webpack 2:
{
test: /\.js$/,
exclude: ['node_modules'],
loader: 'babel',
query: {
babelrc: false,
presets: [
['es2015', { modules: false }],
],
},
},
Это действительно легко, но это не было очевидно для меня из любого ответа, поэтому, если кто-то еще смущен, как я:
Просто добавьте .babel к части вашего имени файла перед расширением (при условии, что у вас babel-register установлен как зависимость).
Пример:
mv webpack.config.js webpack.config.babel.js
Это то, что работает для меня, используя веб-пакет 4.
В 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"
]
}
Вы можете четко видеть, как используется каждая зависимость, поэтому никаких сюрпризов нет.
Примечание. Я использую webpack-serve --require, но если вы хотите использовать вместо webpack команду webpack, замените ее на webpack --config-register. В любом случае, @babel/register необходима для этой работы.
И это оно!
yarn dev
И вы можете использовать es6 в конфиге!
Для webpack-dev-server используйте опцию --config-register которая такая же, как с командой webpack
НЕТ необходимости переименовывать файл конфигурации в webpack.config.babel.js (в соответствии с принятым ответом). webpack.config.js будет работать нормально.
Еще один способ - использовать аргумент require для узла:
node -r babel-register./node_modules/webpack/bin/webpack
Найденный таким образом в электронном -r eact-шаблоне, посмотрите на build-main и build-renderer сценарии.
Конфигурация для 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'
},
Переименуйте webpack.config.js в webpack.config.babel.js.
Затем в .babelrc: {"presets": ["es2015"]}
Однако, если вы хотите использовать другую конфигурацию babel для babel-cli, ваш .babelrc может выглядеть примерно так:
{
"env": {
"babel-cli": {
"presets": [["es2015", {"modules": false}]]
},
"production": {
"presets": ["es2015"]
},
"development": {
"presets": ["es2015"]
}
}
}
И в 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",
...
},
...
}
Немой, но {"modules": false} сломает webpack, если вы не используете разные envs.
Для получения дополнительной информации о .babelrc, проверьте официальные документы .
Мой лучший подход наряду с npm script -
node -r babel-register ./node_modules/webpack/bin/webpack
и настройте остальные сценарии согласно вашему требованию Babel
Не хватает комментариев для комментариев, но я хотел добавить для любых пользователей TypeScript там аналогичное решение для @Sandrik выше
У меня есть два сценария, которые я использую, указывающие на конфигурацию webpack (JS файлы), которые содержат синтаксис ES6.
"start-dev": "./node_modules/.bin/ts-node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack/webpack.config.dev.js"
и
"build": "./node_modules/.bin/ts-node ./node_modules/webpack/bin/webpack.js --config webpack/webpack.config.js"
После тонны документов...
Просто установите пресет es2015 (не env !!!) и добавьте его в
.babelrc:
{
"presets": [
["es2015", { "modules": false }]
]
}
Переименуйте ваш webpack.config.js в webpack.config.babel.js
Для TypeScript: прямо с 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
затем перейдите к написанию вашего, например: 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;
Проверьте ссылку для получения более подробной информации, где вы можете использовать плагин, чтобы иметь отдельный файл tsconfig только для конфигурации webpack, если вы не ориентируетесь на commonjs (это требование для работы, так как он использует ts-node).
Для настройки файла конфигурации веб-пакета для использования ES2015 требуется Babel:
Установите зависимости dev:
npm i -D webpack \
webpack-cli \
webpack-dev-server \
@babel/core \
@babel/register \
@babel/preset-env
npm i -D html-webpack-plugin
Создайте файл .babelrc:
{
"presets": ["@babel/preset-env"]
}
Создайте свою конфигурацию webpack.config.babel.js, 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;
Создайте свои скрипты в package.json:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server --open"
},
Запустите npm run build и npm start.
Конфигурация webpack основана на примере проекта со следующей структурой каталогов:
├── README.md
├── package-lock.json
├── package.json
├── src
│ ├── Greeter.js
│ ├── index.html
│ └── index.js
└── webpack.config.babel.js
Пример проекта: язык конфигурации Webpack с использованием Babel