最近想做一个网站，初步选型为react+koa+mangodb，想把自己从头到尾、从无到有的学习和解决问题的过程做个详细的、系统的记录，方便日后回顾。
由于开发和最终网站中可能有需要用到或者借鉴webpack的地方，本文先从介绍如何应用webpack开始一个项目，中间会有穿插自己尝试过程中的一些疑问和想法，最后简单介绍webpack原理。希望对其他人也能有些微薄的帮助。具体网站和功能会在后续系列文章中介绍。
初写文章，水平有限，竭尽全力地严谨和可靠，欢迎路过的各位提出宝贵意见。
1. webpack是什么
什么是前端打包
说到webpack，就会提到打包，前端打包是指对项目代码进行编译、压缩、混淆、合并、拆分、优化等操作，打包的目的是为了将es6/scss等这些部分浏览器无法处理的语言转换成es5/css这种浏览器可识别的，以及减小网络加载时间，安全性等，尽可能让开发者的精力集中在业务开发过程中。个人理解打包工具是在不改变程序功能逻辑的情况下，对项目代码进行处理和优化。
webpack的作用
这里引用webpack官网自己的定义：
webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles - often only one - to be loaded by the browser.
这段话的大致意思是webpack在处理你的项目时，会从入口文件递归依赖包，最后生成一个被浏览器引用的bundler文件。这里强调的是“依赖”，webpack通常会根据入口文件依次向下，找到每个依赖资源（js/css/png/scss等），并将她们打包在一个文件里，在这个文件里给每个资源编上序号，当然，当项目很大时，webpack也可以设置多个入口来递归。随着es6的推广，以及模块化理念的逐步扩散，webpack这样做的好处很多，可以编译es6/react，可以从bundler文件中抽离公共依赖包，可以按需加载等等。
webpack的优势在哪，和gulp、grunt有什么区别
- webpack是一种模块化的解决方案，每个资源都是一个模块，通过配置可以对模块的统一处理来达到目的，方便高效。
- gulp是基于流的构建工具，资源就像水流一样流过一个个坑，每个坑里可以进行压缩合并编译，以及自定义的构建任务等，最终流出结果。和webpack比是不同的处理模式。
- grunt和gulp类似，不过由于它I/O过程会生成临时文件，效率较低。
2. 如何使用webpack打包react+es6的项目
说了很多，下面就从初始化一个项目开始使用和介绍webpack，体会webpack对模块和资源依赖的管理。
先创建项目，命令行执行：
mkdir jsfiddle
cd jsfiddle
npm init
安装webpack
npm i webpack -g
安装react
npm i react react-dom --save
项目根目录下创建src文件夹，里面创建app.jsx，app.jsx里面写入最常见的react代码：
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.querySelector('#app')
);
目前直接在某个html中引入app.jsx是无效的，因为浏览器不懂解析react和es6代码，因此我们需要将它转换成es5。需要注意的是：
- Chrome和Firefox已经支持部分es6的特性了，可以直接在控制台里尝试。但开发基本上都是用Babel转码成es5的，react也可以通过babel转码。
- 日常es6功能的测试可以在这个网址上试地址
以上都只适用于某个文件或某段代码的转码，当处理项目层面的众多文件时，webpack就可以派出用场了。通过webpack引入babel-loader，让babel将.jsx转码成es5的代码在浏览器中运行。loader是webpack配置文件中处理某一类型文件的插件，这里我们将js和jsx文件用babel-loader处理。
安装babel-loader
阮一峰老师有一篇文章专门介绍babel安装。这里我们直接连同es6/react规则一起安装，babel-loader才能根据presets中的规则转码。“规则”是指babel按照源文件内容的类型进行转码，比如我们要将es6和react转码。
npm i babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
根目录下创建.babelrc文件对babel进行配置，并设置转码规则。
{
"presets": [ "es2015", "react" ]
}
根目录下创建webpack.config.js，运行webpack时会自动读取它来进行配置。
var path = require('path');
module.exports = {
entry: './src/app.jsx',
output: {
path: path.resolve(__dirname, "dist/js/"),
filename: "[name].js"
},
module: {
rules: [
{
test: /\.js|jsx?$/,
loader: 'babel-loader',
options: {
presets: ["es2015" ,"react"]
}
}
]
}
}
上面的配置依次是入口entry，输出output, 处理模块和规则module.rules，这里有
介绍，运行：
webpack
可以看到新建了dist/js目录，并生成了main.js，它有160KB，为什么这么大？？？ 因为前面说过会从入口文件(app.jsx)把依赖(react.js)打到一个文件里，也就output中指定的路径和文件。
我们在根目录下创建index.html，创建app元素，引入dist/js/main.js：
<div id="app"></div>
<script type="text/javascript" src="./dist/js/main.js"></script>
最后，浏览器打开index.html即可看到Hello world!。
Question
Q1： 如何打包css ?
如果我们react代码中引入css，
import './index.css';
要打包css怎么办？
对，webpack.config.js中module.rules下添加rule。
{
test: /\.css$/,
loader: 'css-loader'
}
并且，安装css-loader：
npm i css-loader --save
再构建一次，可以看到main.js中已经有了css的代码。
像scss，图片等想要打包都需要webpack.config.js中配置，并安装相应的loader才可，这里有各loader的列表。
注意，每次更改源文件，记得运行webpack打包才有效果。
Q2: 我不想把css打在js中，应该怎么做 ？
需要extract-text-webpack-plugin抽离css 地址，先安装，然后在上方require，记得安装style-loader，下面修改原来的设置。
{
test: /\.css$/,
// loader: 'css-loader',
loader: extractTextPlugin.extract({
fallback: "style-loader", // use失败时使用
use: "css-loader" // 抽离css的loader
}
并且，安装css-loader：
npm i css-loader --save
最后在最外层plugin中添加：
plugins: [
// 上面需要require('extract-text-webpack-plugin')
new ExtractTextPlugin("styles.css"),
]
即可将原来打包在main.js中的css抽离到styles.css中。由于如今css可与js并行加载，以及能够单独缓存，能够优化网络加载时间。
再构建一次，可以看到main.js中已经有了css的代码。
像scss，图片等想要打包都需要webpack.config.js中配置，并安装相应的loader才可，这里有各loader的列表。
注意，每次更改源文件，记得运行webpack打包才有效果。
Q3: 项目下有很多页面，有些不能打在一个包里，有些想打在一个包里？
多个页面，意味着多个入口文件，多个入口文件可以简单地在entry这个字段里设置属性即可。
entry: {
entry1: ["./src/app.jsx"],
entry2: ["./src/app2.jsx"]
},
最后每个入口文件都会打一个自己依赖关系的独立包。但是又有了新的问题，我们发现每个react页面的包都把react放进去了，文件很大，尤其时在做spa的时候，完全没有必要重复加载，因此，就有了下一个问题。
Q4：不同的依赖包里有共同引用的公共库，比如react，能否把公共库打到一个文件里？
当然可以，这个时候就要用到另外一个plugin(插件)，webpack自带的CommonsChunkPlugin。
plugins: [
new extractTextPlugin("[name].css"),
// 抽离公共库
// 上面需要require('webpack')
new webpack.optimize.CommonsChunkPlugin({
// 生成的公共库名称，如果为数组则是公共的抽了后放到哪些入口文件中
name: 'common',
minChunks: 2, // 模块被应用大于等于2次即被抽离
chunks: ['entry1', 'entry2'] // 从哪些指定的入口文件里抽
})
]
这样，我们可以看到最终common.js很大，两个入口文件较小，而且入口文件都引用了的react被打到common.js中去了，CommonsChunkPlugin还有几个属性可以用来配置，想详细了解的可以看这里;
Q5: 项目页面很多，而且工具会被应用于各个项目，不可能去手动定义每个入口文件，该怎么办？
可以指定某个文件夹，或者自定义匹配就好了。怎么做？
对我们来说，只要能生成key(文件名):value(路径)的键值对就可以了。这里我们可以使用node-glob，glob可以输入正则匹配来获取文件路径，利用glob我们可以生成该目录下所有文件路径的数组，稍微解析即可生成想要的键值对。
// 获取文件夹中文件map名
function getFilesName(path) {
// 上面需要安装glob(npm i glob)和require('glob');
// 获取的是[path1, path2]
var files = glob.sync(path);
var entries = {};
var key;
// 生成{file1: path1, file2: path2}的形式
files.forEach(function(item, idx) {
key = item.substring(item.lastIndexOf('/') + 1, item.lastIndexOf('.'));
entries[key] = item;
});
return entries;
}
webpack.config.js的入口文件可以这么写：
entry: getFilesName("./src/**.jsx"),
后面，不论多少入口文件，我们只要写在src最外层就可以当成入口文件，也可以更改entry的配置，也只需要更改入口文件夹名，或者更改匹配字符串即可。
到此，webpack使用入门已经结束，后面随着项目的开始，这里的问题也会逐步扩充。
3. webpack原理初探
待续。
