这就是我使用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来实现此工作。

就是这样!

纱线开发

你可以在配置中使用es6 !

对于webpack-dev-server，使用与webpack命令相同的——config-register选项

注意:

不需要将配置文件重命名为webpack.config.babel.js(由已接受的答案所建议)。Webpack.config.js可以正常工作。

试着将你的配置命名为webpack.config.babel.js。你应该在项目中包含通音寄存器。在react-router-bootstrap的例子。

Webpack依赖于内部的解释来实现此工作。

还有一种方法是为node使用require参数:

Node -r babel-register ./node_modules/webpack/bin/webpack . xml

在electron-react-boilerplate中可以找到这种方法，看看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-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的更多信息，请查看官方文档。

我在Webpack 2上运行@Juho的解决方案时遇到了一个问题。Webpack迁移文档建议你打开babel模块解析:

重要的是要注意，您将希望告诉Babel不要解析 这些模块符号，以便webpack可以使用它们。你可以通过 在.babelrc或babel加载器选项中设置以下内容。 .babelrc:

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

遗憾的是，这与自动巴别寄存器功能相冲突。删除

{ "modules": false }

巴别塔的配置让一切重新运转起来。然而，这将导致破坏摇树，所以一个完整的解决方案将涉及覆盖加载器选项中的预设:

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