node.js - Webpack CLI 忽略 .babelrc

Question

我正在尝试使用 wepback cli 构建一个非常简单的脚本......几乎:

import 'somelib';
import '../mylib';

我在运行

webpack --output-filename index.js foo.js

但这给了我:

ERROR in ./foo.js
Module parse failed: /dir/foo.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import 'somelib';
| import '../mylib';
|

这表明 webpack 没有正确预处理文件，但我在同一目录中有一个 .babelrc :

{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-runtime", "transform-regenerator",
    "syntax-async-functions", "transform-async-to-generator"]
}

我确实安装了相应的 babel 预设和插件，事实上 babel 确实可以在 foo.js 上正常工作。

我找到的 Babel 和 Webpack 的文档似乎都说它将自动使用 .babelrc 并且我没有看到任何 cli flag对于 webpack，它允许您指定 babel 配置，包括插件/预设。

有什么方法可以让 webpack cli 使用我在 .babelrc 中指定的插件和预设吗？

Answer 1

要将 babel 与 webpack 一起使用，您应该安装并注册 babel-loader .

babel-loader 尊重 .babelrc 文件，因此不需要任何额外的配置。

所以，首先你必须安装它:

npm i babel-loader -D

那么您应该使用适当的 --module-bind flag在 CLI 命令中:

webpack --module-bind 'js=babel' --output-filename index.js foo.js

或为您的应用程序创建 webpack 配置文件(webpack.config.js 或 webpack.config.babel.js):

module.exports = {
  entry: './foo.js',
  output: {
    filename: 'index.js'
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel'
    }]
  }
}

因此无需指定任何命令行参数来构建项目:

webpack