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

Question

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

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

Например:

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

import webpack from 'webpack';

вместо

var webpack = require('webpack');

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

259

webpack

Источник

user356380 09 авг '15 в 11:23

19 ответов

Решение

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

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

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

45

Источник

user82686 11 авг '15 в 21:18

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

20

Источник

user3731571 19 мар '16 в 13:13

Это то, что работает для меня, используя веб-пакет 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 будет работать просто отлично.

17

Источник

user2089675 09 авг '18 в 19:13

Для читателей в 2022 году:

      "webpack": "^5.70.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"

Добавлять "type": "module"в package.json
Измените синтаксис вашего webpack.config.jsк ЭСМ.
Наслаждаться.

17

Источник

user5290519 26 мар '22 в 08:21

У меня возникла проблема с запуском решения @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 }],
        ],
    },
},

16

Источник

user971091 02 мар '17 в 13:35

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

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

Пример:

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

13

Источник

user741970 18 ноя '16 в 18:19

Конфигурация для 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'
        },

8

Источник

user343900 10 сен '18 в 13:54

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

8

Источник

user5938759 08 янв '19 в 15:08

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

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

Нашел этот путь в электронно-реагирующем шаблоне, посмотрите на build-main а также build-renderer скрипты.

6

Источник

user2866143 16 окт '16 в 17:01

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

4

Источник

user280783 12 апр '17 в 06:06

Использование 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

3

Источник

user92189 08 апр '19 в 11:40

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

3

Источник

user6884597 16 авг '17 в 16:08

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

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

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

2

Источник

user5840548 13 дек '16 в 17:17

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

Просто установите пресет es2015 (не env!!!) и добавьте его в
```
.babelrc:
{
    "presets": [
         ["es2015", { "modules": false }]
    ]
}
```
Переименуй свой webpack.config.js в webpack.config.babel.js

2

Источник

user6120889 16 авг '18 в 08:33

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

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

module:{

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

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

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

в 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

1

Источник

user3774319 23 апр '20 в 04:25

просто добавьте это:

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

0

Источник

user9422455 17 апр '21 в 12:34

Столкнулся с этой проблемой и решил ее, установив последний веб-пакет, веб-пакет-кли и веб-пакет-девсервер, см. пример здесь .

0

Источник

user10914722 22 июн '23 в 19:58

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

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

Но ты можешь бежать webpack -r esm @babel/register

-1

Источник

user1426683 29 июн '20 в 01:00

Другие вопросы по тегам webpack

user228885 09 авг '15 в 17:28 2015-08-09 17:28 · Accepted Answer · 2015-08-09 17:28

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

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

252

Источник

user228885 09 авг '15 в 17:28