Webpack - npm run start 和 build 不起作用？

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 不兼容。

报告可以在这里找到：Issue 2759

是的 - webpack-dev-server 不适用于 webpack-cli v4

评论链接：https://github.com/webpack/webpack-dev-server/issues/2759#issuecomment-706668920

解决方案是通过更改为兼容版本来修改您的 project.json 文件（欢迎使用 Webpack :-)）

Answer 3

package.json 中的"main": "index.js" 应该是"main" : "src/index.js"