webpack is based on node.js. Webpack is a static module packaging tool for modern JavaScript applications. It is developed based on node.js. It requires node.js component support when using it. It needs to be installed using npm or cnpm, and the syntax is "cnpm install webpack -g".
The operating environment of this tutorial: Windows 7 system, nodejs version 16, DELL G3 computer.
Webpack is a code compilation tool with entrance, exit, loader and plug-ins. webpack is a static module bundling tool for modern JavaScript applications. It will perform static analysis based on module dependencies, and then generate corresponding static resources for these modules according to specified rules.
When webpack processes an application, it internally builds a dependency graph that maps to each module required by the project and generates one or more bundles.
Webpack is a front-end packaging tool developed based on node.js. It requires node.js component support when using it.
Install Webpack
① The operation of Webpack depends on Node.js, so Node.js needs to be installed first.
After the installation is complete, enter the following two lines of commands in the command line window. If a version number appears, the installation is successful.
$ node -v$ npm -v
② Then you can install Webpack through npm (a package management tool based on Node.js).
Because the source of npm is abroad, the installation speed may be slow. It is recommended that you use Taobao’s npm mirror cnpm. But one thing to note is that some packages in cnpm will be different (generally speaking, it does not affect the use).
You can complete the configuration of cnpm through the following line of code
$ npm install -g cnpm --registry=https://registry .npm.taobao.org
Use cnpm to install webpack:
cnpm install webpack -g
Create a project
Next we create a directory app:
mkdir app
Add the runoob1.js file in the app directory, the code is as follows:
app/runoob1.js file
document.write ("It works."); Add the index.html file in the app directory, the code is as follows:
app/index.html file
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html> Next we use the webpack command to package:
webpack runoob1.js bundle.js
Executing the above command will compile the runoob1.js file and generate the bundle.js file. After success, the output information is as follows:
Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./runoob1.js 29 bytes {0} [built] Open index.html in the browser, the output results are as follows:
