Webpack - npm 運行啟動和構建不起作用？

Question

我習慣於使用create-react-app創建 React 項目，但我決定創建一個沒有它的項目，但我被困在webpack配置中，因為我是新手：

這是我的package.json文件：

{
  "name": "package.json",
  "version": "1.0.0",
  "description": "Demo",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "babel-loader": "^8.1.0",
    "css-loader": "^5.0.0",
    "html-webpack-plugin": "^4.5.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "server": "^1.0.30",
    "style-loader": "^2.0.0",
    "webpack": "^5.2.0",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^3.11.0"
  }
}

webpack.config.js文件：

const path = require('path');
const HTMLplugin = require('html-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


const rules = [
    {
        test: /\.js$/,
        exclude: /node-modules/,
        use: {
            loader: 'babel-loader'
        }
    },
    {
        test: /\.css$/,
        exclude: /node-modules/,
        use: ['style-loader', 'css-loader']
    }
]

module.exports = {
    entry: path.join(__dirname, 'src', index.js),
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, '/build')
    },
    module: {rules},
    plugins: [
        new HtmlWebpackPlugin({template: './public/index.html'})
    ]
}

.babelrc.json 文件：

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

這是我的整個項目文件夾和文件樹：

當我運行npm run start或npm run build時，它失敗了：

使用npm run start ，我收到此錯誤：

internal/modules/cjs/loader.js:968
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- C:\Users\saher\Desktop\New folder\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (C:\Users\saher\Desktop\New folder\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'MODULE_NOT_FOUND',

使用npm run build ：

[webpack-cli] ReferenceError: index is not defined

我是 webpack 的新手，我不知道問題出在哪里，我想我已經安裝了使其工作所需的所有文件和配置，那么問題到底在哪里？

Answer 1

我認為問題是，你寫的索引沒有字符串引號。

entry: path.join(__dirname, 'src', index.js)

這應該是

entry: path.join(__dirname, 'src', 'index.js')

當您在沒有字符串引號的情況下編寫時，它就像一個變量。 您可以在 console.log 上嘗試同樣的操作。

因為未定義索引。

Answer 2

有一個公開的錯誤報告指出 webpack-server 3.11 與 webpack-cli v4 不兼容。

該報告可在此處找到：第 2759 期

是 - webpack-dev-server 不適用於 webpack-cli v4

評論鏈接： https://github.com/webpack/webpack-dev-server/issues/2759#issuecomment-706668920

解決方案是通過更改為兼容版本來修改您的project.json文件（歡迎使用 Webpack:-)）

Answer 3

"main": "index.js" in package.json應該是"main": "src/index.js"