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

大量文件之后...

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

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

2. 重命名webpack.config.js为webpack.config.babel.js

我最好的方法与npm脚本一起是

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

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

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

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

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

发现这样的电子反应，样板，看看build-main和build-renderer脚本。

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

注意：

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

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

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

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

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

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

例：

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