没有足够的代表来评论，但我想为任何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.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的更多信息，请查看官方文档。

对于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文件。

作为@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"

看了无数的文件之后……

只需安装es2015预置(不是env !!)并将其添加到 .babelrc: ｛ “预设”:( ["es2015"， {"modules": false}] ］ ｝ 将webpack.config.js重命名为webpack.config.babel.js