如何在webpack-config-js中使用es6

在 webpack.config.js 中使用 ES6通常涉及到以下几个步骤:

1. 使用 Node.js 的原生 ES6 支持

由于Webpack是在Node.js环境下运行的，而Node.js已经支持了大部分ES6的特性，因此你可以直接在webpack.config.js中使用ES6的大部分语法。例如，你可以使用const和let代替var，使用箭头函数等。

javascript
const path = require('path');

module.exports = {
  // ES6箭头函数
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // 其他配置...
};

2. 使用 Babel 转译 ES6+

如果你想使用更高级的ES6特性，或者是ES7/ES8等更高版本的ECMAScript特性，那么你可能需要使用Babel来转译这些代码，让它们能在Node.js中运行。

为了在webpack.config.js中使用Babel，你可以遵循以下步骤：

安装 Babel

首先，你需要安装Babel相应的依赖包。

bash
npm install --save-dev @babel/core @babel/preset-env @babel/register

配置 Babel

然后，创建一个.babelrc文件，来配置Babel。

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

使用 Babel 注册钩子

最后，在webpack.config.js文件的顶部，你需要添加以下代码来注册Babel的转译过程。

javascript
require('@babel/register');

这样，你就可以在webpack.config.js文件中使用完整的ES6+语法了。

javascript
import path from 'path';

export default {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // 其他配置...
};

但要注意，这种方式虽然可以让你使用ES6+的语法编写配置文件，但它可能会稍微降低构建过程的启动速度，因为需要额外的转译步骤。

总结

在现代Node.js版本中，许多ES6特性已经被原生支持，所以你可以在webpack.config.js中直接使用它们。如果你需要使用超出Node.js原生支持范围的特性，那么可以通过集成Babel来实现。上述两种方法可以帮助你在webpack.config.js中使用ES6+的语法，从而让你的配置文件更加现代化和易于维护。

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

Webpack 依靠内部解释来完成这项工作。

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

shell
// tools/bundle.js

import webpack from 'webpack';
import webpackConfig from './webpack.config.js'; // <-- Contains ES6+

const bundler = webpack(webpackConfig);

bundler.run(...);

并用 babel 执行它：

shell
$ babel-node tools/bundle

PS：当您需要实现更复杂的构建步骤时，通过 JavaScript API 调用 webpack 可能是更好的方法（比通过命令行调用它）。例如，在服务器端捆绑包准备就绪后，启动 Node.js 应用服务器，并在 Node.js 服务器启动后立即启动 BrowserSync 开发服务器。

也可以看看：

• React 入门套件( package.json/scripts, tools/bundle.js, tools/webpack.config.js)
• 反应静态样板( run.js, webpack.config.js, node run)
• 您可能不需要 Gulp.js

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

这就是我使用 webpack 4 的效果：

在package.json：

shell
"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会工作得很好。

致 2022 年的读者：

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

1. 加入"type": "module"_package.json

2. 将您的语法更改webpack.config.js为 ESM。

3. 享受。