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

【问题标题】：How can I use ES6 in webpack.config.js?如何在 webpack.config.js 中使用 ES6？
【发布时间】：2015-11-01 10:20:37
【问题描述】：

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

例如：

使用这个

import webpack from 'webpack';

而不是

var webpack = require('webpack');

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

【问题讨论】：

@Amit 这是一个问题。我想不通。因为如果我在 webpack.config 中使用 es6 语法，我会得到错误。
问题是如何在webpack.config中使用es6。对我来说似乎很清楚。我用一个例子更新我的问题。
文件由node.js解析，默认不支持es6。有命令行标志可以打开它，但我不知道它们是什么。您也可以尝试使用 io.js 而不是 node
这里有同样的问题。这非常令人困惑，因为 webpack 本身确实支持 ES6 模块语法！但是在 webpack.config 中你仍然需要使用require。为 webpack 配置文件安装 babel 似乎有点矫枉过正！
Webpack 文档说 webpack.js.org/api/module-methods/#es6-recommended- ES6 语法可以在不需要 babel 的情况下使用。有没有人在不使用 babel 的情况下使用 ES6 语法导入成功？

标签： webpack

【解决方案1】：

尝试将您的配置命名为webpack.config.babel.js。您应该在项目中包含babel-register。 react-router-bootstrap 的示例。

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

【讨论】：

这对我有用。我npm run这个脚本：webpack --config webpack.config.babel.js。
我觉得即使没有--config也能直接捡起来。
我觉得应该补充一下babel-loader这个模块也是必须的
其实可以的，只需要在.babelrc文件中设置你的babel预设即可。
我使用这个特定的预设来让它工作：echo '{ "presets": ["es2015"] }' > .babelrc

【解决方案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

【讨论】：

虽然有点复杂，但这正是 react-starter-kit 使用的。这应该是最好的答案。

【解决方案3】：

另一种方法是创建一个像这样的 npm 脚本："webpack": "babel-node ./node_modules/webpack/bin/webpack"，然后像这样运行它：npm run webpack。

【讨论】：

在将自定义配置传递给 webpack babel-node ./node_modules/webpack/bin/webpack --config custom-webpack.config 时，这似乎不起作用

【解决方案4】：

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

需要注意的是，你会想要告诉 Babel 不要解析这些模块符号，以便 webpack 可以使用它们。你可以这样做在 .babelrc 或 babel-loader 选项中设置以下内容。

.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 配置 sn-p 更新为 Webpack 3（感谢 @x-yuri）。旧的，Webpack 2 sn-p：

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

【讨论】：

These days (Webpack 3)，它可能看起来像这样：module:{rules: [{test: /\.js$/, include: path.resolve('src'), loader: 'babel-loader', options: {babelrc: false, presets: [['env', {modules: false}]]}}]} (gist)。 -loader 后缀不再可选。尽量避免exclude 而更喜欢include。仅当绝对路径时才包含/排除 work 中的字符串。 query 已重命名为 options。
另外，请明确表示您不希望.babelrc 中的{modules: false} 能够使用import 中的webpack.config.babel.js。
对于Webpack 4 -loader后缀需要加回webpack.js.org/migrate/3/…

【解决方案5】：

这就是使用 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 可以正常工作。

【讨论】：

看起来 web-serve 已被弃用。知道如何使用 webpack-dev-server 进行这项工作吗？我在文档中没有看到它的 --require 选项：webpack.js.org/configuration/dev-server/#devserver
@CrhistianRamirez，使用--config-register 选项。 webpack-serve 的仓库也移到了这里：github.com/shellscape/webpack-serve
酷！这对我有用。这是我的脚本的样子：webpack --config-register @babel/register --config webpack/development.config.js 我必须指定 --config 因为我的 webpack 配置在一个文件夹中。谢谢！

【解决方案6】：

这真的很容易，但是从任何答案中对我来说都不是很明显，所以如果其他人像我一样感到困惑：

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

例子：

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

【讨论】：

我不使用babel是因为webpack本身已经支持ES6模块语法，我的项目不需要兼容ES5。它只是仍然需要require 的配置文件。这很奇怪不是吗？
哇，这很有趣！我不知道。我需要重新审视这个。奇怪的是配置文件仍然需要 require

【解决方案7】：

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

【讨论】：

这 still 对我不起作用，但恕我直言，它看起来是最新且几乎最干净的示例（与类属性相关的条目对于在手）。

【解决方案8】：

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

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

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

【讨论】：

壮观 - 只是看着 Electron 并启动了一个单独的服务器，您的回答非常有帮助！ :)

【解决方案9】：

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

查看链接以获取更多详细信息，如果您不针对 commonjs，您可以在其中使用插件为 webpack 配置创建一个单独的 tsconfig 文件（这是此工作的必要条件，因为它依赖于 ts-node） .

【讨论】：

谢谢你，无法让模块为 webpack.config.js 工作，但很高兴使用 TypeScript 来代替它。

【解决方案10】：

将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。

【讨论】：

【解决方案11】：

没有足够的代表发表评论，但我想为任何 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"

【讨论】：

【解决方案12】：

使用 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

【讨论】：

【解决方案13】：

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

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

并根据您对Babel 的要求配置其余脚本

【讨论】：

【解决方案14】：

在大量的文件之后......

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

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

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

【讨论】：

【解决方案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

【讨论】：

【解决方案16】：

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

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

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

【讨论】：