Webpack Introduction & Installation & Common commands

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

// go to project directory // identify existing Package.json and do not create npm install webpack--save-dev// View Webpack version information on NPM Init $ npm Info webpack // Install the specified version of NPM install [email protected]--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

// Another configuration file  // Show exception information  --watch   // Monitor changes and automatically package  -P    //  Compression Obfuscation script, this is very very important! -d//Generate map Map file to tell which modules were eventually packaged      

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, 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!!

Article from: http://www.cnblogs.com/sloong/p/5584684.html

Webpack Introduction & Installation & Common commands