我正在使用Webpack进行响应,并且出现类似“您可能需要适当的加载器来处理此文件类型”之类的错误。指针位于index.js文件中。 我所做的所有配置都来自不同的站点。 我做了很多研究,但没有找到任何解决方案。以下是我的
这是我在启动npm run build之后得到的。 哈希:6e44e1d4943de3ad0fbc 版本:webpack 4.19.1 时间:159ms 建立于:01/16/2019 5:10:14 PM 1项资产 入口点main = main.js [0] ./src/index.js 231字节{0} [构建] [失败] [1错误]
ERROR in ./src/index.js 20:2
Module parse failed: Unexpected token (20:2)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
> <BrowserRouter>
| <Switch>
| {/* redirection path */}
webpack.config.js文件代码:
const HTMLWebPackPlugin = require("html-webpack-plugin");
const path = require("path");
module.export = {
entry: "src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "gem-webpack.bundle.js"
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
// include: __dirname + "/app/",
loader: "babel-loader",
query: {
presets: [
"@babel/preset-env",
"@babel/preset-react",
"es2015 ",
"stage-0",
"transpile jsx"
]
}
},
{
test: /\.(.css)$/,
use: [
{ loader: "style-loader" },
{
loader: "css-loader",
options: {
modules: true
}
},
{
loader: "sass-loader"
}
]
},
{
test: /\.(.html)$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.(jpe?g|png|gif|svg|ico)$/i,
use: [
{
loader: "file-loader",
options: {
outputPath: "assets/"
}
}
]
}
]
},
plugin: [
new HTMLWebPackPlugin({
template: "public/index.html",
filename: "./index.html"
})
]
};
This is my .babelrc :
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"es2015",
"transpile jsx",
"stage-0"
]
}
.npmrc的代码:
save-exact=true
Package.json文件:
{
"name": "gemplex_ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-preset-es2015": "6.24.1",
"bootstrap": "^4.2.1",
"hamburgers": "^1.1.3",
"jquery": "^3.3.1",
"jquery.js": "0.0.2-security",
"popper.js": "^1.14.6",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-fa": "^5.0.0",
"react-owl-carousel2": "^0.3.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.2",
"video.js": "^7.4.1",
"videojs-playlist": "^4.2.6"
},
"scripts": {
"start": "react-scripts start",
"build": "webpack --mode production",
"test": "react-scripts test",
"eject": "react-scripts eject",
"webpbuild": "webpack --mode production"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"@babel/core": "7.2.2",
"@babel/preset-env": "7.2.3",
"@babel/preset-react": "^7.0.0",
"babel-loader": "8.0.5",
"css-loader": "^2.1.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"react-alice-carousel": "^1.13.0",
"webpack": "4.19.1",
"webpack-cli": "3.2.1",
"webpack-dev-server": "3.1.14"
}
}
谢谢。