Question

我正在使用webpack和Babel进行此简单设置，以实现简单的javascript项目。我已经尝试了很多示例，但是没有任何效果。这些是我的设置：

 {
  "name": "webpack_babel-prac",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
   "author": "",
  "license": "ISC",
  "devDependencies": {
   "babel-core": "^6.26.3",
   "babel-loader": "^8.0.4",
   "babel-preset-env": "^1.7.0",
   "webpack": "^4.27.1",
   "webpack-cli": "^3.1.2",
   "webpack-dev-server": "^3.1.10"
  }
}

配置文件

const path = require('path');

module.exports={
 entry:{
    app:'./src/app.js'
 },
output:{
    path:path.resolve(__dirname,'build'),
    filename:'bundle.js'
},
mode:'development',
module:{
    rules:[{ 
        test:/\.js?$/,
        exclude:/node_modules/,
        loader:'babel-loader',
        options:{
            presets:['babel-preset-env ']
            }
        }]
    }
}

运行npm run build命令时出现此错误：

 ERROR in ./src/app.js
 Module build failed (from ./node_modules/babel-loader/lib/index.js):
 Error: Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd 
 like          
 to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
 at Function.Module._resolveFilename (module.js:548:15)
 at Function.Module._load (module.js:475:25)
 at Module.require (module.js:597:17)
 at require (C:\Users\ABCD\Music\Webpack_Babel prac\node_modules\v8-compile-   
 cache\v8-compile-cache.js:159:20)
 at Object.<anonymous> (C:\Users\ABCD\Music\Webpack_Babel 
 prac\node_modules\babel-loader\lib\index.js:10:11)
 at Module._compile (C:\Users\ABCD\Music\Webpack_Babel prac\node_modules\v8- 
 compile-cache\v8-compile-cache.js:178:30)
 at Object.Module._extensions..js (module.js:664:10)
 at Module.load (module.js:566:32)
 at tryModuleLoad (module.js:506:12)
 at Function.Module._load (module.js:498:3)
 at Module.require (module.js:597:17)

我已经阅读了很多教程，也尝试了这篇中等文章，但是没有任何效果。 https://medium.com/@jeffrey.allen.lewis/the-ultimate-2018-webpack-4-and-babel-setup-guide-npm-yarn-dependencies-compared-entry-points-866b577da6a

常规javascript项目的webpack和babel配置失败

0 个答案: