Як я можу використовувати 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. У проект повинен бути включений реестр репортерів . Приклад на реакційному маршрутизаторі-завантажувальному пристрої .

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-node tools/bundle

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

Дивитися також:

• Реагувати 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 або опціях-завантажувачі.

.babelrc:

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

На жаль, це вступає в конфлікт з функцією автоматичного реєстру діточок. Видалення

{ "modules": false }

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

module: {
    rules: [
        {
            test: /\.js$/,
            include: path.resolve('src'),
            loader: 'babel-loader',
            options: {
                babelrc: false,
                presets: [['env', {modules: false}]]
            }
        }
    ]
}

Редагувати , 13 листопада 2017 р .; оновлений фрагмент конфігурації вебпакету до 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

Це те, що працювало для мене за допомогою 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--quire , але якщо ви хочете використовувати webpackкоманду замість цього, замініть її на webpack --config-register. В будь-якому випадку @babel/registerпотрібно зробити цю роботу.

І це все!

yarn dev

І ви можете використовувати es6в конфігурації!

Для цього webpack-dev-serverвикористовуйте --config-registerпараметр, такий самий, як і для webpackкоманди

ПРИМІТКА:

НЕ потрібно перейменовувати конфігураційний файл webpack.config.babel.js(як це запропоновано прийнятою відповіддю). webpack.config.jsбуде працювати чудово.

Ще один спосіб - використовувати аргумент Requ для вузла:

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}німо, але буде порушено веб-пакет, якщо ви не використовуєте різні програми.

Для отримання додаткової інформації про .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 лише для конфігурації веб-пакету, якщо ви не орієнтуєтеся на commonjs (який для цього працює, оскільки він покладається на ts-вузол).

Не вистачає респондентів для коментарів, але я хотів додати для будь-яких користувачів 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.jsTowebpack.config.babel.js

Використання Webpack 4 та Babel 7

Щоб налаштувати файл конфігурації веб-пакету для використання ES2015, потрібно Babel:

Встановити залежність розробників:

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.

Конфігурація веб-пакету базується на прикладі проекту із такою структурою каталогу:

├── README.md
├── package-lock.json
├── package.json
├── src
│   ├── Greeter.js
│   ├── index.html
│   └── index.js
└── webpack.config.babel.js

Зразок проекту: Мова конфігурації веб-пакету за допомогою Babel

Додавання es6 до webpack - це триетапний процес

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. в пакет.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/isissue/282

Але ти можеш бігати webpack -r esm @babel/register