Webpack CLI 忽略 .babelrc

Question

我正在尝试使用 wepback cli 来构建一个非常简单的脚本......差不多：

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

我在跑步

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

但这给了我：

./foo.js 中的错误
模块解析失败：/dir/foo.js 第 1 行：意外令牌
您可能需要适当的加载程序来处理此文件类型。
|导入'somelib';
|导入'../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，我没有看到任何用于 webpack 的 cli flag 可以让您指定 babel 配置，包括插件/预设。

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

Answer 1

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

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

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

npm i babel-loader -D

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

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