Блог

Я пытаюсь перенести свой веб-пакет с версии v4 на версию v5, все прошло нормально, за исключением того, что когда я набрал npm run start’ для текущего сервера, у меня возникла проблема с [Webpack-cli], говорящим:

 [webpack-cli] Failed to load 'C:UsersuserDesktopTest_0.3starterwebpack.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:UsersuserDesktopTest_0.3starternode_modulesv8-compile-cachev8-compile-cache.js:159:20)
    at Object.<anonymous> (C:UsersuserDesktopTest_0.3starterwebpack.config.js:2:25)
    at Module._compile (C:UsersuserDesktopTest_0.3starternode_modulesv8-compile-cachev8-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"
}
 

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

также у меня есть другая проблема, которая webpack-cli не может найти html-webpack-plugin , хотя она установлена, как вы видите

заранее спасибо за помощь

Я ценю это

Вы пытались обновить версию своего узла до версии <13? Это должно помочь!

Я тоже пробовал это, но я думаю, что мы что-то неправильно поняли в документации, потому что я столкнулся с той же ошибкой, что и вы. : 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",
...
}