我正在尝试使用Webpack 4从零开始构建React应用程序
尝试构建时出现以下错误。尽管已经安装了babel-core,但我也尝试安装@ babel / core,但是没有用
ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/core' at Function.Module._resolveFilename (module.js:538:15) at Function.Module._load (module.js:468:25) at Module.require (module.js:587:17) at require (internal/module.js:11:18) at Object.<anonymous> (/Users/digvijay.upadhyay/digvijayu/react_webpack_4_from_scratch/node_modules/babel-loader/lib/index.js:5:15) at Module._compile (module.js:643:30) at Object.Module._extensions..js (module.js:654:10) at Module.load (module.js:556:32) at tryModuleLoad (module.js:499:12) at Function.Module._load (module.js:491:3) @ multi (webpack)-dev-server/client?http://localhost:8080 ./src main[1] Child html-webpack-plugin for "index.html": 1 asset Entrypoint undefined = ./index.html [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 500 bytes {0} [built] [./node_modules/lodash/lodash.js] 527 KiB {0} [built] [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {0} [built] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built] ℹ 「wdm」: Failed to compile.
webpack.config.js
const HtmlWebPackPlugin = require("html-webpack-plugin"); const htmlPlugin = new HtmlWebPackPlugin({ template: "./src/index.html", filename: "./index.html" }); module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] }, plugins: [htmlPlugin] };
编辑:将包json文件添加到问题 package.json
"devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^8.0.0", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "html-webpack-plugin": "^3.2.0", "webpack": "^4.17.1", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.6" }, "dependencies": { "@babel/core": "^7.0.0", "path": "^0.12.7", "react": "^16.4.2", "react-dom": "^16.4.2" }
{“名称”:“ boiler-plate-react-webpack-4”,“ main”:“ index.js”,“ scripts”:{“ start”:“ webpack-dev-server –mode development –open- -display-error- details”,“ build-dev”:“ webpack –mode development”,“ build-prod”:“ webpack –mode production”,“ test”:“ echo \”错误:未指定测试\ “ && exit 1”},“ devDependencies”:{“ babel-core”:“ ^ 6.26.3”,“ babel-loader”:“ ^ 8.0.0”,“ babel-preset-env”:“ ^ 1.7。 0“,” babel-preset-react“:” ^ 6.24.1“,” html- webpack-plugin“:” ^ 3.2.0“,” webpack“:” ^ 4.17.1“,” webpack-cli“: “ ^ 3.1。0“,” webpack-dev-server“:” ^ 3.1.6“},” dependencies“:{” @ babel / core“:” ^ 7.0.0“,” path“:” ^ 0.12.7“,” react“:” ^ 16.4.2“,” react-dom“:” ^ 16.4.2“}}
解决了:
问题出在package babel-loader,最新版本需要@ babel / core。将版本降级到7.x,现在可以了
babel-loader
"devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-env": "^1.7.0", "babel-preset-react": "^6.24.1", "html-webpack-plugin": "^3.2.0", "webpack": "^4.17.1", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.6" }, "dependencies": { "react": "^16.4.2", "react-dom": "^16.4.2" }