如何在 webpack.config.js 中使用 ES6？

Question

如何在webpack.config中使用ES6？喜欢这个回购 https://github.com/kriasoft/react-starter-kit 是吗？

例如：

使用这个

import webpack from 'webpack';

而不是

var webpack = require('webpack');

与其说是需要，不如说是一种好奇。

Answer 1

尝试将您的配置命名为 webpack.config.babel.js。你应该有 babel-register included in the project. Example at react-router-bootstrap.

Webpack 在内部依赖 interpret 来完成这项工作。

Answer 2

作为@bebraw 建议的替代方案，您可以使用 ES6+ 语法创建一个 JavaScript 自动化脚本：

// 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.：通过 JavaScript API 调用 webpack 可能是更好的方法（比通过命令行调用它）当您需要实施更复杂的构建步骤时。例如。服务器端包准备好后，启动 Node.js 应用程序服务器，并在 Node.js 服务器启动后立即启动 BrowserSync 开发服务器。

另请参阅：

React Starter Kit (package.json/scripts, tools/bundle.js, tools/webpack.config.js)
React Static Boilerplate (run.js, webpack.config.js, node run)
You might not need Gulp.js

Answer 3

另一种方法是使用这样的 npm 脚本："webpack": "babel-node ./node_modules/webpack/bin/webpack"，运行就像这样：npm run webpack.

Answer 4

另一种方法是对节点使用 require 参数：

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

在 electron-react-boilerplate 中以这种方式找到，请查看 build-main 和 build-renderer 脚本。

Answer 5

这真的很简单，但从任何答案中我都看不出来，所以如果有人像我一样感到困惑：

只需将 .babel 附加到扩展名 之前的文件名部分（假设您已将 babel-register 作为依赖项安装）。

示例：

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

Answer 6

我与 npm 脚本一起使用的最佳方法是

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

并根据您对 Babel

的要求配置其余脚本

Answer 7

我在获取@Juho 的解决方案时遇到问题运行 Webpack 2。Webpack migration docs 建议您关闭 babel 模块解析：

It is important to note that you will want to tell Babel to not parse these module symbols so webpack can use them. You can do this by setting the following in your .babelrc or babel-loader options.

.babelrc:

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

遗憾的是，这与自动 babel 注册功能冲突。删除

{ "modules": false }

从 babel 配置中再次得到东西运行。然而，这会导致 tree-shaking 中断，因此完整的解决方案将涉及 overwriting the presets in the loader options:

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

编辑，2017 年 11 月 13 日；将 webpack 配置片段更新为 Webpack 3（感谢@x-yuri）。旧的 Webpack 2 片段：

{
    test: /\.js$/,
    exclude: ['node_modules'],
    loader: 'babel',
    query: {
        babelrc: false,
        presets: [
            ['es2015', { modules: false }],
        ],
    },
},

Answer 8

将 webpack.config.js 重命名为 webpack.config.babel.js。

然后在 .babelrc 中：{"presets": ["es2015"]}

但是，如果你想为 babel-cli 使用不同的 babel 配置，你的 .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。

有关 .babelrc 的更多信息，请查看 official docs。

Answer 9

没有足够的代表发表评论，但我想为所有 TypeScript 用户添加与上述@Sandrik 类似的解决方案

我有两个脚本指向包含 ES6 语法的 webpack 配置（JS 文件）。

"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"

Answer 10

这就是我使用 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-dev-server，使用与webpack命令相同的--config-register选项

注意：

无需将配置文件重命名为 webpack.config.babel.js（如接受的答案所建议）。 webpack.config.js 会很好用。

Answer 11

在大量文档之后...

只需安装 es2015 预设（不是 env!!!）并将其添加到

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

将您的 webpack.config.js 重命名为 webpack.config.babel.js

Answer 12

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'
        },

Answer 13

对于 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;

查看 link 以获取更多详细信息，如果您不以 commonjs 为目标（这是工作的要求，因为它依赖于 ts-node).

Answer 14

使用 Webpack 4 和 Babel 7

设置 webpack 配置文件以使用 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 配置，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 Configuration Language Using Babel

Answer 15

将 es6 添加到 webpack 是一个 3 步过程

在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

Answer 16

编辑：截至 2021 年 2 月有效

https://github.com/webpack/webpack-cli/pull/2381

你不能。您必须将其转换为 CommonJS，使用 babel 或 esm.

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

但是你可以运行webpack -r esm @babel/register

Answer 17

致 2022 年的读者：

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

在package.json
中添加"type": "module"
将 webpack.config.js 的语法更改为 ESM。
尽情享受吧。

如何在 webpack.config.js 中使用 ES6？

How can I use ES6 in webpack.config.js?

webpack

另请参阅：

注意：

使用 Webpack 4 和 Babel 7