what is webpack
It's a packaging tool. Through a series of plug-ins to help you optimize your project, compress, obfuscate, etc. In short, any dirty work can be done.
Getting Started Case
Create a directory and install the two packages webpack and webpack-cli. The webpack package is the webpack body, and the webpack-cli is the toolkit it provides.
mkdir webpack-demo
cd webpack-demo
npm init -y
npm i webpack webpack-cli
The two packages add up to 117 dependent packages installed, which is still very complicated.
added 117 packages in 10s
Below is part of the package contents.
The traditional way of running html and js
Manually create index.html, src directory, index.js, all empty.
index.js:
Write a method and execute this code when html is loaded. _.join() is a method of the js library lodash. The lodash library provides a lot of practical js packages, such as arrays, string enhancements and other functions.
function component() {
const element = document.createElement('div');
// lodash（目前通过一个 script 引入）对于执行这一行是必需的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
index.html:
import lodash library.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>起步</title>
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
Open index.html in the browser. You can see the following results. This is our normal process of writing html and js.
//This step is irrelevant and can be omitted.
Configure package.json: delete the "main": "index.js" line. If private is true, the project cannot be published, in order to prevent mis-publishing.
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
//删除这行.......................
"main": "index.js",
//添加这行
"private": true,
//..........................
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2"
}
}
Problems with traditional methods
Isn't the traditional way very normal? What is the problem? In development, we will introduce a lot of js files and css files, and a page may have dozens of such small files. Every file is requested to the server. This is a very large burden on the server.
So how to solve it? Of course, use webpack. Webpack can help us combine multiple js files into one or several js files, and the same is true for css. There is no need to worry about whether the name will be repeated, webpack has already handled it for us. Not only that, webpack will also delete unnecessary spaces, comments and other things to reduce the size.
Processing js with webpack
We add the following sentence at the beginning of the previous index.js.
Import lodash variables through the import syntax. After writing this line, webpack will automatically load lodash for us, so we don't need to import it manually.
import _ from "lodash"
The original script that imports lodash is useless and can be deleted directly. It is useless to introduce src/index.js, webpack will execute src/index.js by default.
Even, the entire index.html is useless and can be deleted.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>起步</title>
<!-- <script src="https://unpkg.com/[email protected]"></script> -->
</head>
<body>
<!-- <script src="./src/index.js"></script> -->
</body>
</html>
Then we manually create a dist directory and the dist/index.html file.
The content of dist/index.html is as follows:
a main.js is introduced. This main.js will be automatically generated by webpack later, and it is introduced in advance now.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>起步</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
Execute webpack for packaging.
npx webpack
You can see that a main.js is indeed generated under the dist directory
Inside is a bunch of codes that are difficult to understand. This code is the code packaged by webpack.
Run dist/index.html to see the result below.
configuration file for webpack
Create a webpack.config.js file, the location can be arbitrary, the name can also be arbitrary, but generally it is placed in the position shown in the picture below, and it is also called this name by default.
You need to use the path library of node. The default configuration is the same as what we did not write above.
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
Run webpack according to the configuration by the following command.
npx webpack --config webpack.config.js
The result of the operation is the same as before. More configuration will be discussed later.
In fact, the following paragraph can be omitted, and the webpack.config.js in the root directory will be read by default.
--config webpack.config.js
package.json configuration to run webpack quickly
Add a build script to the scripts node of package.json.
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
}
Now you can quickly run webpack with the following command.
When the operation is very complicated, the following commands are very useful.
npm run build
If you have used vue, vue's package.json also has a similar configuration. It's just that he calls vue-cli-service. In fact, the bottom layer of vue-cli-service calls webpack for packaging. Of course, it also does many other things. If you check the package of vue-cli-service, you will find that there is also a file called webpack.config.js. The contents of the vue-cli-service package are still very complicated. We only need to know that the bottom layer of Vue is also packaged with webpack.
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
}
