我试图使用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
中指定的插件和预设?
答案 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.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