webpack-dev-server React 的问题

Question

我正在阅读一篇关于 Webpack 的文章，我必须启动 Webpack 但我收到错误消息

npm 错误。 代码 ELIFECYCLE npm 错误。 错误号 1 npm ERR：cra-tutorial@1.0.0 构建： webpack npm ERR。 退出状态 1 npm ERR。 npm 错误。 在 cra-tutorial@1.0.0 构建脚本中失败。 npm 错误！ 这可能不是 npm 的问题。 上面可能还有额外的日志记录 output。

npm ERR：此运行的完整日志可在以下位置找到：npm ERR。 C:\Users\suren\AppData\Roaming\npm-cache_logs\2021-01-04T07_14_10_733Z-debug.log

这里还有截图https://ibb.co/sjLKYgX

package.json

{
  "name": "cra-tutorial",
  "version": "1.0.0",
  "description": "link tutorial ",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode=development --open --hot",
    "build": "webpack --mode=production"
  },
  "author": "Suren Zakaryan",
  "license": "ISC",
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1",
    "webpack-dev-server": "^3.11.1"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  }
}

Answer 1

您的屏幕截图显示解析HelloWorld模块时出现问题，因为没有合适的加载器。 你需要安装 Babel 来编译 ES2015 javascript 和 Webpack 来捆绑你的资产。

1. npm install --save-dev @babel/preset-env
2. npm install --save-dev @babel/preset-react
3. 添加.babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

4. 添加webpack.config.js

const path = require('path');
const HWP = require('html-webpack-plugin');
module.exports = {
   entry: path.join(__dirname, '/src/index.js'),
   output: {
       filename: 'build.js',
       path: path.join(__dirname, '/dist')},
   module:{
       rules:[{
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader'
       }]
   },
   plugins:[
       new HWP(
          {template: path.join(__dirname,'/src/index.html')}
       )
   ]
}