另一种方法是这样写一个npm脚本:"webpack": "babel-node ./node_modules/webpack/bin/webpack"，然后像这样运行:

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

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

编辑:截至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

作为@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-node tools/bundle

附注:当你需要实现更复杂的构建步骤时，通过JavaScript API调用webpack可能是一个更好的方法(比通过命令行调用它)。例如，在服务器端bundle准备好后，启动Node.js应用服务器，在Node.js服务器启动后，启动BrowserSync开发服务器。

参见:

React Starter Kit(包。Json /scripts, tools/bundle.js, tools/webpack.config.js) React静态样板(run.js, webpack.config.js，节点运行) 你可能不需要Gulp.js

对于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(这是一个要求，因为它依赖于ts-node)，你可以使用一个插件来为webpack配置一个单独的tsconfig文件。

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