-
Background: Today I want to use Webpack to build a development environment for fun.
-
Project progress when errors are found:
-
Webpack configuration file ' 'mode: process.env.node_env === 'production'? 'production' : 'development', entry: './src/app.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, devtool:'source-map', plugins: [ new HtmlWebpackPlugin({ template:path.join(__dirname, './public/index.html') , filename:'index.html', inject:true }), new CopyPlugin({ patterns: [ { from: path.join(__dirname, './public/favicon.ico'), to: path.join(__dirname, './dist') } ] }), ], devServer: { contentBase: path.join(__dirname, './dist'), compress: true, port: 8080 } ```Copy the code
-
"DevDependencies ": {"copy-webpack-plugin": "^6.0.0", "html-webpack-plugin": "^ 4.5.2 webpack - dev -", "server" : "^ 3.11.2", "webpack" : "^ 4.46.0", "webpack - cli" : "4.6.0} ` ` `Copy the code
-
-
OK, look at the current schedule run ` NPX webpack dev - server ` command's error message ` ` ` internal/modules/CJS/loader. The js: 896 throw err; ^ Error: Cannot find module 'webpack-cli/bin/config-yargs' Require stack: - F:\phpStudy\PHPTutorial\WWW\nodejs\0-lagou-admin\frontend\node_modules\webpack-dev-server\bin\webpack-dev-server.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:893:15) at Function.Module._load (internal/modules/cjs/loader.js:743:27) at Module.require (internal/modules/cjs/loader.js:965:19) at require (internal/modules/cjs/helpers.js:88:18) at Object.<anonymous> (F:\phpStudy\PHPTutorial\WWW\nodejs\0-lagou-admin\frontend\node_modules\webpack-dev-server\bin\webpack-dev-server.js:65: 1) at Module._compile (internal/modules/cjs/loader.js:1076:30) at Object.Module._extensions.. js (internal/modules/cjs/loader.js:1097:10) at Module.load (internal/modules/cjs/loader.js:941:32) at Function.Module._load (internal/modules/cjs/loader.js:782:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) { code: 'MODULE_NOT_FOUND', requireStack: [ 'F:\\phpStudy\\PHPTutorial\\WWW\\nodejs\\0-lagou-admin\\frontend\\node_modules\\webpack-dev-server\\bin\\webpack-dev-ser ver.js' ] } ```Copy the code
-
The following error information is displayed: Error: Cannot find module ‘webpack-cli/bin/config-yargs’ Node_modules \webpack-dev-server\bin\webpack-dev-server.js Sure enough, there is a comment on line 55
- Well, it depends on the package version change generated by the bug, at this time my
webpack-cli
The version is 4.6.0. The rollback to 3.3.12 is running properly - Some of you need it recently
webpack
With the development environment here can pay attention to avoid wasting unnecessary development time ~