Is webpack based on node.js?-JS Tutorial-php.cn

Is webpack based on node.js?

青灯夜游

Release： 2022-07-12 18:57:20

Original

2972 people have browsed it

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".

Is webpack based on node.js?

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 used.

Installing Webpack

① The operation of Webpack requires Node.js, so Node.js needs to be installed first.

After the installation is completed, 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

Copy after login

② 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 will not affect the use)

The configuration of cnpm can be completed through the following line of code

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

Copy after login

Use cnpm Install webpack:

cnpm install webpack -g

Copy after login

Create project

Next we create a directory app:

mkdir app

Copy after login

Add it under the app directory runoob1.js file, the code is as follows:

app/runoob1.js file

document.write("It works.");

Copy after login

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>

Copy after login

Next we use the webpack command to package:

webpack runoob1.js bundle.js

Copy after login

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]

Copy after login

Open index.html in the browser, the output result is as follows:

Is webpack based on node.js?

For more node-related knowledge, please visit: nodejs tutorial!

The above is the detailed content of Is webpack based on node.js?. For more information, please follow other related articles on the PHP Chinese website!