0 0 0 0

Webpack features

Code split
There are two types of, synchronous and asynchronous. An asynchronous dependency as a split point, forming a new block. In optimizing dependent trees, each asynchronous block is packaged as a file.
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.
Intelligent parsing
It has a smart parser that almost handles any third party libraries, whether they're commonjs, amd, or a normal js file. Even when the dependency is loaded, allow dynamic expression require (./templates/& + name +. Jade ) to be used.
There's a system. Most of the content features are based on this system, and you can develop and use open source webpack to meet various requirements.
Quick run
The webpack uses asynchronous I/o and multilevel caches to improve operational efficiency, which makes it possible to quickly compile the webpack with an incredible speed.

Summarize its main advantages:

  • Load modules as needed, lazy loading as needed, incremental updates when actually used some modules
  • A commonjs is written in a form of, but support for amd/cmd is also a comprehensive, convenient code migration for old projects.
  • Can be modular not just js, but can handle various types of resources.
  • Easy to develop, can replace part grunt/gulp work, such as packaging, compression confusion, image, etc.
  • Strong extensibility and system improvement


First to install Node.js, Node.js comes with the software package manager.
To install a web pack with regedit

$ npm install webpack -g

At this time the webpack is already installed in the global environment, you can view the related instructions by the command line.

Typically we'll install a web pack to a project dependency so that you can use a local version of the web pack

//确定已有package.json,没有就npm init 创建
$ npm install webpack --save-dev
//查看webpack 版本信息
$ npm info webpack
$ npm install webpack@1.31.x --save-dev

If you want to use the web pack development tool, I & tall webpack-dev-server separately

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

Common commands


Building commands, common paramete & for web packs

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


The web pack dev server is a small node. Js express server that uses the web pack dev middleware middleware to provide web services for the resource files generated by the web pack package. It also has a small run time program that connects to the web pack dev server server. The web pack dev server sends messages about the status of the compilation to the client, and the client responds to the message.

The web pack dev server has two modes support automatic refresh of iframe mode and inline mode

  • In iframe mode: the page is nested under an iframe, and the iframe is reloaded when the code changes.
  • In inline mode: a small web pack dev server client is packaged as an entry file, which will refresh the page when the backend code changes.

Using iframe mode, no additional configuration is required, just in the browser input


There are two ways to use inline mode: Command line and nodejs api

Command line: at run time, add --inline option

$ webpack-dev-server --inline

Access, through Http://localhost: 8080 You can access it.

In nodejs api, you need to manually add webpack-dev-server/client? http://localhost: 8080 to the profile entry file

Webpac-dev-server Enable hot module replacement That's, the module hot replace, when the code changes without the entire refresh page, just replace the changes.

In front of this article introduces some basic usage of the web pack, which is a whole introduction, how to integrate gulp? How to handle multiple deployment environments?

Project structure description

 ├── gulpfile.js # gulp任务配置
 ├── mock/# 假数据文件
 ├── package.json # 项目配置
 ├── # 项目说明
 ├── src # 源码目录
 │ ├── pageA.html # 入口文件a
 │ ├── pageB.html # 入口文件b
 │ ├── pageC.html # 入口文件c
 │ ├── css/# css资源
 │ ├── img/# 图片资源
 │ ├── js # js&jsx资源
 │ │ ├── pageA.js # a页面入口
 │ │ ├── pageB.js # b页面入口
 │ │ ├── pageC.js # c页面入口
 │ │ ├── helpers/# 业务相关的辅助工具
 │ │ ├── lib/# 没有存放在npm的第三方库或者下载存放到本地的基础库,如jQuery、Zepto等
 │ │ └── utils/# 业务无关的辅助工具
 │ ├── scss/# scss资源
 │ ├── pathmap.json # 手动配置某些模块的路径,可以加快webpack的编译速度
 ├── webpack.config.allinone.js # webpack配置
 ├── webpack.config.js # 正式环境webpack配置入口
 └── webpack-dev.config.js # 开发环境webpack配置入口

One: differentiated dev environment and production environment

Rename webpack.config.js => webpack. Config. Allinone. Js.

Content, new options parameters, use options. Debug to control the web pack parameters to distinguish between development and production environments. For example, the development environment doesn't need to confuse and compress js files, but the development environment needs to be. Select the appropriate loader configuration and plugin by using option. Debug:

module.exports = function(options){
 options = options || {}
 var debug = options.debug!==undefined? options.debug :true;
. . ....
 // }else{
 // }

New web pack. Config. Js webpack-dev. Config. Js.

//webpack.config.js'use strict';var webpack_config = require('./webpack.config.allinone') module.exports = webpack_config({debug:false})//webpack-dev.config.js'use strict';var webpack_config = require('./webpack.config.allinone') module.exports = webpack_config({debug:true})

Follow the gulp instructions to dynamically select whether the development environment is a development environment or test environment, see gulpfile. Js.

//用于gulp传递参数var minimist = require('minimist');var knownOptions = {
 string: 'env',
 default: {env: process.env.NODE_ENV || 'production'}
};var options = minimist(process.argv.slice(2), knownOptions);var webpackConf = require('./webpack.config');var webpackConfDev = require('./webpack-dev.config');var _conf = options.env === 'production'? webpackConf : webpackConfDev;
webpack(_conf, function (err, stats) {......

Two: integration gulp

Do the following with gulp:

  • Code check
  • Clean operation
  • run webpack pack
  • Deploy publish

Install gulp

$ npm install gulp gulp-clean jshint gulp-jshint jshint-stylish gulp-sftp gulp-util minimist --save-dev

Add gulpfile. Js.

Full gulpfile. Js:

 * Created by sloong on 2016/6/14.
 */'use strict';var gulp = require('gulp');var webpack = require('webpack');//用于gulp传递参数var minimist = require('minimist');var gutil = require('gulp-util');var src = process.cwd() + '/src';var assets = process.cwd() + '/dist';var knownOptions = {
 string: 'env',
 default: {env: process.env.NODE_ENV || 'production'}
};var options = minimist(process.argv.slice(2), knownOptions);var webpackConf = require('./webpack.config');var webpackConfDev = require('./webpack-dev.config');var remoteServer = {
 host: '',
 remotePath: '/data/website/website1',
 user: 'root',
 pass: 'password'};var localServer = {
 host: '',
 remotePath: '/data/website/website1',
 user: 'root',
 pass: 'password'}//check codegulp.task('hint', function () {
 var jshint = require('gulp-jshint')
 var stylish = require('jshint-stylish')
 return gulp.src([
 '!' + src + '/js/lib/**/*.js',
 src + '/js/**/*.js' ])
. pipe(jshint())
. pipe(jshint.reporter(stylish));
})//clean assertsgulp.task('clean', ['hint'], function () {
 var clean = require('gulp-clean');
 return gulp.src(assets, {read: true}).pipe(clean())
});//run webpack packgulp.task('pack', ['clean'], function (done) {
 var _conf = options.env === 'production'? webpackConf : webpackConfDev;
 webpack(_conf, function (err, stats) {
 if (err) thrownew gutil.PluginError('webpack', err)
 gutil.log('[webpack]', stats.toString({colors: true}))
});//default taskgulp.task('default', ['pack'])//deploy assets to remote servergulp.task('deploy', function () {
 var sftp = require('gulp-sftp');
 var _conf = options.env === 'production'? remoteServer : localServer;
 return gulp.src(assets + '/**')
. pipe(sftp(_conf))

Three: package.json configuration

Scripts configure individual directives

  • Start the web pack debugging server: Mst run server
  • I & talling the test environment: run build
  • Production environment package: run build-online
  • Publish to test environment: run deploy
  • Publish to production environment: run deploy-online

The full package. Json is as follows:

{"name":"webpack-avalon","version":"1.0.0","description":"","main":"index.js","scripts":{"server":"webpack-dev-server --inline","build":"gulp pack --env debug","build-online":"gulp pack --env production","deploy":"gulp deploy --env debug","deploy-online":"gulp deploy --env production"},"author":"sloong","license":"MIT","devDependencies":{"css-loader":"^0.21.0","ejs-loader":"^0.3.0","extract-text-webpack-plugin":"^1.0.1","file-loader":"^0.8.5","gulp":"^3.9.1","gulp-clean":"^0.3.2","gulp-jshint":"^2.0.1","gulp-sftp":"^0.1.5","gulp-util":"^3.0.7","html-loader":"^0.4.3","html-webpack-plugin":"^2.19.0","jshint":"^2.9.2","jshint-stylish":"^2.2.0","jsx-loader":"^0.13.2","minimist":"^1.2.0","node-sass":"^3.7.0","sass-loader":"^3.2.0","style-loader":"^0.13.0","url-loader":"^0.5.7","webpack":"^1.13.1","webpack-dev-server":"^1.14.1"}}

Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs