A new elementary school girl from the department came to me and wanted to learn webpack to help her boyfriend do the project, so that her boyfriend would have time to accompany her. Although I was very busy, I still put down my work and started building such a project. The process is recorded as follows :
1. Preparation
I assume that you have installed node.js and your network is in a smooth state
2. Initialize the project
1. Create a folder, and all future operations will be performed in this folder
-Created in the folder
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
1213212313
</div>
<script src="/dist/main.js"></script>
</body>
</html>
// webpack.config.js
var path = require('path');
var config ={
entry:{
main:"./main"
},
output:{
path:path.join(__dirname,'./dist'),
publicPath:'/dist/',
filename:'main.js'
}
}
module.exports = config;
其他文件 , src main.js和index.js暂时是空文件
2. Open a terminal and use the npm init command to initialize the project and generate the package.json file
{
"name": "fordemoone",
"version": "1.0.0",
"description": "learn notes",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --config webpack.config.js"
},
"author": "郑文浩",
"license": "ISC",
"devDependencies": {
}
}
The file you get at this time may be like this, but this is actually just the beginning
3. Officially began to install three important dependencies
"webpack"
"webpack-cli"
"webpack-dev-server"
- The first is npm install webpack --save -dev
followed by npm install -g webpack-dev-server
Finally, download the npm run -D webpack-cli
package file at this time has changed
{
"name": "fordemoone",
"version": "1.0.0",
"description": "learn notes",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --config webpack.config.js"
},
"author": "郑文浩",
"license": "ISC",
"devDependencies": {
"webpack": "^5.24.2",
"webpack-cli": "^4.5.0",
"webpack-dev-server": "^3.11.2"
}
}
Ordinarily, it should be possible to start the project through npm run dev at this time,
but an error was reported when starting. This error is very simple, it is a version problem
Found a solution elsewhere
If you upgrade webpack to 5. *, and webpack cli to 4. *, an error will be reported:
Error: Cannot find module ‘webpack-cli/bin/config-yargs’
Temporary solution: Back off webpack cli to version 3. * for example:
"Webpack-cli": "^ 3.3.12"
so we need to uninstall and reinstall the lower version of webpack-cli, execute
npm uninstall webpack-cli
npm install webpack-cli@3 -D
modified package.json
{
"name": "fordemoone",
"version": "1.0.0",
"description": "learn notes",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --config webpack.config.js"
},
"author": "郑文浩",
"license": "ISC",
"devDependencies": {
"webpack": "^5.24.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
}
}
Then restart the npm run dev project to start successfully
4 To sum up, although the process written above seems to be smooth, the author also encountered many problems during the installation process. The only experience that the bloggers have come over is to dare to try and be good at identifying some high-quality ones. The tutorial, avoiding detours, let us start to doubt our IQ. Fortunately, I finally completed the task. I think that the school girl can get off work early tomorrow and play with her boyfriend happily. I feel so relieved.
