Webpack 中未定义要求 %
Require is not defined in 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 的新手。
terminal eroor pic
您需要从 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
我是 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"
}
}
您需要从 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