webpack concepts:
Webpack, by its very nature is a modern JavaScript application of static module packaging (module bundler), when webpack processing applications, it can recursively build a dependency graph (the dependency graph), which contains the application needs to every module, and then all these modules are packaged into one or more bundles,

The usefulness of webpack:
Webpack depend on each other, that can handle the JS file. The whole project is just a main JS,
Webpack can deal with JS compatibility, advanced, browsers can't identify the grammar to low-level, the browser can recognize the syntax of the

webpack basic way of using (need to install the node before use) :
- global installation: the terminal command line input NPM I webpack - g
- the local installation: in the root directory of NPM I webpack - save - project depend on dev installation
- install jquery:
- use NPM to install, first initialization: NPM init - y
- installation: NPM I jquery -s
- import jquery module
- in the main. Js import jquery modules: import $from 'jquery
- the main use webpack. Js package
- webpack. \ SRC \ main js - o. \ dist \ bundles js - mode=development
- open the server, the browser view page: NPM run dev

use webpack dev - server tool to realize the function of the automatic packing compilation:
- run the NPM I webpack - dev - server - D, to install this tool in project local development depend on the
- after the installation, webpack dev - server usage and webpack exactly the same as
- because it is in the project of the local installation webpack - dev - server, so I can't treat it as a script commands run directly in the end, only those who are installed to the global - g tools to the terminal to the normal execution of
- webpack - dev - server to help us generate packaging bundle. The js file is not in the actual physical disk, but managed to computer memory, so we couldn't find in the root directory of the project the packaged good bundle. Js

in webpack. Config. Configured in js

 module. Exports={
//entrance, said to use webpack packaging which files 
Entry: './SRC/main. Js', 
//output file related configuration 
Output: {
Path: the path. The resolve (__dirname, './dist),//packaged specified file, which output to the directory to 
Filename: 'bundle. Js'//specify the output file name 
}, 
Mode: 'development', 
DevServer: {/dev/configuration - server command parameters of the second approach, is troublesome relatively little 
Open: true,//automatically open the browser 
Port: 6000,//set the start time of running port 
ContentBase: path. Join (__dirname, "SRC"),//specify the root directory of the custody 
Hot: true,//hot update 
}, 
Plugins: [
New htmlWebpackPlugin ({//third, create a plug-in in memory to generate HTML page 
The template: path. Join (__dirname, './SRC/index. HTML '),//specify the path to the template page 
Filename: 'index.html' 
}) 
], 
} 

configuration with CSS stylesheet third-party loader
- using the import syntax, import a CSS stylesheet
- webpack default only with packaging JS file types, unable to process other than JS file types l if need to deal with the JS file types, we need to manually install some suitable third-party loader loader
- with packaging the CSS file, need to install CNPM I style - loader CSS - loader - D
- open webpack. Config. Js, a new configuration node, called the module, he is an object, in the object of the module, a rules attribute, the rules property is an array, the array to store all the matching and third party documents processing rules

 module: {//the node is used to configure all the third-party module loader 
Rules: [//all third-party modules matching rules 
{
Test:/\. CSS $/, 
Use: [' style - loader ', 'CSS - loader] 
} 
] 
} 

configuration with less paper loader
Manual installation is suitable for the third party less loader
- CNPM I less - D
- CNPM I less - loader - D
Configuration rules

 module: {//the node is used to configure all the third-party module loader 
Rules: [//all third-party modules matching rules 
{
Test:/\. CSS $/, 
Use: [' style - loader ', 'CSS - loader] 
}, 
{
Test:/\. Less $/, 
Use: [' style - loader ', 'CSS - loader', 'less - loader] 
} 
] 
} 

configuration processing SCSS document loader
Manual installation is suitable for the third party SCSS loader
- CNPM I sass - loader - D
- CNPM I node - sass - D
Configuration rules

 module: {//the node is used to configure all the third-party module loader 
Rules: [//all third-party modules matching rules 
{
Test:/\. CSS $/, 
Use: [' style - loader ', 'CSS - loader] 
}, 
{
Test:/\. Less $/, 
Use: [' style - loader ', 'CSS - loader', 'less - loader] 
}, 
{
Test:/\. SCSS $/, 
Use: [{
Loader: 'style - loader' 
}, {
Loader: 'CSS - loader' 
}, {
Loader: 'sass - loader' 
}] 
} 
] 
} 

CodePudding user response:

Learn to learn, bloggers are severe

CodePudding user response:

I understand it is a process of webpack processing third-party file type: 1, found that the file is not to deal with JS file, go to the configuration file to find the existence of the corresponding rules of third-party LOADER
2, if it finds the corresponding rules, it invokes the Loader to handle this file type
After calling loader, from 3, called
4, when the call to finally no Loader, hand over to webpack packaging processing