Webpack Introduction & Installation & Common commands

Webpack Series Catalogue

• Webpack Series One: Evolution of the modular system
• Webpack Series II: Webpack Introduction & Installation
• Webpack Series three: Webpack how to integrate third-party JS libraries
• Webpack Series IV: Webpack multi-page Support & common components packaged separately
• Webpack series five: Webpack loaders module Loader
• Webpack Series SIX: Front-end project template-WEBPACK+GULP for automated build deployment

This series is not all original, such as non-original, the text will be noted in the first reprint address

Based on Webpack to build a pure static page front-end Engineering solution Template, the final pattern source see Github:https://github.com/ifengkou/webpack-template

Body

This section is excerpted in Webpack Chinese Getting Started Guide-Modular systems & Webpack Dev Server

Webpack is a tool for user-packaged front-end modules that perform static analysis based on the dependencies of the modules and then generate the corresponding static resources according to the specified rules. Primarily used to package JavaScript used on the browser side. You can also convert, bundle, and package other static resources, including CSS, image, font file, template, etc.

Webpack's official website is http://webpack.github.io/, the document address is http://webpack.github.io/docs/

There are already a lot of module management and packaging tools in the market, why also repeat the wheel, webpack what features?

These existing modular tools do not work well for the following goals:

• Splitting a dependency tree into blocks that are loaded on demand
• Initialization loading takes as little time as possible
• Various static resources can be considered as modules
• Ability to integrate third-party libraries into modules
• Ability to customize the packaging logic
• For large projects, whether single-page or multi-page WEB applications

Webpack Features

Code splitting
Webpack has two types of organizational modules that are dependent on the way, synchronous and asynchronous. Asynchronously relies as a split point to form a new block. After the dependency tree has been optimized, each asynchronous chunk is packaged as a file.
Loader
The Webpack itself can only handle native JavaScript modules, but the loader converter can convert various types of resources into JavaScript modules. In this way, any resource can be a module that Webpack can handle.
Intelligent parsing
Webpack has an intelligent parser that can handle almost any third-party library, regardless of whether they are in the form of CommonJS, AMD or ordinary JS files. Even when loading dependencies, the dynamic expression require ("./templates/" + name + ". Jade") is allowed.
Plug-in System
Webpack also has a feature-rich plug-in system. Most of the content features are based on this plug-in system, and you can develop and use open source Webpack plug-ins to meet a wide range of requirements.
Fast Running
Webpack uses asynchronous I/O and multi-level caching to improve operational efficiency, which allows Webpack to compile quickly and incrementally with incredible speed.

Summarize its main advantages:

1. Load modules on demand, lazy loading on demand, and incrementally update when actually using some modules
2. Webpack scripts are written in the form of CommonJS, but support for Amd/cmd is also comprehensive and facilitates code migration for older projects.
3. Can be modularized not only JS, can handle various types of resources.
4. Development is convenient, can replace part of GRUNT/GULP work, such as packaging, compression confusion, picture to Base64 and so on.
5. Strong extensibility and perfect plug-in mechanism

Installation

First, you install node. js, and node. JS comes with Package Manager NPM
Installing Webpack with NPM

$ npm install webpack -g

At this point Webpack has been installed in the global environment, can be viewed from the command line webpack-h the relevant instructions

Typically we install Webpack to project dependencies so that you can use the local version of Webpack

//进入项目目录//确定已有package.json，没有就npm init 创建$ npm install webpack --save-dev//查看webpack 版本信息$ npm info webpack//安装指定版本$ npm install [email protected]1.31.x --save-dev

If you want to use the Webpack development tool, install the webpack-dev-server separately

$ npm install webpack-dev-server --save-dev

Common Command Webpack

Build commands, common parameters for Webpack

$ webpack --config webpack.min.js //另一份配置文件$ webpack --display-error-details //显示异常信息$ webpack --watch   //监听变动并自动打包 $ webpack -p    //压缩混淆脚本，这个非常非常重要！ $ webpack -d //生成map映射文件，告知哪些模块被最终打包到哪里了

Webpack-dev-server

Webpack-dev-server is a small node. JS Express server that uses Webpack-dev-middleware middleware to provide Web services for resource files generated through Webpack packaging. It also has a small run-time program that connects to the Webpack-dev-server server via Socket.io. Webpack-dev-server sends messages about the state of the compilation to the client, and the client responds based on the message.

Webpack-dev-server has two modes to support automatic refresh of--iframe mode and inline mode

• In IFRAME mode: The page is nested under an IFRAME, and when the code changes, the IFRAME reloads
• In inline mode: A small webpack-dev-server client is packaged as a portal file, and the client refreshes the page when the backend code changes

With IFRAME mode, no additional configuration is required, just the browser input

http://localhost:8080/webpack-dev-server/index.html

There are two ways of using inline mode: command line and Nodejs API

1. Command line: At run time, add--inline option

   $ webpack-dev-server --inline

   Access, through which http://localhost:8080 you can access

2. Nodejs API mode, you need to manually add webpack-dev-server/client?http://localhost:8080 to the configuration file at the entrance file

The Webpac-dev-server supports hot module replacement, which is the modular thermal replacement, which eliminates the need to refresh the page as the front-end code changes, replacing only the parts that change

In the next chapter, we start using Webpack to realize the automatic construction of front-end projects!!

Webpack Introduction & Installation & Common commands