This is the 14th day of my participation in Gwen Challenge
webpack
Webpack is a front-end resource loading/packaging tool. It performs static analysis based on module dependencies, and then generates the corresponding static resources from these modules according to the specified rules.
Nodejs is required to install webPack.
NPM switches to the domestic image and uses the CNPM command to view the blogger NPM tutorial
Install webPack globally
cnpm install webpack -g
Copy the codeInstall webPack locally
cnpm install webpack
Copy the codeCreate a project
Create a directory
mkdir app
Copy the codeCreating a JS file
Add eguid.js file to app directory:
document.write("hi,eguid!");
Copy the codeCreating an HTML file
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="test.js" charset="utf-8"></script>
</body>
</html>
Copy the codePackaging project
webpack eguid.js test.js
Copy the codeThis command compiles the eguid.js file and generates the test.js file. Open index.html in your browser and see hi,eguid!
Create a second js file, eguid-2.js
module.exports="hi eguid,I'm from eguid-2.js.";
Copy the code## Update the eguid.js file
document.write(require("./eguid-2.js"));
Copy the code## Then pack it here
webpack eguid.js test.js
Copy the codeOpen index.html in your browser and see: hi eguid,I’m from eguid-2.js.
Development mode
Output with progress and colors at compile time
Webpack compilation takes longer as projects get larger, and you can use parameters to make compiled output with progress and color.
webpack --progess --colors
Copy the code## Listen mode
webpack --preogress --colors --watch
Copy the codeWhen listening mode is enabled, compilation is faster. The principle is that modules that have not changed are cached in memory and files that have changed are recompiled
conclusion
Webpack performs static analysis based on module dependencies, packaging modules into a file. Webapckt assigns each module a unique ID that indexes and accesses the module. When the page starts, the gakudo JS code will be executed first, and other modules will execute it when require is run.