我试图将我的webpack从v4版本迁移到v5版本,一切都很顺利,除了当我为live服务器输入npm run start时,我遇到了一个问题[Webpack-cli]说:
[webpack-cli] Failed to load 'C:\Users\user\Desktop\Test_0.3\starter\webpack.config.js' config
[webpack-cli] { Error: Cannot find module 'html-webpack-plugin'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (C:\Users\user\Desktop\Test_0.3\starter\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Object.<anonymous> (C:\Users\user\Desktop\Test_0.3\starter\webpack.config.js:2:25)
at Module._compile (C:\Users\user\Desktop\Test_0.3\starter\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3) code: 'MODULE_NOT_FOUND' }
字符串
下面是我的package.json
文件夹:
{
"name": "starter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"live-server": "^1.2.1"
},
"devDependencies": {
"html-webpack-plugin": "^5.1.0",
"webpack": "^5.22.0",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack serve --mode development --open"
},
"author": "",
"license": "ISC"
}
型webpack.config.js
const path= require('path')
const htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
entry: './src/js/index.js',
output:{
path:path.resolve(__dirname, 'dist'),
filename:'js/bundle.js'
},
devServer:{
contentBase: './dist'
},
plugins:[
new HtmlWebpackPlugin({
filename:'index.html',
template:'./src/index.html'
})
]
}
型
我还有另一个问题,就是webpack-cli
找不到html-webpack-plugin
,即使它已经安装了
提前感谢你的帮助
我很感激
3条答案
按热度按时间b5buobof1#
您是否尝试过将节点版本更新为<13版本?应该会有帮助!
j8ag8udp2#
我也试过,但我认为我们误解了文档中的某些内容,因为我遇到了与您相同的错误。:D我使用Linux。
我认为这部分是导致您的配置中的错误:
字符串
使用“--mode development”或“--mode=development”、“--mode ='development'”等。对我也没用
这是我的启动器(它还没有准备好,但它工作,我希望它能帮助你开始)。
package.json
型
webpack.config.js
型
Br:Zsolt
===编辑===
型
https://nodejs.org/docs/latest-v14.x/api/all.html#process_process_env
我的系统是:
型
或者,您可以执行以下操作:
型
zaqlnxep3#
如果你使用了这个命令
npm webpack init
来创建webpack.config.js,对这个说不(你想简化你的包的HTML文件的创建吗?(Y/n))问题,然后使用此命令npm install --save-dev html-webpack-plugin
将插件添加到您的webpack配置文件中,之后您应该在node-modules中看到“html-webpack-plugin”