[webpack-cli] TypeError [ERR_INVALID_ARG_TYPE]：“path”参数必须是字符串类型。在 getFullTemplatePath (D) 的 Object.resolve (node:path:171:9) 的 validateString (node:internal/validators:163:11) 处的 new NodeError (node:internal/errors:399:5) 处接收到数组的`实例:\学习\Webpack ode_modules\html-webpack-plugin\index.js:1028:66) 在 hookIntoCompiler (D:\Study\Webpack ode_modules\html-webpack-plugin\index.js:174:22) 位于 D:\Study\Webpack ode_modules\html-webpack-plugin\index.js:104:9 位于 D:\Study\Webpack 的 Array.forEach (
) ode_modules\html-webpack-plugin\index.js:103:20 at Hook.eval [as call] (eval at create (D:\Study\Webpack ode_modules apable\lib\HookCodeFactory.js:19:10), :7:1) 在 Hook.CALL_DELEGATE [as _call] (D:\Study\Webpack ode_modules apable\lib\Hook.js:14:14) { 代码: 'ERR_INVALID_ARG_TYPE' }
我尝试更新：webpack-cli，但不起作用
我的 webpack.config.js
Hi everyone, i didn't catch where do I find a solution to this problem
const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
const TerserWebpackPlugin = require("terser-webpack-plugin")
const isDev = process.env.NODE_ENV === 'development'
const isProt = !isDev
const optimization = () => {
const config = {
splitChunks: {
chunks: 'all'
}
}
if (isProt) {
config.minimizer = [
new CssMinimizerPlugin(),
new TerserWebpackPlugin()
]
}
return config
}
const filename = ext => isDev ? `[name].${ext}` : `[name].[hash].${ext}`
const cssLoaders = extra => {
const loaders = [
{
loader: MiniCssExtractPlugin.loader
},
'css-loader'
]
if (extra) {
loaders.push(extra)
}
return loaders
}
module.exports = {
context: path.resolve(__dirname, 'src'),
mode: 'development',
entry: {
main: ['@babel/polyfill', './index/js'],
analytics: './analytics.js'
},
output: {
filename: filename('js'),
path: path.resolve(__dirname, 'dist'),
},
resolve: {
extensions: ['.js','.json','.png']
},
optimization: optimization(),
devServer: {
port: 4200,
hot: true
},
plugins: [
new HTMLWebpackPlugin({
template: ['./index.html'],
minify: {
collapseWhitespace: isProt
}
}),
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns:[
{
from: path.resolve(__dirname, 'src/favicon.ico'),
to: path.resolve(__dirname, 'dist')
}]
}),
new MiniCssExtractPlugin({
filename: filename('css')
})
],
module: {
rules: [
{
test: /\.css$/,
use: cssLoaders()
},
{
test: /\.less$/,
use: cssLoaders('less-loader')
},
{
test: /\.(sass|scss)$/,
use: cssLoaders('sass-loader')
},
{
test: /\.(png|jpg|svg|gif)$/,
type: 'asset/resource'
},
{
test: /\.(ttf|woff|woff2|eot)$/,
use: ['file-loader']
},
{
test: /\.xml$/,
use: ['xml-loader']
},
{
test: /\.csv$/,
use: ['csv-loader']
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
}
My package.json
{
"name": "webpack",
"version": "1.0.0",
"description": "webpack practise",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack --mode development",
"build": "cross-env NODE_ENV=production webpack --mode production",
"watch": "cross-env NODE_ENV=development webpack --mode development --watch",
"start": "cross-env NODE_ENV=development webpack-dev-server --mode development --open"
},
"browserslist": "> 0.25%, not dead",
"keywords": [
"js",
"javascript",
"webpack"
],
"author": "V.B",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/preset-env": "^7.21.4",
"babel-loader": "^9.1.2",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^11.0.0",
"cross-env": "^7.0.3",
"css-loader": "^6.7.3",
"css-minimizer-webpack-plugin": "^5.0.0",
"csv-loader": "^3.0.5",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"less": "^4.1.3",
"less-loader": "^11.1.0",
"mini-css-extract-plugin": "^2.7.5",
"node-sass": "^8.0.0",
"papaparse": "^5.4.1",
"sass-loader": "^13.2.2",
"style-loader": "^3.3.2",
"terser-webpack-plugin": "^5.3.7",
"webpack": "^5.80.0",
"webpack-cli": "^5.0.2",
"webpack-dev-server": "^4.13.3",
"xml-loader": "^1.2.1"
},
"dependencies": {
"@babel/polyfill": "^7.12.1",
"jquery": "^3.6.4",
"normalize.css": "^8.0.1"
}
}
我不明白如何找到这个数组，以及如何修复它，StackOverflow 上的每个帖子都非常接近，但不是它
从 html-webpack-plugin#options 文档中，我们知道
templatestring看一下源码，
templatepath.resolve(context, resolve)webpack.config.jsconst path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
module: {
rules: [
{
test: /\.(?:js|mjs|cjs)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', { targets: "defaults" }]
]
}
}
}
],
},
plugins: [
new HTMLWebpackPlugin({
// template: ['./index.html'],
template: './index.html'
})
]
};
套装版本：
"html-webpack-plugin": "^5.5.1",
"webpack": "^5.80.0",
"webpack-cli": "^5.0.2"
如果有人偶然发现这一点并使用 webpack，则可能还安装了依赖项 babel - 在我的情况下，babel 包的版本已关闭，它是 7.25.7 但在我的情况下它需要be 7.25.2 - 这已经是一个旧项目了，因此我遇到了这些问题。也许它对某人有帮助:)