webpack说容易也容易，说难也难，主要还是看个人，想学到什么样的程度，很多公司可能要求仅仅是会用就行，但是也有一些公司要求比较高，要懂一些底层的原理，所以还是要花一些时间的，看个人需求。这篇仅仅是做了一些总结，都是来自官网，便于复习。
一，先理解webpack的概念：
官网上：webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。
这里补充一下，webpack和gulp的差异：
gulp是一种前端自动化构建工具，task runner，它的核心功能是：
1，task的定义和组织
2，基于文件的stream构建
3，插件体系
webpack是module bundler，模块打包器，核心功能是：
1，按照模块的依赖构建目标文件
2，loader 体系支持不同的模块
3，插件体系提供更多额外的功能
原作者链接：https://www.zhihu.com/question/45536395?sort=created，这篇写得很好，总结了很多
关于gulp的使用，请见gulp的学习日志；
二，核心概念（entry，output，loader，plugins）
1，entry和context
context的作用是webpack会先从context配置的路径下检索entry文件；
如：
const config = {
context: path.resolve('./src'), //path.resolve([from...],to)，将to参数解析为绝对路径，path是node模块
entry: 'index.js'
}
index.js文件放在src目录下；
webpack会创建一个由应用程序所有依赖构成的关系图（dependency graph），这个图的起点就是entry point，入口文件，从哪里开始，可以为单个入口，也可以为多个入口，语法可以是字符串，可以是对象，也可以是数组，对象的可扩展性较高
单个入口：
const config = {
entry: "./index.js' //字符串语法
};
module.exports = config;
等同于
const config = {
entry: {
main: "./index.js" //对象语法
}
};
module.exports = config;
也可以写多页面
const config = { entry: { pageOne: './src/pageOne/index.js', pageTwo: './src/pageTwo/index.js', pageThree: './src/pageThree/index.js'} };
每一个key会是chunk的名称
2，output
入口起点可以多个，但是输出配置只有一个
两个必须的属性：
filename：输出文件名
path：输出目录，必须是绝对路径，否则会报错。
入口起点单个，最简单的例子：
const config = {
output: {
filename: 'bundle.js',
path: '/home/proj/public/assets'
}
};
如果多个入口起点
const config = {
output: {
filename: '[name].js',
path: __dirname + '/dist' //__dirname表示当前目录
}
}
属性publicPath表示指定资源文件引用的目录，并不表示path前面可以省略publicpath里面定义的路径，比如
output: {
publicPath: '/dist',
path: path.resolve('./dist/js'),
filename: 'bundle.js'
},
output.chunkFilename是做什么的？ （深恶痛绝，参加面试的时候问到了这个问题，一脸懵逼，听过但不懂干嘛的-。-）
此选项决定了非入口chunk文件的名称，可取值在下面的filename里
(关于output.filename：
1，对于单个入口起点，filename就是一个静态string，
filename: "bundle.js"
2，如果不是单个入口，为了区分不同的bundle，需要用下面中的一种替换方式来赋予每一个bundle唯一名称
filename: '[name].bundle.js'
使用内部chunk id
filename: '[id].bundle.js'
使用每次构建过程中，唯一的hash生成
filename: '[name].[hash].bundle.js'
使用基于每个chunk内容的hash
filename: '[chunkhash].bundle.js')
output.hotUpdateChunkFilename:自定义热更新chunk的文件名，可选值见上面filename，没必要修改这个值，默认就行
output还有一些其他属性，这里不一一介绍了，详见官网
3，loader，
对模块的源代码进行转换，可以在import或加载的时候（打包前）预处理文件，有点类似于task，在webpack2.0版本中，写法如下：
module: {
rules: [
{
test: /\.txt$/, //test用来识别出应该被对应的loader进行转换的文件，用正则写法
use: 'raw-loader' //use用来转换文件，并且使其能够被添加到dependency graph中，并最终添加到bundle中，注意webpack2里面loader必须写全，webpack1中loader可以只写‘-’前面的，但是2里面会报错
}
]
}
我们也可以给use配置多个loader：
module: {
rules: [
{
test: /\.css$/,
use: [
{loader: 'style-loader'},
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
同样我们可以通过CLI使用loader，直接敲命令：
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
这会对.jade文件使用jade-loader，对.css文件使用style-loader和css-loader
每个rule分为三部分：条件，结果和嵌套规则：
1，条件：有两种输入值，resource：请求文件的绝对路径，相关属性是test，include，exclude，resource
issuer：被请求资源的模块文件的绝对路径，相关属性是issuer
这两种输入值解释一下，从app.js里面导入"./style.css"，那么resource就是/path/to/style.css，而issure就是/path/to/app.js
2，结果：有两种输入值，应用的loader：应用在resource上的loader数组，
Parser选项：用于为模块创建解析器的选项对象。
影响loader的属性：loader，options，use，query，loaders
3，嵌套规则：属性rules，oneOf制定嵌套规则
rule的其他属性，详见官方文档
4，plugin
插件的目的是解决loader无法实现的事
用法，向plugins属性传入new实例,下面我会列举一些常用的plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
const cleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack')plugins: [
new HtmlWebpackPlugin ({
title: 'Hot Module Replacement' //关于HtmlWebpackPlugin的参数配置，参考这个作者链接http://www.cnblogs.com/haogj/p/5160821.html
}),
new webpack.HotModuleReplacementPlugin(), //模块热替换,
new cleanWebpackPlugin(['dist'])， //清除dist文件夹
new webpack.optimize.CommonsChunkPlugin({ //将公共的模块拆出来，合成的文件在最开始的时候加载一次就被浏览器缓存，速度上的提升。
name: string,
filename: string,
minChunks: number|Infinity|function,
chunks: string[],
children: boolean
})
]
5，其他配置：
devtool：开发环境下推荐用“cheap-module-eval-source-map”，生产环境下推荐用“source-map”，其他的选项见官方文档
webpack-dev-server: 这个不多说，就是本地起一个服务然后监听文件变化
webpack -p 等同于 webpack --optimize --define process.env.NODE_ENV="'production'"，会执行如下步骤：
使用UglifyJsPlugin进行JS文件压缩，运行LoaderOptionsPlugin(主要是用来将webpack1迁移到webpack2上)，设置NodeJS环境变量，触发某些package包，以不同的方式进行编译
devServer：配置项见官方文档，比较多，常用的几个：
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
compress: true, //一切服务都启用gzip压缩
port: 9000,
color: true,
hot: true,
hotOnly: true,
open: true
}
6，Manifest
概念：当编译器开始执行、解析和映射应用程序时，它会保留所有模块的详细要点，这个数据集合就是Manifest
runtime：在模块交互时，连接模块所需的加载和解析逻辑，包括浏览器中已经加载的模块的连接，以及懒加载模块的执行逻辑。
当完成打包并发送给浏览器时，会在运行时通过Manifest来解析和加载模块，此时import或require已经转换成了__webpack_require__方法，此方法指向模块标识符，通过使用Manifest中的数据，runtime将能够查询模块标识符，检索出背后对应的模块。
7，target
webpack提供了多种构建目标target，表明了用于哪种环境下的javascript
node：编译为类Node.js环境可用
web：编译为类浏览器环境下可用（默认）
。。。。。。
8，懒加载
这里的懒加载指的是按需加载，只有用到模块的时候才会import进来，如下面的代码：
button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
var print = module.default;
print();
});
注意当调用 ES6 模块的 import() 方法（引入模块）时，必须指向模块的 .default 值，因为它才是 promise 被处理后返回的实际的 module 对象。
vue和react都有这种懒加载的方法，详细见官网9，shimming
webpack在引入第三方库的时候，会有一些全局依赖，比如jquery的$符号，那么使用ProvidePlugin这个插件就可以用了，（实际项目中用到）
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
})
]
10，环境变量
这里使用Node.js的process.env来引用变量
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: process.env.NODE_ENV === 'production'
})
]
使用cross-env包来跨平台设置环境变量：
package.json
{
"scripts": {
"build": "cross-env NODE_ENV=production PLATFORM=web webpack"
}
}