Shulou(Shulou.com)06/01 Report--

This article introduces how to achieve Web project building based on webpack, the content is very detailed, interested friends can refer to, hope to be helpful to you.

1. Introduction

With the development of Internet front-end technology, in today's increasingly complex and changeable front-end engineering, modularization has become a topic that front-end practitioners like to talk about, and a variety of modular tools emerge in endlessly. Seajs, requirejs,bower,browserify and one of the front-end modularization tools we are going to mention today-webpack. Webpack is often selected as the module management tool in the front-end technology selection of outlook data.

Figure 1 webpack

two。 What is webapck?

Webpack has been around for some years now, and now it has been updated to version 2.0. It is an excellent module loader and packaging tool, its characteristic is that all resources are regarded as modules, any form of resources can be regarded as modules and introduced into the project, such as commonJs module, AMD module, Sass, Less, Json, img,es6 module (2.0 version add support) and so on. In addition, you can integrate and package dependent modules through parameters such as module and plugins, which can replace some similar packaging functions such as gulp and grunt.

Figure 2 modules with dependencies

3. Why use webpack?

As a module manager, webpack has its own unique advantages.

First of all, as mentioned in the previous paragraph, webpack will package any form of resources as modules, while the traditional module loader can package any form of resources only for js,webpack, which makes the project management more convenient.

Secondly, webpack can take into account the module loading mode of AMD/CMD, and can choose the mode according to personal preference for module dependency management.

In addition, webpack can replace part of the work of gulp/grunt. His loader mechanism can implement part of the compression confusion operation.

4. How to use webpack

What the author prepares is a single page demo, here first lists the directory structure, only for reference.

├── dist # release directory

├── package.json

├── src # project source code

│ ├── assets # static Resources

│ ├── index.html

│ ├── index.js # entry file

│ ├── js

│ ├── styles

│ └── utils # tool Library

└── webpack.config.js # webpack profile

4.1 installation

Run under the root directory of the project:

Npm init

Npm install-D webpack

Create webpack profile webpack.config.js

4.2 configuration

A webpack configuration mainly consists of entry, output, modules, plugins and resolve fields.

Entry defines the entry configuration of the file, and output corresponds to the output configuration of the project. (figure 3 shows) the filename here uses the hash field to add a hash suffix to solve the problem that the page content is not updated due to caching.

The example provided in this article is single-page mode, so there are no multiple entrances. If there is a need for multiple entries, it can be generated in the following form (figure 4). After compilation, the code generates bundle.js for multiple files in the outputDir directory.

Figure 3 webpack entry/output configuration

Figure 4 entry/output configuration for webpack multi-portals

Loaders is the core content of webpack.config. It specifies what kind of loader to use for each module. The specific configuration is shown in figure 5. You can observe that loaders contains many loader, each of which uses the test field to match the file name, which can be loaded through the loader field if it conforms to its rules. All loaders need to be installed using npm. For example, if I want to use css-loader, then run npm install css-loader-D in the root directory to install the corresponding loader. Instead of introducing loader through require, webpack can find the corresponding loader itself. Then write loader in the loader field: 'css-loader', here'-loader' can be omitted. It is also possible for files to use multiple loaders, use! For separation, multiple loader loads are performed from right to left, which requires attention in the actual operation. The use of fields involving parameters? Add, using'&'to separate multiple parameters.

Figure 5 webpack loader configuration

Loaders is powerful, but there are a lot of things that can't be achieved through loaders. For example, webpack's loader packages all files into a bundle by default, while in actual projects, html, css, js and other resources generally need to be loaded asynchronously separately and selectively for the performance of the website. At this point, it is necessary for plugins to do some processing during the launch process. Here, I introduce some commonly used plugins.

HtmlWebpackPlugin, the HTML file used to create the bundle packaged by the service wepack. The plug-in needs to install the npm dependency html-webpack-plugin and reference it through require.

ExtractTextPlugin, a plug-in used to split css from bundle, is generally added to plugins when an online version is generated. Extract-text-webpack-plugin dependencies need to be installed through npm.

UglifyJsPlugin, which is used to compress the bundle file generated by obfuscation packaging. This plugin is built into webpack and sets the

After webpack require comes in, it is called through webpack.optimize.UglifyJsPlugin.

OptimizeCssAssetsPlugin, used to compress css files. Npm dependency optimize-css-assets-webpack-plugin needs to be installed.

Resolve is used to simplify module configuration, of which the more commonly used fields are alias, extensions and so on. Alias defines module aliases to avoid references that depend on overly long names. Extensions defines the default extension, while webpack ignores .js by default, which means you can get the index.js file in the js directory through require ('js/index') in the project, while through extensions, you can set more recognizable suffixes.

Figure 6 webpack resolve configuration

4.3 Command Line Settings

Once the webpack.config.js is written, we can run the webpack command in the root directory to implement the workflow of webpack. By the way, some parameters commonly used in the webpack command are mentioned here.

-colors outputs colored commands

-progress output package display

-watch dynamically monitors and updates dependent files

-hot hot swappable

-p compress the packaged file

In a real project, if there are tools such as gulp/grunt, you can use gulp/grunt 's own mechanism to set up different running environments. If you don't have such a tool, you can also choose to encapsulate the command in npm scripts. As shown in the figure, by setting up in this way, you only need to run the npm run + keyword to run the corresponding command, avoiding the frequent input of a large number of characters and parameters during debugging.

Picture loading of 5.webpack

The way of referencing picture resources is changeable. In the process of using webpack, the referencing of pictures in different scenes often perplexes beginners. Here is a brief introduction to some webpack image processing methods.

In general, images in webpack can be loaded through url-loader (figure 7). This is mainly aimed at the dependent image resources in js and css files. (Shi Lieyu outlook data)

Figure 7 loading pictures by webpack through url-loader

Url-loader is also a very practical loader, it can filter picture resources, when the picture is very small, url-loader can choose to compile the picture into base64 format and put it into the bundle file; you can also add hash code to the picture and so on.

If the picture is loaded through js code, it is important to note that the picture resource must be referenced in the way of require, otherwise webpack will not recognize the corresponding picture.

Figure 8 using require for picture loading

If the picture is loaded through scss/css. First, the picture must also be added to the dependency through the entry file. In this way, even if there is a change in the image path, webpack will replace the corresponding path in css in subsequent processing.

For the way of picture processing in html, first of all, the support of webpack for multi-html is not good, which leads to the problem of picture path in related pages is very difficult to solve. If the project is built using the multi-entry approach of webpack+react, the nature of react determines that it can solve such problems through require. But what should we do if it's not a react page?

The author recommends a plug-in html-withimg-loader to you here. After installing html-withimg-loader, require the corresponding html file in the entry file, and webpack will recognize the corresponding img tag in html.

Figure 9 add html with img element to the entry file

If the image wants to identify the image resource in the portal html, you can use the template field in the HtmlWebpackPlugin plug-in to set it, and add the corresponding loader in the template to complete the configuration.

Figure 10 using the html-withimg-loader plug-in to add a picture dependency on the entry html

Webpack is an excellent module manager. Its syntax is easy to understand, the configuration is simple, and the front-end project can be built efficiently and quickly. In practical projects, the use of webpack is not uncommon. Especially after the promotion of react framework, the status of react good partner webpack is also rising day by day.

On how to achieve webpack-based Web project construction is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.