[英]Module not found: Error: Can't resolve 'HtmlWebpackPlugin' in
我在使用html-webpack-plugin
遇到問題。 我正在學習React,我需要使用html-webpack-plugin,但是當我在開發者模式下運行時,出現了這個錯誤:
Error: Child compilation failed:
Module not found: Error: Can't resolve 'HtmlWebpackPlugin' in '/home/paolo/develop/react-shop'
ModuleNotFoundError: Module not found: Error: Can't resolve 'HtmlWebpackPlugin' in '/home/paolo/develop/ react-shop'
at /home/paolo/develop/react-shop/node_modules/webpack/lib/Compilation.js:2016:28
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:798:13
at eval (eval at create (/home/paolo/develop/react-shop/node_modules/tapable/lib/HookCodeFactory.js: 33:10), :10:1)
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:270:22
at eval (eval at create (/home/paolo/develop/react-shop/node_modules/tapable/lib/HookCodeFactory.js: 33:10), :9:1)
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:541:15
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:116:11
at /home/paolo/develop/react-shop/node_modules/webpack/lib/NormalModuleFactory.js:612:8
at /home/paolo/develop/react-shop/node_modules/neo-async/async.js:2830:7
at done (/home/paolo/develop/react-shop/node_modules/neo-async/async.js:2925:13)
- Compilation.js:2016
[react-shop]/[webpack]/lib/Compilation.js:2016:28
- NormalModuleFactory.js:798
[react-shop]/[webpack]/lib/NormalModuleFactory.js:798:13
- NormalModuleFactory.js:270
[react-shop]/[webpack]/lib/NormalModuleFactory.js:270:22
- NormalModuleFactory.js:541
[react-shop]/[webpack]/lib/NormalModuleFactory.js:541:15
- NormalModuleFactory.js:116
[react-shop]/[webpack]/lib/NormalModuleFactory.js:116:11
- NormalModuleFactory.js:612
[react-shop]/[webpack]/lib/NormalModuleFactory.js:612:8
- async.js:2830
[react-shop]/[neo-async]/async.js:2830:7
- async.js:2925 done
[react-shop]/[neo-async]/async.js:2925:13
- child-compiler.js:169
[react-shop]/[html-webpack-plugin]/lib/child-compiler.js:169:18
- Compiler.js:551 finalCallback
[react-shop]/[webpack]/lib/Compiler.js:551:5
- Compiler.js:577
[react-shop]/[webpack]/lib/Compiler.js:577:11
- Compiler.js:1196
[react-shop]/[webpack]/lib/Compiler.js:1196:17
- Hook.js:18 Hook.CALL_ASYNC_DELEGATE [as _callAsync]
[react-shop]/[tapable]/lib/Hook.js:18:14
- Compiler.js:1192
[react-shop]/[webpack]/lib/Compiler.js:1192:33
- Compilation.js:2787 finalCallback
[react-shop]/[webpack]/lib/Compilation.js:2787:11
- Compilation.js:3092
[react-shop]/[webpack]/lib/Compilation.js:3092:11*
`
我已經安裝了插件。 這是我的 webpack 配置:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
mode: 'development',
resolve: {
extensions: [ '.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.html$/,
use: {
loader: 'HtmlWebpackPlugin',
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
filename: './index.html'
})
]
}
這是我的 package。
{
"name": "react-shop",
"version": "1.0.0",
"description": "react eshop",
"main": "src/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve --open",
"build": "webpack --mode production"
},
"keywords": [
"react",
"javascript"
],
"author": "Josue Quichca <josuelml28@hotmail.com>",
"license": "MIT",
"dependencies": {
"@babel/core": "^7.20.2",
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^9.1.0",
"html-loader": "^4.2.0",
"html-webpack-plugin": "^5.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^4.11.1"
}
}
我在學習。 請幫忙!
試試這個:
rm -rf node_modules
npm cache clean -f
npm i html-webpack-plugin --save-dev
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.