Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to install and use Webpack". Friends who are interested may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to install and use Webpack.

Webpack is a front-end resource loading / packaging tool. It will analyze statically according to the dependencies of the modules, and then generate the corresponding static resources according to the specified rules.

This chapter passes the test based on Webpack3.0.

Webpack can convert a variety of static resources js, css, less into a static file, reducing page requests.

Install Webpack

Before installing Webpack, your local environment needs to support node.js.

Due to the slow installation of npm, this tutorial uses the image of Taobao and its command cnpm. Reference for installation and use: use the image of Taobao NPM.

Install webpack using cnpm:

Cnpm install webpack-g

Create a project

Next, let's create a directory app:

Mkdir app

Add the runoob1.js file in the app directory as follows:

[xss_clean] ("It works.")

Add the index.html file in the app directory as follows:

Next, we use the webpack command to package:

Webpack runoob1.js bundle.js

Executing the above command compiles the runoob1.js file and generates the bundle.js file. After success, the output information is as follows:

Hash: a41c6217554e666594cbVersion: webpack 1.12.13Time: 50ms Asset Size Chunks Chunk Namesbundle.js 1.42 kB 0 [emitted] main [0]. / runoob1.js 29 bytes {0} [built]

Open index.html in a browser and the output is as follows:

Create a second JS file

Next, let's create another js file, runoob2.js, with the following code:

Module.exports = "It works from runoob2.js."

Update the runoob1.js file as follows:

[xss_clean] (require (". / runoob2.js"))

Next, we use the webpack command to package:

Webpack runoob1.js bundle.js Hash: dcf55acff639ebfe1677Version: webpack 1.12.13Time: 52ms Asset Size Chunks Chunk Namesbundle.js 1.55 kB 0 [emitted] main [0]. / runoob1.js 41 bytes {0} [built] [1]. / runoob2.js 46 bytes {0} [built]

In the browser, the output is as follows:

Webpack does static analysis based on the dependencies of the modules, and these files (modules) are included in the bundle.js file. Webpack assigns a unique id to each module and indexes and accesses the module through this id. When the page starts, the code in runoob1.js is executed first, and other modules are executed when require is run.

LOADER

Webpack itself can only handle JavaScript modules, and if you want to work with other types of files, you need to use loader for conversion.

So if we need to add css files to the application, we need to use css-loader and style-loader, they do two different things, css-loader will traverse the CSS file, find the url () expression and process them, and style-loader will insert the original CSS code into a style tag in the page.

Next we use the following command to install css-loader and style-loader (the global installation requires the parameter-g).

Cnpm install css-loader style-loader

After executing the above command, the node_modules directory is generated in the current directory, which is the installation directory for css-loader and style-loader.

Next, create a style.css file with the following code:

Body {background: yellow;}

Modify the runoob1.js file as follows:

Require ("! styleMutual loader require / runoob2.js"); [style.css ")

Next, we use the webpack command to package:

Webpack runoob1.js bundle.js Hash: a9ef45165f81c89a4363Version: webpack 1.12.13Time: 619ms Asset Size Chunks Chunk Namesbundle.js 11.8 kB 0 [emitted] main [0]. / runoob1.js 76 bytes {0} [built] [5]. / runoob2.js 46 bytes {0} [built] + 4 hidden modules

In the browser, the output is as follows:

When you write a require CSS file, you have to write the loader prefix! styleMutual loader. Of course, we can automatically bind the required loader according to the module type (extension). Change the require in runoob1.js ("! stylemuri loaderloaderloaderloaderloaderloaderupload.") to require (". / style.css"):

Runoob1.js file

Require (". / style.css"); [xss_clean] (require (". / runoob2.js")

Then execute:

Webpack runoob1.js bundle.js-- module-bind 'CSSS stylemuri loader'

In the browser, the output is as follows:

Obviously, the effect of the two ways of using loader is the same.

Configuration file

We can put some compilation options in the configuration file for unified management:

Create the webpack.config.js file with the following code:

Module.exports = {entry: ". / runoob1.js", output: {path: _ _ dirname, filename: "bundle.js"}, module: {loaders: [{test: /\ .css $/, loader: "styleMurloaderloaderloader"}]}}

Next, we just need to execute the webpack command to generate the bundle.js file:

Webpack Hash: 4fdefac099a5f36ff74bVersion: webpack 1.12.13Time: 576ms Asset Size Chunks Chunk Namesbundle.js 11.8 kB 0 [emitted] main [0]. / runoob1.js 65 bytes {0} [built] [5]. / runoob2.js 46 bytes {0} [built] + 4 hidden modules

After the webpack command is executed, the webpack.config.js file of the current directory is loaded by default.

Plug-in

The plug-in is specified in the configuration information plugins option of webpack to do some work that loader cannot do.

Webpack comes with some plug-ins, which you can install through cnpm.

Using the built-in plug-in requires the following command to install:

Cnpm install webpack-save-dev

For example, we can install the built-in BannerPlugin plug-in to output some comment information in the file header.

Modify webpack.config.js. The code is as follows:

Var webpack=require ('webpack') Module.exports = {entry: ". / runoob1.js", output: {path: _ _ dirname, filename: "bundle.js"}, module: {loaders: [{test: /\ .css $/, loader: "stylemuri loaderloader cssloader"}]}, plugins: [new webpack.BannerPlugin ('rookie tutorial webpack instance')]}

Then run:

Webpack

Open bundle.js and you can see that the comment message we specified appears in the header of the file.

Development environment

As the project gets bigger, the compilation time of webpack becomes longer, and you can use parameters to make the compiled output with progress and color.

Webpack-progress-colors

If you don't want to recompile every time you modify the module, you can start listening mode. When listening mode is turned on, modules that do not change are cached in memory after compilation and are not recompiled every time, so the overall speed of listening mode is very fast.

Webpack-progress-colors-watch

Of course, we can use the webpack-dev-server development service so that we can start an express static resource web server through localhost:8080 and run webpack automatically in listening mode. Open http://localhost:8080/ or http://localhost:8080/webpack-dev-server/ in the browser to browse the pages in the project and the compiled resource output. And listen for their changes in real time and refresh the page automatically through a socket.io service.

# install cnpm install webpack-dev-server-g # run webpack-dev-server-- progress-- colors

Open the http://localhost:8080/ to output the result in the browser

At this point, I believe you have a deeper understanding of "how to install and use Webpack". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.