webpack-cli 无法加载 webpack.config.js 并且找不到 html-webpack-plugin

Question

I'm trying to migrate my webpack from the v4 version to the v5 everything went ok except when I typed npm run start' for the live server I got a problem with the [Webpack-cli] saying:

[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' }

here is my package.json folder:

    {
  "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"
}

the 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'
        })
    ]
}

also I have another problem which is webpack-cli couldn't find the html-webpack-plugin even though it's installed as you see

thanks for your help in advance

I appreciate it

Answer 1

I tried that too, but I think we misunderstood something in the documentation, because I ran into the same error as you. :DI use Linux.

i think this part is causing the error in your configuration:

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

With "--mode development" or "--mode=development", "--mode='development'" etc. didn't work for me either.

Here is my starter (it's not ready yet, but it works, I hope it helps you get started).

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

===Edited===

$ 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

My system is:

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

Or you can do this to:

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

Answer 2

Have you tried updating your node version to version <13? It should help!