webpack-cli加载webpack.config.js失败,找不到html-webpack-plugin

vlf7wbxs  于 2023-08-06  发布在  Webpack
关注(0)|答案(3)|浏览(151)

我试图将我的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,即使它已经安装了
提前感谢你的帮助
我很感激

b5buobof

b5buobof1#

您是否尝试过将节点版本更新为<13版本?应该会有帮助!

j8ag8udp

j8ag8udp2#

我也试过,但我认为我们误解了文档中的某些内容,因为我遇到了与您相同的错误。:D我使用Linux。
我认为这部分是导致您的配置中的错误:

"dev": "webpack --mode development",
"build": "webpack --mode production",
"start": "webpack serve --mode development --open"

字符串
使用“--mode development”或“--mode=development”、“--mode ='development'”等。对我也没用
这是我的启动器(它还没有准备好,但它工作,我希望它能帮助你开始)。
package.json

{
    "name": "xxxxxx",
    "version": "1.0.0",
    "description": "",
    "private": "true",
    "scripts": {
        "start": "webpack serve --open 'google-chrome'",
        "watch": "webpack --watch",
        "prod": "NODE_ENV=production webpack",
        "dev": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@babel/core": "^7.12.17",
        "@babel/preset-env": "^7.12.17",
        "babel-loader": "^8.2.2",
        "clean-webpack-plugin": "^3.0.0",
        "compression-webpack-plugin": "^7.1.2",
        "css-loader": "^5.0.2",
        "html-webpack-plugin": "^5.2.0",
        "mini-css-extract-plugin": "^1.3.8",
        "postcss": "^8.2.6",
        "postcss-loader": "^5.0.0",
        "postcss-preset-env": "^6.7.0",
        "sass": "^1.32.8",
        "sass-loader": "^11.0.1",
        "webpack": "^5.23.0",
        "webpack-cli": "^4.5.0",
        "webpack-dev-server": "^3.11.2"
    },
    "dependencies": {
        "sanitize.css": "^12.0.1"
    }
}


webpack.config.js

// PATH
const path = require("path");
const SRC_DIR = path.resolve(__dirname, "./src");
const DIST_DIR = path.resolve(__dirname, "./dist");

// PLUGIN
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// OTHER ! TODO: const devMode = process.env.NODE_ENV !== 'production';...
let mode = "development";
/**
 * ! Fix for:
 * ! [webpack v5] Error: Universal Chunk Loading is not implemented yet #11660
 * ! https://github.com/webpack/webpack/issues/11660
 * ! chunkLoading: false,
 * ! wasmLoading: false,
 */
var target = "web";

if (process.env.NODE_ENV === "production") {
    mode = "production";
}

module.exports = {
    mode: mode,

    entry: {
        index: SRC_DIR + "/index.js",
    },

    output: {
        path: DIST_DIR,
        //assetModuleFilename: "images/[name][ext][query]",
        chunkLoading: false,
        wasmLoading: false,
    },

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                },
            },
            {
                // For pure CSS - /\.css$/i,
                // For Sass/SCSS - /\.((c|sa|sc)ss)$/i,
                // For Less - /\.((c|le)ss)$/i,
                test: /\.((c|sa|sc)ss)$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                    "sass-loader",
                ],
            },
            /*{
                test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
                // More information here https://webpack.js.org/guides/asset-modules/
                type: "asset",
            },*/
        ],
    },

    devtool: "source-map",

    target: target,

    devServer: {
        contentBase: "./dist",
        hot: true,
    },

    plugins: [
        // Automatically remove all unused webpack assets on rebuild
        // default: true
        new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
        /*new CleanWebpackPlugin(),*/
        new MiniCssExtractPlugin(),
        new HtmlWebpackPlugin({
            template: SRC_DIR + "/index.html",
        }),
    ],
};


Br:Zsolt
===编辑===

$ npx webpack --help=verbose | grep NODE_ENV
  --node-env <value> Sets process.env.NODE_ENV to the specified value
  --optimization-node-env <value> Set process.env.NODE_ENV to a specific value.

$ npx webpack --help=verbose | grep mode
The build tool for modern web applications.
  --mode <value>                                                                     Defines the mode to pass to webpack.


https://nodejs.org/docs/latest-v14.x/api/all.html#process_process_env
我的系统是:

System:
    OS: Linux 5.4

Binaries:
    Node: 14.15.5 - ~/.nvm/versions/node/v14.15.5/bin/node
    npm: 7.5.3 - ~/.nvm/versions/node/v14.15.5/bin/npm

Packages:
    clean-webpack-plugin: ^3.0.0 => 3.0.0 
    compression-webpack-plugin: ^7.1.2 => 7.1.2 
    html-webpack-plugin: ^5.2.0 => 5.2.0 
    webpack: ^5.23.0 => 5.23.0 
    webpack-cli: ^4.5.0 => 4.5.0 
    webpack-dev-server: ^3.11.2 => 3.11.2


或者,您可以执行以下操作:

"scripts": {
"start": "webpack serve --config=config/webpack.dev.js",
"prod": "webpack --config=config/webpack.prod.js",
...
}

zaqlnxep

zaqlnxep3#

如果你使用了这个命令npm webpack init来创建webpack.config.js,对这个说不(你想简化你的包的HTML文件的创建吗?(Y/n))问题,然后使用此命令npm install --save-dev html-webpack-plugin将插件添加到您的webpack配置文件中,之后您应该在node-modules中看到“html-webpack-plugin”

相关问题