![](/img/trans.png)
[英]Webpack error: “You may need an appropriate loader to handle this file type”
[英]error with webpack - You may need an appropriate loader to handle this file type
我正在学习反应,并尝试使用webpack创建样板。 我跟随一个教程,遍历了他的视频作品中的所有内容,但是在我的计算机上,我收到一条错误消息,指出需要适当的加载器来处理特定的文件类型。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.export = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
这是错误来自的文件
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(<App />, document.getElementById('app'));
这是错误消息:
./src/index.js 5:16中的错误模块解析失败:意外的令牌(5:16)您可能需要适当的加载程序来处理此文件类型。 | 从“ ./components/App”导入应用; |
ReactDOM.render(,document.getElementById('app')); @多(webpack)-dev-server / client? http:// localhost:8080 (webpack)/hot/dev-server.js ./src main [2]
在使用JSX语法之前,您需要在应用程序的根文件夹中的.babelrc
文件中拥有.babelrc
预设。
这是一个例子
{
"presets": [
"flow",
"es2015",
"react"
]
}
在此示例中,babel将使用ES2015参考和流静态类型化语法说明一个JSX React应用程序。
请查看此链接以获取更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.