Question

我试图使用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＆＃39; somelib＆＃39;;
  | import＆＃39; ../ mylib＆＃39;;
  |

这表明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中指定的插件和预设？

Answer 1

要在网络包中使用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.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

Webpack CLI忽略.babelrc

1 个答案: