我正在学习反应并尝试使用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')); @ multi(webpack)-dev-server / client?http:// localhost:8080(webpack)/hot/dev-server.js ./src main [2]
1 回答
在能够使用JSX语法之前,您需要在应用程序的根文件夹中的
.babelrc
文件中包含预设列表 .这是一个例子
在这个示例中,babel将考虑使用ES2015引用和流静态类型语法的JSX React应用程序 .
有关更多信息,请查看this link .