webpack-dev-server搭建步骤及错误报告

构建步骤

1. 新建文件夹

2. pnpm add webpack webpack-cli

3. pnpm add html-webpack-plugin

4. pnpm add webpack-dev-server

5. 修改 package.json（If you’re using webpack-cli 4 or webpack 5, change webpack-dev-server to webpack serve.）

   {
   	"scripts": {
   		"build": "webpack",
   		"start:dev": "webpack serve"
   	},
   	"dependencies": {
   		"html-webpack-plugin": "^5.3.1",
   		"webpack": "^5.38.1",
   		"webpack-cli": "^4.7.2",
   		"webpack-dev-server": "^3.11.2"
   	}
   }
   

6. 新建 webpack.config.js

   const path = require('path');
   const HtmlWebpackPlugin = require('html-webpack-plugin');
   
   module.exports = {
       entry: './src/index.js',
       mode: "development",
       devServer: {
           open: true
       },
       output: {
           path: path.resolve(__dirname, 'dist'),
           filename: 'bundle.js'
       },
       plugins: [
           new HtmlWebpackPlugin()
       ]
   };
   

7. pnpm run start:dev

容易出现的错误

错误信息

D:\VScode\dj> pnpm run start:dev  

> @ start:dev D:\VScode\dj
> webpack-dev-server

internal/modules/cjs/loader.js:968
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- D:\VScode\dj\node_modules\.pnpm\registry.nlark.com+webpack-dev-server@3.11.2_webpack-cli@4.7.2+webpack@5.38.1\node_modules\webpack-dev-server\bin\webpack-dev-server.js  
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:965:15)
    at Function.Module._load (internal/modules/cjs/loader.js:841:27)
    at Module.require (internal/modules/cjs/loader.js:1025:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (D:\VScode\dj\node_modules\.pnpm\registry.nlark.com+webpack-dev-server@3.11.2_webpack-cli@4.7.2+webpack@5.38.1\node_modules\webpack-dev-server\bi    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\VScode\\dj\\node_modules\\.pnpm\\registry.nlark.com+webpack-dev-server@3.11.2_webpack-cli@4.7.2+webpack@5.38.1\\node_modules\\webpack-dev-server\\bin\\webpack-dev-server.js'
  ]
}
 ERROR  Command failed with exit code 1.

常见的解决方案

我的解决方案

参考资料：Cannot find module ‘webpack/bin/config-yargs’

If you’re using webpack-cli 4 or webpack 5, change webpack-dev-server to webpack serve.

综述：如果使用的是 webpack-cli 4 或者 webpack 5，则不要使用运行脚本 webpack-dev-server，将运行脚本改为为 webpack serve 即可。

最终文件内容

package.json

{
	"scripts": {
		"build": "webpack",
		"start:dev": "webpack-dev-server"
	},
	"dependencies": {
		"html-webpack-plugin": "^5.3.1",
		"webpack": "^5.38.1",
		"webpack-cli": "^4.7.2",
		"webpack-dev-server": "^3.11.2"
	}
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    mode: "development",
    devServer: {
        open: true
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
};