Before learning through knowledge webpack3, but after webpack4 upgrade there are still many changes, so this knowledge webpack4 rearrange, and to facilitate future review.
This will not only to learn webpack4 configuration, remember the core API, but also the best understanding of what webpack deeper knowledge, such as packaging and so on principle, it is possible to omit some of the more basic content, but hopefully I can pass this learning to master webpack, to better respond to future work.
This section will be in-depth understanding of the principles of webpack
1. Analysis Module
This time we will get a similar webpack tool to write the first part of the analysis module.
Code Address:
Setting up the first directory, there are three files in the src js, each of which corresponds to the following documents:
word.js
message.js
index.js
Now the code in the browser is no way to run, it needs similar webpack this tool can, so we need the help of node.js achieve a packaging tool.
And src same level, we create a new bundler.js.
Create a function to analyze package import documents, support incoming argument (file path), then use the node reads the contents of the file.
The index referenced message.js, we need to extract the referenced file name out, to help @ babel / parser analysis of our source code.
cnpm install @babel/parser --save
复制代码@ Babel / parser provides a parse method, the first argument contents of the file, the second parameter passed to an object.
Method returns the object is an abstract syntax tree (AST).
Objects inside a program.body, the content is this:
The first type is a Node of ImportDeclaration, meaning that the introduction of declarative statements, we index.js the first line really is the introduction of the statement. The second type is the Node ExpressionStatement, meaning an expression statement, the second line we write console.log (), is really an expression statement. With this tool so that we can analyze the dependencies between files.
To find all dependencies, we have to traverse all type of statement is ImportDeclaration, wrote would be more trouble, you can also use @ babel / traverse
cnpm install --save @babel/traverse
复制代码traverse is a function, the first abstract syntax tree accepts a parameter, the second parameter is an object.
Abstract syntax tree has a type element is ImportDeclaration, will perform ImportDeclaration function that takes the parameters can deconstruct a node, it is all type is ImportDeclaration element is that all of us rely on, which yo a source, value value is the file name, so we can put all the file names are kept up
Declare an array, all node in soure.value are push to the array.
Such analysis has been analyzed entrance good, but this is time-dependent analysis of the relative path, we need to change it to an absolute path, or a path relative to the root path, so that it will not be a problem, so to help node in the path.
But we have to facilitate future development, it should be absolute and relative paths are well kept, so the original array becomes an object, save it in the following way.
key object is a relative path, value is the absolute path.
And then return to the entrance file name, file and all dependent content.
But we use the ES Module introduced file, the browser does not recognize this syntax, we must rely on @ babel / core.
cnpm install --save @babel/core
复制代码@ Babel / core provides a method, transformFromAst, abstract syntax tree can be converted into a code that can run a browser.
Incoming parameters can also be configured ES6 turn plug-ES5, so you must install it @ babel / preset-env.
cnpm install --save @babel/preset-env
复制代码Function returns an object, which has a code property code CODE attribute is that we can run the browser.
Finally, return the results of our analysis.
It means the result returned: The index.js entry file is; reference is dependent message.js, address src / message.js; Code browser can run in the content code.
2. Depending map
We now analyze the dependence of import documents, then we have to begin to analyze other dependencies, message from the beginning, layer by layer to complete all the dependencies are analyzed.
Let us create a function used to make rely map, using a similar recursive manner, dependent on the content of calls moduleAnalyser drill down and put them all into an array.
The last generation of the array.
Then we have to integrate it into an object, with the path as a key, and the code as a dependency value, and return the object.
Content object.
3. Generate Code
Get rely map, and now want to start generating code that can run a browser.
Look at the code generated, and require the presence of two methods Exports, but the browser is not these two methods, we first define two methods, and the generated code fragment is performed using a form closure.
require function, by passing a path to get the corresponding code, use eval () implementation require if there are dependent, to get the continued exercise require is a relative path, you need to turn into an absolute path, go directly to the object we created earlier it can take in.
exports is an empty object can be, so the exported content will be saved to the exports.
Then look at the generated code formatting, copy it into your browser execution.
Say hello to print out the.
Thus, we have implemented a simple webpack packaging tools, the specific code can go look at my github repository.
reference
Take you to master the new Webpack4.0 ---- DellLee from the foundation to the actual hands-onReproduced in: https: //juejin.im/post/5d00fbbb5188255e780b64b1