Как я могу использовать ES6 в webpack.конфиг.Яш?

Как использовать ES6 в webpack.конфиг ? Такой РЕПО https://github.com/kriasoft/react-starter-kit ли ?

например:

используя этот

import webpack from 'webpack';

вместо

var webpack = require('webpack');

это скорее любопытство, чем потребность.

171
webpack

12 ответов

попробуйте назвать свою конфигурацию как webpack.config.babel.js. Вы должны есть!--2-->Бабель-зарегистрироваться включены в проект. Пример react-router-bootstrap.

Webpack полагается на интерпретировать внутренне, чтобы сделать эту работу.

188

в качестве альтернативы тому, что предлагает @bebraw, вы можете создать скрипт автоматизации JavaScript с синтаксисом ES6+:

// tools/bundle.js

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

const bundler = webpack(webpackConfig);

bundler.run(...);

и выполнить его с Бабеля:

$ babel-node tools/bundle

П. С.: вызов webpack через JavaScript API может быть лучшим подходом (чем вызов его через командную строку), когда вам нужно реализовать более сложные шаги сборки. Е. Г. после того как серверный пакет будет готов, узел запуска.JS app server и сразу после узла.JS сервер запущен, запуск BrowserSync dev server.

Читайте также:

34

другой подход-иметь такой скрипт npm:"webpack": "babel-node ./node_modules/webpack/bin/webpack", и запустите его так:npm run webpack.

18

у меня возникла проблема с запуском решения @Juho с Webpack 2. The документы миграции Webpack предлагаю вам включить разбор модуля babel:

важно отметить, что вы захотите сказать Babel, чтобы не разбирать эти символы модуля, чтобы webpack мог их использовать. Вы можете сделать это установка следующего в вашем .варианты babelrc или babel-затяжелителя.

.babelrc:

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

к сожалению, это противоречит автоматическая функциональность регистра babel. Удаление 

{ "modules": false }

из конфигурации babel снова запустились. Однако это приведет к нарушению встряхивания деревьев, поэтому полное решение будет включать перезапись пресетов в параметрах загрузчика:

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 }],
        ],
    },
},
15

Это действительно легко, но это не было очевидно для меня из любого из ответов, поэтому, если кто-то еще смущен, как я:

просто добавить .babel к части вашего имени файла перед расширением (предполагая, что у вас есть babel-register установлен как зависимость).

пример:

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

еще один способ-использовать аргумент require для node:

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

нашел этот путь в электронно-реактивный шаблон посмотри build-main и build-renderer скрипты.

5

переименовать webpack.config.js to webpack.config.babel.js.

затем в .babelrc:{"presets": ["es2015"]}

однако, если вы хотите использовать другую конфигурацию babel для babel-cli, ваш .babelrc может выглядеть примерно так:

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

и в пакет.в 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, проверьте официальные документы.

3

это то, что работал для меня с помощью webpack 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 --config-register. В любом случае, @babel/register необходимо сделать эту работу.

и это все!

yarn dev

и вы можете использовать es6 в конфиге!

Примечание:

нет необходимости переименовывать файл конфигурации в webpack.config.babel.js (как предложено принятым ответом). webpack.config.js будет работать нормально.

2

мой лучший подход вместе со сценарием npm -

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

и настроить остальные скрипты в соответствии с вашим требованием для Бабель

1

не хватает репутации для комментариев, но я хотел добавить для любых пользователей 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"

1

после тонны документов...

  1. просто установите ES2015 preset (не env !!!) и добавьте его в 

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

  2. переименовать webpack.config.js to webpack.config.babel.js

1

конфигурации Вавилон 7 & Webpack 4

пакета.в 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.конфиг.вавилонское столпотворение.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'
        },
0