Webpack build project process
1. What is webpack?
Webpack is a front-end project construction tool developed based on nodejs. Running webpack needs to be based on the nodejs environment. You cannot install webpack without installing node.
2. What does webpack do?
Webpack can solve 1. The problem of slow web page loading caused by the introduction of static files and sending many secondary requests 2. It can solve the intricate dependencies between files (js files can be introduced in js files) 3. Compressed files and pictures can be merged to solve Complex dependencies between various packages.
3. How to use webpack?
1. How to install webpack: 1. Global installation 2. Local installation of the project, generally not global installation, because the version cannot be locked
2.
Building the project folder 3. Webpack can solve the problem of slow loading speed caused by the introduction of many static files, so it is not after using webpack Many static css and js files are introduced into index.html, only one entry file main.js needs to be introduced, and all static files can be imported in the entry file, which greatly increases the loading speed of the web page.
4. In the entry file main.js, you can import related files through the syntax of the es6 import module, such as import $ from "jquery" to import the jquery package, or use the syntax const $ = require("jquery") to import the module in nodejs. , Because webpack is based on the nodejs environment.
5. At this time, the browser will report an error that it cannot parse the import grammar. Since the browser cannot parse the advanced grammar of es6, it needs to use webpack for packaging processing. At this time, you can run the command in the terminal: the path file that webpack needs to process Rename the processed file and put it into the specified file. Instruction: webpack ./src/main.js ./dist/bundle.js, and then import the processed files into the index.html file.
6. There is a defect that you need to re-run the package every time you modify the file The instruction packs the modified file. In order to solve the repeated packaging process, we can create a webpack.config.js file in the root directory, and configure the entry object (packaged file path) and the export output object ( The packaged files and which directory to output to), after configuration, we only need to run webpack in the terminal to modify the files.
7. Since this way of packaging and compiling requires running the webpack command all the time, we need to use the webpack-dev-server tool to realize the automatic packaging and compiling function. Run webpack-dev-server -D to install. After installation, execute webpack-dev-server and find that it cannot be run directly in the terminal as a script command (only those tools installed in the global -g can be executed normally in the terminal), if you need to run it For this local command, we need to configure "dev" in the package file: "webpack-dev-server" and run npm run dev to achieve it. Note that this tool webpack-dev-server needs to be installed locally to run normally. The bundle.js file generated by the webpack-dev-server tool for us to package and generate is placed in the memory root path by default, and we cannot see this file.
4.Webpack commonly used command parameters
Set in the package.json folder:
-open is the default to open the browser automatically
-port 3000 is to modify the port number to 3000
-contentBase src is the displayed content with src as the root path
-hot is the function of hot reload and hot update It is to reduce unnecessary code updates. Each time the modified content is directly applied in the form of a patch, there is no need to update all the content again. Using --hot at the same time can realize the browser's hot reload without refreshing, but it is invalid for js code and effective for css style.
5. The second way of webpack-dev-server configuration commands
Configure in webpack.config.js
6webpack plugin
How to store the index.html file in memory? Since the reading and writing speed of the disk is far lower than the loading speed of the memory, we store the files in the memory.
Step 1:
Run cnpm i html-webpack-plugins -D to install the plug-in locally in the project.
Step 2:
Import the plug-in of the html page generated in the memory. As long as it is a plug-in, it must be placed in the plugins node.
When using html-webpack-plugin, we don't need to manually process the reference path of bundle.js, because this plugin has automatically created a suitable script for us and quoted the correct path.
This plug-in has two functions: 1. Automatically generate a memory page based on the specified page in the memory. 2. Automatically append the packaged bundle.js to the page.
7.css third-party loader
Use import syntax to import css style sheet
import'./ css/ index.css' in the mian.js file.
Since webpack can only package and process js-type files by default, it cannot process other non-js-type files, so non-js-type files must be processed File, we need to manually install some suitable third-party loader loader.
Step 1:
If you want to package and process css files, you need to install cnpm i style-loader css-loader -D.
Step 2:
Open webpack.config.js. Configuration file, add a configuration node called module, which is an object; on the module object, there is a rules attribute, which is an array; this array stores the matching and processing rules of all third-party files ;
Loader calling process:
1. Find that the file to be processed is not a js file, then go to the configuration file to find out whether there is a third-party loader rule
2. If the corresponding rule can be found, the corresponding loader will be called to process this file Type;
3. When the loader is called early, it is called from back to front;
4. When the last loader is called, the processing result will be directly delivered to webpack for packaging and merging, and finally output to bundle.js
less third-party loader
Step 1:
Create index.less file in css file in src
Import index.less file import'./css/index.less' and
run cnpm i less-loader -D install less third-party loader
cnpm i less -D install Less
second step:
matching rules
scss third-party loader
Step 1:
Create index.scss file in css file in src
Import index.scss file import'./css/index.scss'
Run cnpm i sass-loader -D install sass third-party loader
cnpm i node-sass- D
Second step of installing sass :
matching rules
url-loader
By default, webpack cannot handle URL addresses in css files, whether it is a picture or a font library, as long as it is a URL address.
At this time, we need to install a third-party loader
cnpm i url-loader file-loader -D
