首页 > 解决方案 > Require 在 Webpack 中没有定义 %

问题描述

我是 Webpack 的新手。我已经通过https://createapp.dev/ ... 但是当我安装它时,它会引发很多错误,请帮助我......

这是 Webpack 配置文件,请帮帮我..

const webpack = require("webpack")
const path = require('path');

const config = {
  entry: [
    'react-hot-loader/patch',
    './src/index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx'
    ],
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  devServer: {
    contentBase: './dist'
  },
  target:"node"
};

module.exports = config;

这是我的 package.json 文件

{
  "name": "firebase_crud",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "scripts": {
    "clean": "rm dist/bundle.js",
    "build-dev": "webpack --mode development",
    "build-prod": "webpack --mode production",
    "start": "webpack serve --hot --mode development"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hot-loader": "^4.13.0"
  },
  "devDependencies": {
    "webpack": "^5.50.0",
    "webpack-cli": "^4.8.0",
    "@babel/preset-react": "^7.14.5",
    "babel-loader": "^8.2.2",
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@hot-loader/react-dom": "^17.0.1+4.13.0",
    "webpack-dev-server": "^4.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-react": "^7.24.0"
  },
  "engines": {
    "node": "v14.17.3"
  }
}
这是我的终端错误..请帮助我..我是 Webpack 的新手。 终端机或图片

标签: javascriptwebpackwebpack-5

解决方案


您需要从devServer部分中删除contentBase 。在您的屏幕截图中,您可以找到适用于devServer部分的可能选项列表。

devServer的配置在这里:https ://webpack.js.org/configuration/dev-server/

顺便说一句,Webpack4 有contentBase选项 https://v4.webpack.js.org/configuration/dev-server/#devservercontentbase

对于 Webpack5 使用 https://webpack.js.org/configuration/dev-server/#directory


推荐阅读