刚开年，手头任务还不多，大家都趁着这个时间抓紧学习一些平时感兴趣，但是没大块时间整理和琢磨的技术。趁着这段时间，看了一下webpack打包工具，简要整理了一些笔记。作为一个连NPM还没接触过的小白，本篇的介绍可能略显冗长。感兴趣的话可以去Github看整理的项目（我竟然也有github）：
什么是NPM
NPM（node package manager），node包管理器。功能室管理node包，包括：安装、卸载、更新、查看、搜索、发布等。
npm的背后，是个数据库，详细记录了每个包的信息，包括作者、版本、依赖、授权信息等。
npm包安装模式，加—g会全局安装，默认本地安装，即只在本目录可以执行该包。一般grunt、npm等需要全局安装。
常用npm命令（xxx是包名）：
> 安装：npm install xxx
*npm install webpack --save-dev//安装webpack到本地目录，并保存信息到devDependencies（如果—save则保存到dependencies，其他类似）> 卸载：
npm uninstall xxx> 查看：
npm ls列出所有包信息；npm ls pkg查看指定的package的信息> 升级：
npm update xxx> 搜索：
npm search xxx
如果项目包有了package.json，可以npm install一键安装所有包
什么是webpack
webpack能把各种资源如js、样式（css、sass等）、图片等都作为模块来使用和处理。可以直接使用require（xxx）来引入各个模块（未经编译的sass也可以直接引用）。配置对应的加载器（loader）来处理。
使用webpack优势
> webpack以commonJS书写，同时也支持AMD/CMD；
> 各种资源都可以模块化；
> 打包、混淆代码、图片转base64都可以执行；
> 实时监听文件修改，无需手动刷新浏览器即可以看到修改效果；
> 支持react热插拔。
package.json
package.json为npm使用，也是该应用的启动入口
"scripts": {
"build": "webpack",
"start": "webpack --config webpack.config.js"
}
配置完该项，可以通过npm run build/start直接运行
运行：
npm init初始化
npm install webpack —save-dev
webpack.config.js
webpack.config.js是供webpack和webpack-dev-server使用的配置文件。
? chunk是什么：code splitting 后的产物，也就是按需加载的分块，装载了不同的 module。
实例可参考：Github-webpack examples
基本格式：
entry: {[entryChunkName: string]: string|Array<string>}
e.g.
单一入口：
基本格式：
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
注：vendor一般指一些第三方依赖，例如jQuery、Vue等；app一般指项目代码。
多页应用：
基本格式：
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
*CommonsChunkPlugin提取每个页面间的应用共享代码创建 bundle
格式：
new CommonsChunkPlugin({
name: "admin-commons",
chunks: ["entryA", "entryB"]
})
为依赖放置于不同js模块的文件，创建共享bundle和单独的bundle，这样，在页面里不必依次引用一堆js文件。解决引用次序不同而造成的错误。
单入口简写：entry: string|Array
基本格式：
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
loader能转换各类资源，并处理成对应模块的加载器。loader 间可以串行使用。
可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。
基本格式：
module: {
rules: [
{test: /\.(js|jsx)$/, use: 'babel-loader'}
]
}
常用加载器：
> raw-loader：以原始内容加载文件
> val-loader：以模块方式执行代码并考虑以js形式exports
> file-loader：将文件发布到输出目录，并返回url地址（本地json形式的接口以这种方式加载）
> url-loader：和fileloader类似，但是如果文件小于指定大小，会返回数据的Data Url（如图的base64地址）
插件最常用于（但不限于）在打包模块的“编译(compilation)”和“分块(chunk)”时执行操作和自定义功能。使用插件，你只需要 require() 它们，并且把它们添加到 plugins 数组。
基本格式：
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
…
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
常用插件：
> common-chunks-webpack-plugin：生成入口的公共模块，并分到不同的bundle里
> extract-text-webpack-plugin：从bundle里提取css到单独的文件
> component-webpack-plugin：使用components
> compression-webpack-plugin：压缩版本
> html-webpack-plugin：创建html用
> i18n-webpack-plugin：国际化支持
3、webpack dev server
webpack.config.js的config中配置格式：
devServer: {
contentBase: path.join(__dirname, "dist"),
inline: true,
hot: false,
port: 9090
}
*其中contentBase所指的目录下必须有一个index.html文件，以供页面渲染使用。
webpack-dev-server（配置项目参考https://webpack.github.io/docs/webpack-dev-server.html#webpack-dev-server-cli）
自动编译：webpack-dev-server --watch
项目实例
搭建vue+webpack+mock脚手架（一）
Github-基于webpack的前端工程化方案
4.1插件安装
很多插件都支持npm方式安装。可以使用underscore@x.x.x安装指定的插件版本。
npm install underscore —save-dev安装插件。
如果npm库中没有该插件或者是自定义插件，可以直接以js方式保存到本地目录里。
4.2插件使用
有两种方式使用插件：
a、在要使用的地方用require调取
var _ = require("underscore");
_.size(…);
如Vue可以使用var Vue = require(‘vue’)，之后可以在该文件里直接使用Vue.component等方式使用。
b、config.plugins里使用
new webpack.ProvidePlugin({ //页面如果使用Vue，则自动加载
'Vue': 'vue'
}),
使用UglifyJsPlugin压缩js代码
pulgins里设置
new webpack.optimize.UglifyJsPlugin({minimize: true})
使用html-minifier压缩html代码
可以配合html-webpack-plugin使用，在minify中传入html-minifier的配置项
配置
{ test: /\.json$/, loader: 'file-loader'}js文件中使用
require(“../json/xx.json”)
加载为file
1、webpack官方Github
2、源码解读：命令行输入webpack的时候都发生了什么？
3、webpack-dev-server文档