Webpack

webpack简单点来说就就是一个模块打包器，它能够将不同类型的资源文件、不同类型的模块都打包成js文件，通过模块、插件定制配置。

image_1bd9noqdg5erudjgnd1cagq9m9.png-71.3kB
image_1biogvk5816vq1ha01cmm1m551b46m.png-118.5kB
image_1bioh4021l61cn4dlindigvm13.png-286.1kB

Webpack VS Browserify/Grunt/Gulp

image_1biognu0kjmg1pnq1ts71ivq12vj9.png-61.2kB
Grunt/Gulp 更偏向于task-runner 任务管理
Browserify 则更多的作为包管理
Webpack能够集模块打包、代码分离、代码清理等作用于一体

安装

npm install -g webpack
此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 试试。
通常我们会将 Webpack安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。
npm install webpack --save-dev
$ npm info webpack //查看 webpack 版本信息

其他package

http-server

作为npm的库，简单零配置的http服务端，既可用来作为实际生产，又存在易上手与测试的优点。
npm install http-server -g //安装
使用：
http-server [path] [options]
[path] 默认 ./public（如果存在）否则为当前目录
然后可以输入地址http://localhost:8080
参数

-p 端口号 (默认 8080)
-a IP 地址 (默认 0.0.0.0)
-d 显示目录列表 (默认 'True')
-i 显示 autoIndex (默认 'True')
-e or --ext 如果没有提供默认的文件扩展名(默认 'html')
-s or --silent 禁止日志信息输出
--cors 启用 CORS via the Access-Control-Allow-Origin header
-o 在开始服务后打开浏览器
-c 为 cache-control max-age header 设置Cache time(秒) , e.g. -c10     10s (defaults to '3600'). 禁用 caching, 则使用 -c-1.
-U 或 --utc 使用UTC time 格式化log消息
-P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P http://someurl.com
-S or --ssl 启用 https
-C or --cert ssl cert 文件路径 (default: cert.pem)
-K or --key Path to ssl key file (default: key.pem).
-r or --robots Provide a /robots.txt (whose content defaults to     'User-agent: *\nDisallow: /')
-h or --help 打印以上列表并退出

rimraf

A rm -rf util for nodejs

配置

Webpack也可用CLI的方式编译，不过大多还是使用配置文件。
webpack.config.js配置文件主要分为四大块

entry 入口文件 让webpack用哪个文件作为项目的入口
output 出口 让webpack把处理完成的文件放在哪里
module 模块 转换各种类型的文件为模块
plugin 插件 对编译生成的文件进行分离、编译、后处理等

热加载 VS 热替换

image_1bjcqs8dkmhf1kod176ijlp1mog9.png-284.2kB
live/hot reload 热加载，即不需要重启浏览器，修改代码直接生效
webpack --watch

热替换 hot module replacement(HMR)
$ npm install webpack-dev-server --save-dev
$ npm install webpack --save-dev
Windows下需要本地安装Webpack才能使用Webpack-dev-server，然后在package.json中修改脚本命令
webpack-dev-server可以启动

模块热替换功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载页面。这使得你可以在独立模块变更后，无需刷新整个页面，就可以更新这些模块，极大地加速了开发时间。
配置dev-server.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var WebpackDevServer = require('Webpack-dev-server');
var webpack = require('webpack');
var config = require('./webpack.config');
var path = require('path');

var compile = webpack(config);
var server = new WebpackDevServer(compile, {
  hot:true,
  filename: config.output.filename,
  publicPath: config.output.publicPath,
  stats: {
    colors: true
  }
});
server.listen(8080, 'localhost', function () {});

生产环境与开发环境

但是在生产环境下不需要热替换，可以添加环境变量NODE_ENV来区分

支持ES6

npm install babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 babel-cli --save-dev

要在cli中编译ES6，一方面需要看Node.js是否支持ES6的新语法，如果都支持可以直接Node编译，越新的版本支持特性越多；另外可以使用babel编译转换成ES5或者直接运行(babel-cli)
babel是能够将ES6进行转换的转换器
.babelrc配置文件，presets配置具体

"presets": [
["es2015",{"modules": false}],
  "stage-0"
]

支持sourcemap

devtool: source-map

assets不同资源的加载

file-loader

npm install file-loader --save-dev

url-loader

npm install url-loader --save-dev
url-loader是对file-loader的上层封装，比如webpack中对图片的加载器配置
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
这样在小于8K的图片将直接以base64的形式内联在代码中，可以减少一次http请求。

样式表

css-loader style-loader postcss-loader

流程是 css-loader （将require/import格式转化成css中的import或者url）-> style-loader（将css插入到生成的js中） -> postcss-loader进行后处理（加前缀 autoprefixer）

sass-loader

scss/sass转换成css

CSS Modules

css的模块特性

extract-text-webpack-plugin

npm install --save-dev extract-text-webpack-plugin
Extract text from a bundle, or bundles, into a separate file.
将生成的css样式从JS文件中抽离出，生成css文件

uglify插件

code-elimination 清理无用代码
tree-shaking 例如去掉if(true)

DefinePlugin

html-webpack-plugin

npm install --save-dev html-webpack-plugin
html模板

third party module

可用config.externals

其他

path.join() 用合适的连接符连接传入参数组成路径
path.resolve() 将第一个参数作为base路径，最后一个作为相对路径连接起来作为绝对路径
image_1bjflm2ep1d125dtdm5r511ghu9.png-597.6kB
image_1bjflnh1qcma4h7115rbqo132km.png-400.8kB

AngularJS+Webpack

这是我个人的Webpack+AngularJS 方案
https://github.com/GuoXiaoyang/ShowLocalWeather

总结

个人理解Webpack对工程上的一体构建很方便，解放了脑生产力。写的比较乱，主要是还不了解一些流程和概念，大概会用而已。
另外由于包的版本太多，配置也不尽相同，如果稳定了个人配置，建议不要轻易更换大版本。
等把这个理解得更为透彻，再更新该文章。

注：本篇文章的图都是引用Emil Oberg的教程里的。