Foreword: I recently practiced configuring webpack, and recorded the dumbfounding BUG experience encountered in the process
1. Partial installation cannot start the webpack command in the project file directory
Because it is a demo exercise, with the idea of saving memory, it is partially installed [email protected] and scaffolding [email protected].
So when running the dos command in the project root directory, webpack cannot be found! In general, the dependencies of partial installation can only be started in the .bin folder under \node_modules in the project root directory.
There are three solutions to run webpack directly in the project root directory:
Method 1. Install webpack globally (occupies memory, this method is crossed out)
Method 2. Configure in Computer-Advanced Settings-Environment Variables-User Environment Variables or System Environment Variables-Path, and the address of the .bin folder under the webpack project dependency.
Method 3. Copy the webpack.cmd file in the .bin directory to the project root directory, and modify the endLocal & goto path in it.
The following reference articles for specific logic are of great teaching significance! Thoroughly understand and resolve 'webpack' is not an internal or external command, nor is it an operable program or batch file 
https://blog.csdn.net/weixin_44135121/article/details/90513634
I will briefly describe it here: In the cmd file, there is such a string of codes:
%~dp0…\webpack\bin\webpack.jsHere " %dp0% " represents the cmd file itself, ...\ represents the fallback to the upper-level directory (that is, the directory where the .bin file is located), and the latter is to find the webpack.js file in the bin folder under the webpack folder.
Normally, run webpack -v in the bin folder to check whether webpack is installed successfully. You can find the webpack version number. If you want to run it in the root directory of the project, you can copy the webpack.cmd file in the bin directory to the root directory of the project, and modify The path information, as follows:
%dp0%\node_modules\webpack\bin\webpack.jsAfter the modification is completed, you can open cmd in the root directory of the project, and happily npm run build~
Second, the project naming is not standardized, resulting in an error.
After the partial installation of webpack, configure the entry and exit, and run the dos command npm run build in the small black window of cmd
Error message: webpack is not an internal or external command. The reason is that special symbols such as &/< > / \ | : * ? appear in the project file name, and Node cannot find the file when parsing the file path.
This error is due to the & symbol appearing in the project directory
3. Errors caused by wrong writing of configuration item attributes in webpack.config.js
There are import and export configurations in webpack, which are const path = require('path'), which means to import node built-in module path to process file paths.
It is exported as module.exports, which is an object, which contains five core configurations of webpack, namely: entry, exit, loader, plug-in, and mode.
Corresponding attribute names: entry, output, module, plugins, mode
4. Because I am used to using yarn, when switching back to npm, the build always forgets to add run
Correct command: npm run build or yarn build
In fact, the prompt is quite obvious, npm run build # run the "build" package script, that is, use npm run build to start the build in your package management script.
When building, we agree on the so-called package startup keyword. Generally, when we build a webpack project, we modify the configuration in scripts in the package management file "package.json" of npm init.
