What does Webpack do?
- Module packaging
- According to the dependencies of the dependency diagram, the files of different modules are packaged together, and the references between them are correct, and the execution is orderly.
- Compile the compatible
- The webpack
loader
Mechanisms can compile transformations.less, .vue, .jsx
Such as browser can not recognize the format of the file, improve development efficiency
- The webpack
- Ability to expand
- The webpack
Plugin
On the basis of modular packaging and compiler compatibility, load on demand is extended to solve other things that loader cannot implement, such as actual listening, etc.
- The webpack
A few key concepts for Webpack
- Entry: Entry files, which can be one or more Entry files, indicate which modules WebPack should use as a starting point for building dependency diagrams
- Output: output file that tells WebPack where to print what it has createdbundleAnd how do you name these files
- Loaders: Loaders, essentially functions that receive resource files for conversion and return new files
- Plugins: Plugins, extensions, event listening, etc
- Mode: mode by selection
development
.production
或none
One of them, to set up the environment
Modular packaged running processes?
Q: How does WebPack put these modules together and make them work? First you need to understand the webPack packaging process:
- Initialization parameter
- read
webpack
Configuration parameters of;
- read
- Begin to compile
- Start the
webpack
To createCompiler
Object and startparsingThe project;
- Start the
- Determine the entrance
- Slave file
entry
Start parsing, build the dependency graph of its import file, recursive analysis to form a dependency tree;
- Slave file
- Compiling templates
- Use corresponding for dependent module files of different file types
Loader
Compile, and finally convertJavascript
File;
- Use corresponding for dependent module files of different file types
- Complete template compilation and output
- According to the dependencies between the entry files, a code block is formed
chunk
, will form a code blockchunk
Output to the file system
- According to the dependencies between the entry files, a code block is formed
Note: In the whole packaging process, the plugin listens to the event node and performs the plug-in task to achieve the purpose of intervening the output result.
In Webpack source code, file parsing and construction mainly rely on compiler and Compilation two core object implementation.
The dependencies between each module depend on the AST syntax tree, through which the module can be analyzed whether there are other dependent modules, and then continue to cycle the compilation and parsing of the next module. The final bundle packaged by Webpack is an IIFE execution function.
Complier is different from compilation
The Compiler object is a global singleton that controls the entire WebPack build process. Complier objects expose the entire webPack lifecycle of the hook, is the product of webPack initialization parameters, including options, entry, plugins and other properties can be easily understood as an instance of WebPack.
The compilation object is a context object for each build, an instance of Complier, and a life cycle object for each WebPack build. It contains all the information needed for the build, and with each hot update and rebuild, compiler regenerates a new compilation object that takes care of the build process for the update. Summary: Both objects have their own lifecycle hooks. Compiler objects are objects for the entire Webpack lifecycle hooks from start to close. The compilation object is responsible for smaller-grained lifecycle hooks that simply represent a new compilation.
Have you written Loader? How to write loader?
Loader configuration information
Loader in webpack is a function that converts the matched content and returns the converted result. It can be seen from the configuration that Loader supports multiple configurations in the form of arrays. Loader supports chained invocation, which is executed from bottom to top and from right to left. In order to ensure the normal operation of loader, the development needs to follow some specifications, for example, the return value must be the standard JS code string; Follow the “single responsibility “(that is, a Loader only needs to perform one transformation) and only care about the output of the Loader and its corresponding output.
module.exports = {
module: {
rules: [{test: /.css$/, use:['style-loader'.'css-loader']},// From right to left, the file processed by 'css-loader' is returned to the file processed by 'style-loader'
{ test: /.ts$/, use: 'ts-loader'},],}};Copy the code
To summarize the idea of writing loader:
The essence of Loader is a function, and the this context of loader function is provided by Webpack. Therefore, we cannot set Loader as an arrow function. We can obtain various information data required by the current Loader through the relevant properties provided by this object. The job of the loader function is to get the original content before processing, perform processing on the original content, return the processed content. See the reference documentation for details: Webpack Principles – Writing loaders and Plugins
Common loader
- Loader for style classes:
css-loader, style-loader, less-loader
Etc. - Loader for file classes:
url-loader, file-loader
And so on. - Loader to compile classes:
babel-loader, ts-loader
Etc. - Check test class loader:
eslint-loader, jslint-loader
Etc.
Have you written a Plugin? What is the idea of writing a Plugin?
Plugin configuration information
Plugins are classes, and WebPack provides plugins with a number of built-in apis. During the life cycle of WebPack, plugins broadcast many events, and plugins can listen for these events and change the output results when appropriate through the API provided by WebPack. The Apply (compliers) function needs to be defined on the prototype. Also specify the Webpack hook to mount.
The basic Plugin code looks like this:
class MyPlugin {
// Get the configuration passed in by the user to the plug-in in the constructor
constructor(params){}// WebPack will call the apply method of MyPlugin instance after initializing the parameter, passing the plugin a Complier object.
apply(complier){
// Bind the hook event
// complier.hooks.emit.tapAsync()
compiler.plugin('emit'.compilation= >{})}}module.export = MyPlugin / / export Plugin
Copy the code
When using this Plugin, the configuration code is as follows:
const MyPlugin = require('./MyPlugin.js');
module.export = {
plugins:[
new MyPlugin(options),
]
}
Copy the code
After Webpack is started, a new MyPlugin(options) is executed to initialize a MyPlugin instance during the configuration reading process. After initializing the Compiler object, the instance method myPlugin.apply(Compiler) is called to pass the compiler object to the plug-in instance. Once the compiler object is acquired, the plug-in instance can listen for events broadcast by Webpack through compiler.plugin(event name, callback function). The Compiler object can also be used to manipulate Webpack.
Summarize the idea of writing Plugin:
- Write a
JavaScript
Named functions. - Define one on its prototype
apply
Methods. - In application method
apply()
Specified inwebpack
Event hookscomplier.hooks.
. - To deal with
webpack
Specific data for the internal instance. - Called when the function completes
webpack
The callback provided.
Common Plugin
html-webpack-plugin
One will be generated automatically after packaginghtml
File, and will introduce the packaged JS file tohtml
Within the file.optimize-css-assets-webpack-plugin
Compress the CSS code.mini-css-extract-plugin
. Will writestyle
The CSS inside the tag is separated into onelink
Import the generated CSS filewebpack-parallel-uglify-plugin
. Enable multi-process execution code compression, improve packaging speed.clean-webpack-plugin
. Delete old generated files before each package.serviceworker-webpack-plugin
. Add offline caching for web applications.
What is the difference between Loader and Plugin?
loder
Is a file loader, can load resource files, and perform some processing on these files, such as compilation, compression, etc.Run before packaging the file, and finally package the resources into the specified fileplugin
Give WebPack more flexible functions, such as package optimization, resource management, environment variable injection, etc., the purpose is to solve and extendloder
Other features that are not available,This works throughout the compile cycle
The entire runtime of Webpack is shown below:
A number of events are broadcast during the life cycle of a Webpack run, and the Plugin can listen for these events and change the output when appropriate through the API provided by Webpack.
For Loader, it is essentially A converter. It compiles A file into B file and operates the file. For example, it converts A.CSS or A.less into B.CSS.
Reference documentation: Difference between Loader and Plugin
Talk about Webpack versus Babel
webpack
Webpack is a modular packaging tool, packaging JS files, CSS files, images, HTML and so on, it can analyze the file structure of the entire project, confirm the dependencies between files, such as one JS file introduced another JS file. In this process, js can be synthesized, compressed, and finally generated project files.
babel
Babel is a JS compiler that converts the latest JS syntax into ES5 syntax and runs in most browsers. Arrow functions like ES6 do the conversion. The implementation of Babel consisted of three steps: parsing, transformation, and finally code generation.
// Babel input: ES2015 arrow function
[1.2.3].map((n) = > n + 1);
// Babel output: the same functionality as the ES5 syntax
[1.2.3].map(function(n) { return n + 1; });
Copy the code
While Babel only converts syntax, some of the newer apis don’t, such as Object.assign, Promise, etc. So Babel also provides a lot of plug-ins, called Babel-Pilofill. After installation, you can support the browser to run. Babel-pilofill is based on core-JS and ReGenerator. Pilofill, however, introduces full API support. If you use only part of the API, you can introduce only the corresponding modules.
Babel can also convert JSX syntax and React support is better. Babel presents, presents is a collection of plugins. Babel generally needs to work with Webpack to compile module syntax. How to configure Babel in webpack?
Plugins are run first.
{"plugins": ["transform-decorators-legacy", // run "transform-class-properties" // run again]}Copy the code
But presents is presented first and executed later, for better compatibility.
{"presets": ["es2015", // es2015" react", "stage-2", // stage-2]}Copy the code
Webpack hot update
Hmr-hot Module Replacement is one of the most useful features webPack provides. Hot replacement refers to the replacement, addition, deletion of modules without the need to refresh and reload the page. If HMR is not configured, you need to refresh the page every time you change the interface to see the changed result. This is very troublesome and inefficient for debugging. The most important thing is that the data you modify on the interface will be lost as the page is refreshed. However, Webpack hot update mechanism exists, even if the code is modified, it will not cause the refresh, but retain the existing data state, only the module is updated and replaced. That is, the existing data state is preserved and the code changes are visible.
Its ideas mainly include the following aspects:
- Save the application state when the page loads
- Update only the changed content, saving development and debugging time
- Changing styles is faster, almost the same as changing styles in a browser
A webpack.config.js file with hot replacement is configured as follows to do several things
- The WebPack library was introduced and dependencies were installed
$ npm install webpack webpack-dev-server --save-dev
- configuration
devServer
, among the optionshot
Field istrue
, indicating that hot update is enabledDevServer: {contentBase: path.resolve(__dirname, 'dist'), hot: true, compress: true //Copy the code
- use
new webpack.HotModuleReplacementPlugin()
plugins: { HotModuleReplacementPlugin: new webpack.HotModuleReplacementPlugin() }, Copy the code
How does Webpack implement hot updates?