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

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

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

作为@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用户添加一个类似于上面@Sandrik的解决方案

我有两个脚本，我使用指向webpack配置(JS文件)，包含ES6语法。

"start-dev": "./node_modules/.bin/ts-node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js——config. /webpack/webpack.config.dev.js"

and

"./node_modules/.bin/ts-node ./node_modules/webpack/bin/webpack.js——config webpack/webpack.config.js"

使用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配置语言使用Babel

这真的很简单，但从任何答案中我都看不出来，所以如果有人和我一样困惑:

只需将.babel附加到你的文件名扩展名之前的部分(假设你已经安装了babel寄存器作为依赖项)。

例子:

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

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