Как я могу использовать ES6 в webpack.config.js?

Как использовать ES6 в webpack.config? Как этот репозиторий https://github.com/kriasoft/react-starter-kit делает?

Например:

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

import webpack from 'webpack';

вместо того

var webpack = require('webpack');

Это скорее любопытство, а не необходимость.

Попробуйте назвать свой конфиг как webpack.config.babel.js. Вы должны включить Babel-Register в проект. Пример при реакции-роутере-бутстрапе .

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

В качестве альтернативы тому, что предлагает @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:

$ babel-node tools/bundle

PS : вызов веб-пакета через JavaScript API может быть лучшим подходом (чем вызов через веб-интерфейс), когда вам нужно реализовать более сложные шаги сборки. Например, после того, как пакет на стороне сервера готов, запустите сервер приложений Node.js и сразу после запуска сервера Node.js запустите сервер BrowserSync dev.

Смотрите также:

• Реагировать Starter Kit ( package.json/scripts, tools/bundle.js, tools/webpack.config.js)
• React Статический Шаблонный ( run.js, webpack.config.js, node run)
• Вам может не понадобиться Gulp.js

Другой подход заключается в НПМ скрипт вроде этого: "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 --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

Нашел этот путь в электронно-реагирующем шаблоне , посмотри 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} сломает веб-пакет, если вы не используете разные envs.

Для получения дополнительной информации о .babelrc, проверьте официальные документы .

Для 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).

Не хватает представителя, чтобы комментировать, но я хотел бы добавить для любого пользователя TypeScript аналогичное решение @Sandrik выше

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

Мой лучший подход вместе со скриптом npm

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

и настройте остальные скрипты согласно вашему требованию для Babel

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

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

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

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

Использование Webpack 4 и Babel 7

Для настройки файла конфигурации веб-пакета для использования 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:

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

Добавление es6 в веб-пакет - это трехэтапный процесс

1. В webpack.config.js добавить

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

   2. Создайте .babel.rc и добавьте в него

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

3. в package.json добавить

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

Ты не можешь Вы должны преобразовать его в CommonJS с помощью babelили esm.

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

Но вы можете запустить webpack -r esm @babel/register