Webpack CLI忽略.babelrc

时间:2016-03-10 00:17:33

标签: node.js webpack babeljs

我试图使用wepback cli来构建一个非常简单的脚本......非常多:

+--------------------+
|               title|
+--------------------+
|A new relictual a...|
|A new relictual a...|
|A new relictual a...|
+--------------------+

我正在跑步

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

但是这给了我:

   ./foo.js中的错误
  模块解析失败:/dir/foo.js第1行:意外的令牌
  您可能需要适当的加载程序来处理此文件类型   | import' somelib';
  | import' ../ mylib';
  |

这表明webpack没有正确预处理文件,但我在同一目录中有一个webpack --output-filename index.js foo.js

.babelrc

我确实安装了相应的babel预设和插件,实际上{ "presets": ["es2015", "stage-0"], "plugins": ["transform-runtime", "transform-regenerator", "syntax-async-functions", "transform-async-to-generator"] } babel上运行正常。

我发现Babel和Webpack的文档似乎都说它会自动使用foo.js而我看不到任何cli flag webpack会允许你指定babel配置包括插件/预设。

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

1 个答案:

答案 0 :(得分:2)

要在网络包中使用babel,您应该安装并注册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.jswebpack.config.babel.js):

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

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

webpack