写在前面：无论学习vue还是学习react 都是需要适当了解webpack，这样才能用的更灵活。
Webpack 是一个 CommonJs & AMD 模块打包器。 也就是他是可以使用common.js 语法的。
个人的理解：就是通过一些JS模板去组件化一些页面，同时加载，CSS，JS 执行合并压缩插入，很强大。（例如我们组件化了头部和尾部，然后我们去每个模板页面去插入这个头部和尾部的组件，达到复用的效果。我现在也是一个小白，不知道说的对不对，大神见笑了。）写笔记，一是梳理下思路，二是自己不会用时也方便查找。
[尤雨溪，尤大的推荐vue学习路线。](/p/)
好了不扯没用的，看简单的安装吧。
开始之前附上[webpack官网](https://webpack.js.org/guides/get-started/)，开始工作确认你安装了node, 命令行 node -v
执行会出现。
### 1.在你想要安装demo的地方安装一个，首先第一步初始化文件夹，执行操作 npm
init，该命令会生成一个.json.
### 2.第二步执行
npm install webpack --save-dev.
安装webpack。
npm install css-loader --save-dev
npm install style-loader --save-dev
（一个是处理CSS 的，另一个处理引入style 里面。require('style-loader!css-laoder!./style.css') 是这个样子写的，安装完成之后还需要进行设置 ）
### 4.命令行执行 mkdir src mkdir dist
创建俩个新的文件夹（或者自己在进行创建。）
src 分建下属引用script 文件夹 ，放置JS的。 style文件夹放置css的,dist 文件夹下一般放置我们生产出来之后的文件。src作为我们的引用，里面是可以放置各种资源组件的。到时候可以再去划分目录。
### 5.新建一个 空的webpack.config.js 这个是webpack 的。
### 6.package.json 里面处理webpack配置命令"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"过程，模块，打包的原因，打包的字是彩色的。然后我们只需要在 npm run webpack 就可以执行我们定义好的文件。
"name": "webpack-test",
"": "1.0.0",
"description": "",
"main": "index.js",
"babel": {
"presets": [
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.7.7",
"babel-cli": "^6.24.0",
"babel-core": "^6.24.0",
"babel-loader": "^6.4.0",
"babel-preset-latest": "^6.24.0",
"css-loader": "^0.27.3",
"ejs-loader": "^0.3.0",
"file-loader": "^0.10.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"image-webpack-loader": "^3.2.0",
"less": "^2.7.2",
"less-loader": "^3.0.0",
"post-loader": "^1.0.0",
"style-loader": "^0.14.0",
"url-loader": "^0.5.8",
"webpack": "^2.2.1"
这个是配置文件 package.json
我在进行测试的时候安装的大概配置。自己经过测试都是跑的通的。
### 7.安装html-webpack-plugin
npm install html-webpack-plugin --save-dev
安装这条命令，安装完成之后在webpack.config.js 里面进行配置，
var htmlWebpackPlugin =require('html-webpack-plugin'); 支持这个插件
html-webpack-plugin 的用处。它会自动帮你生成一个 html 文件，并且引用相关的 assets 文件(如 css, js)。
### 8.想用es6 语法 好的 安装babel-。=
npm install -save-dev babel-loader
npm install -save-dev babel-core
oader 就是处理各种资源文件的插件，处理对应的文件应该使用对应的文件。在当前的文件夹下安装babel
npm install --save-dev babel-cli babel-preset-latest
### 9.var path =require('path'); 同样是在webpack.config.js 这个配置文件里面，这样就方便处理你的路径了。
### 10.post-loader 给CSS 添加前缀
npm install post-loader --save-dev
npm install autoprefixer --save-dev
### 11. 想用less吗，那就按吧
npm install less --save-dev
npm install less-loader --save-dev
sass同理。
postcss-loader
下面网址有postcss loader的安装方法，
/package/postcss-loader
### 13. html-loader 这个loader是处理html模板的
npm install html-loader --save-dev
### 14. 处理ejs模板
npm install ejs-loader --save-dev
### 15.安装img的图片加载loader
npm install file-loader --save-dev
### 16.安装img的图片加载loader
npm install file-loader --save-dev
### 17.安装url loader
当图片小于这个值得时候自动转换为Bash64编码
npm install url-loader --save-dev
### 18. 处理图片压缩的loader
npm install image-webpack-loader --save-dev
综上整个一个安装插件全集。但是安装完还是需要在配置文件中进行引用，
贴出webpack.config.js 的配置代码
var htmlWebpackPlugin =require('html-webpack-plugin');
var path =require('path');
module.exports={
// 表示我们说打包的入口哪个文件夹引入
entry:'./src/components/app.js',
// 表示我们的输入文件
// 定义输出目录
path:'./dist',
// 定义输出文件的名字,我们这里定义文件名加上hash值
filename:'js/[name]-[hash].js',
// 如果是线上地址就加上这个
// publicPath:'/',
test:/\.js$/,
loader:'babel-loader',
// 只打包文件的位置
include:path.resolve(__dirname,'src'),
// 排除打包范围
exclude:path.resolve(__dirname,'node_modules'),
test:/\.css$/,
// postcss-loader给加前缀的插件
loader: 'style-loader!css-loader!postcss-loader',
options: {
plugins: function () {
require('autoprefixer')
test:/\.less$/,
loader: 'style-loader!css-loader!less-loader',
test:/\.html$/,
loader:'html-loader'
test:/\.ejs$/,
loader:'ejs-loader'
// 不区分大小写$/i
test:/\.(png|jpg|gif|svg)$/i,
//当图片大致小于20k的时候不会执行压缩
'url-loader?limit=20000&name=image/[name]-[hash:5].[ext]',
'image-webpack-loader'
new htmlWebpackPlugin({
// 表示模板
template:'index.html',
filename:'index-[hash].html',
// 把我们的脚本放在头部
inject:'body',
title:'webpack is good',
// 删除注释
removeComments:true,
// 去掉空格压缩
collapseWhitespace:true
这个包涵了 处理 img js
css less 模板文件 ，算是webpack的基本配置了吧-。=&&&您需要以后才能回答，未注册用户请先。一小时包教会 —— webpack 入门指南
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
| 时间 2015 |
作者 红领巾 ]
什么是 webpack？
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。
我们可以直接使用 require(XXX) 的形式来引入各模块，即使它们可能需要经过编译（比如JSX和sass），但我们无须在上面花费太多心思，因为 webpack 有着各种健全的加载器（loader）在默默处理这些事情，这块我们后续会提到。
你可以不打算将其用在你的项目上，但没有理由不去掌握它，因为以近期 Github 上各大主流的（React相关）项目来说，它们仓库上所展示的示例已经是基于 webpack 来开发的，比如 React-Bootstrap 和 Redux 。
webpack的官网是 http://webpack.github.io/ ，文档地址是 http://webpack.github.io/docs/ ，想对其进行更详细了解的可以点进去瞧一瞧。
webpack 的优势
其优势主要可以归类为如下几个：
1. webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
2. 能被模块化的不仅仅是 JS 了。
3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
4. 扩展性强，插件机制完善，特别是支持 React 热插拔（见 react-hot-loader ）的功能让人眼前一亮。
我们谈谈第一点。以 AMD/CMD 模式来说，鉴于模块是异步加载的，所以我们常规需要使用 define 函数来帮我们搞回调：
define(['package/lib'], function(lib){
function foo(){ lib.log('hello world!'); }
return { foo: foo };});
另外为了可以兼容 commonJS 的写法，我们也可以将 define 这么写：
define(function (require, exports, module){ var someModule = require("someModule"); var anotherModule = require("anotherModule");
someModule.doTehAwesome(); anotherModule.doMoarAwesome(); exports.asplode = function (){ someModule.doTehAwesome(); anotherModule.doMoarAwesome(); };});
然而对 webpack 来说，我们可以直接在上面书写 commonJS 形式的语法，无须任何 define （毕竟最终模块都打包在一起，webpack 也会最终自动加上自己的加载器）：
var someModule = require("someModule"); var anotherModule = require("anotherModule");
someModule.doTehAwesome(); anotherModule.doMoarAwesome(); exports.asplode = function (){ someModule.doTehAwesome(); anotherModule.doMoarAwesome(); };
这样撸码自然更简单，跟回调神马的说 byebye~
不过即使你保留了之前 define 的写法也是可以滴，毕竟 webpack 的兼容性相当出色，方便你旧项目的模块直接迁移过来。
安装和配置
我们常规直接使用 npm 的形式来安装：
$ npm install webpack -g
当然如果常规项目还是把依赖写入 package.json 包去更人性化：
$ npm init$ npm install webpack --save-dev
每个项目下都必须配置有一个 webpack.config.js ，它的作用如同常规的 gulpfile.js/Gruntfile.js ，就是一个配置项，告诉 webpack 它需要做什么。
我们看看下方的示例：
var webpack = require('webpack');var commonsPlugin = new monsChunkPlugin('common.js');module.exports = { //插件项 plugins: [commonsPlugin], //页面入口文件配置 entry: { index : './src/js/page/index.js' }, //入口文件输出配置 output: { path: 'dist/js/page', filename: '[name].js' }, module: { //加载器配置 loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.js$/, loader: 'jsx-loader?harmony' }, { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} ] }, //其它解决方案配置 resolve: { root: 'E:/github/flux-example/src', //绝对路径 extensions: ['', '.js', '.json', '.scss'], alias: { AppStore : 'js/stores/AppStores.js', ActionType : 'js/actions/ActionType.js', AppAction : 'js/actions/AppAction.js' } }};
⑴ plugins 是插件项，这里我们使用了一个 CommonsChunkPlugin的插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用。
⑵ entry 是页面入口文件配置，output 是对应输出项配置 （即入口文件最终要生成什么名字的文件、存放到哪里） ，其语法大致为：
{ entry: { page1: "./page1", //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出 page2: ["./entry1", "./entry2"] }, output: { path: "dist/js/page", filename: "[name].bundle.js" }}
该段代码最终会生成一个 page1.bundle.js 和 page2.bundle.js，并存放到 ./dist/js/page 文件夹下。
⑶ module.loaders 是最关键的一块配置。它告知 webpack 每一种文件都需要使用什么加载器来处理：
module: { //加载器配置 loaders: [ //.css 文件使用 style-loader 和 css-loader 来处理 { test: /\.css$/, loader: 'style-loader!css-loader' }, //.js 文件使用 jsx-loader 来编译处理 { test: /\.js$/, loader: 'jsx-loader?harmony' }, //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理 { test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, //图片文件使用 url-loader 来处理，小于8kb的直接转为base64 { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} ] }
如上，"-loader"其实是可以省略不写的，多个loader之间用“!”连接起来。
注意所有的加载器都需要通过 npm 来加载，并建议查阅它们对应的 readme 来看看如何使用。
拿最后一个 url-loader 来说，它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：
npm install url-loader -save-dev
配置信息的参数“?limit=8192”表示将所有小于8kb的图片都转为base64形式 （其实应该说超过8kb的才使用 url-loader 来映射到文件，否则转为data url形式） 。
你可以 点这里 查阅全部的 loader 列表。
⑷ 最后是 resolve 配置，这块很好理解，直接写注释了：
resolve: { //查找module的话从这里开始查找 root: 'E:/github/flux-example/src', //绝对路径 //自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名 extensions: ['', '.js', '.json', '.scss'], //模块别名定义，方便后续直接引用别名，无须多写长长的地址 alias: { AppStore : 'js/stores/AppStores.js',//后续直接 require('AppStore') 即可 ActionType : 'js/actions/ActionType.js', AppAction : 'js/actions/AppAction.js' } }
关于 webpack.config.js 更详尽的配置可以参考 这里 。
运行 webpack
webpack 的执行也很简单，直接执行
$ webpack --display-error-details
即可，后面的参数“--display-error-details”是推荐加上的，方便出错时能查阅更详尽的信息（比如 webpack 寻找模块的过程），从而更好定位到问题。
其他主要的参数有：
$ webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）来打包$ webpack --watch //监听变动并自动打包$ webpack -p //压缩混淆脚本，这个非常非常重要！$ webpack -d //生成map映射文件，告知哪些模块被最终打包到哪里了
其中的 -p 是很重要的参数，曾经一个未压缩的 700kb 的文件，压缩后直接降到 180kb （主要是样式这块一句就独占一行脚本，导致未压缩脚本变得很大） 。
上面唠嗑了那么多配置和执行方法，下面开始说说寻常页面和脚本怎么使用呗。
直接在页面引入 webpack 最终生成的页面脚本即可，不用再写什么 data-main 或seajs.use 了：
&!DOCTYPE html&&html&&head lang="en"& &meta charset="UTF-8"& &title&demo&/title&&/head&&body& &script src="dist/js/page/common.js"&&/script& &script src="dist/js/page/index.js"&&/script&&/body&&/html&
可以看到我们连样式都不用引入，毕竟脚本执行时会动态生成&style&并标签打到head里。
各脚本模块可以直接使用 commonJS 来书写，并可以直接引入未经编译的模块，比如 JSX、sass、coffee等（只要你在 webpack.config.js 里配置好了对应的加载器）。
我们再看看编译前的页面入口文件（index.js）：
require('../../css/reset.scss'); //加载初始化样式require('../../css/allComponent.scss'); //加载组件样式var React = require('react');var AppWrap = require('../component/AppWrap'); //加载组件var createRedux = require('redux').createRvar Provider = require('redux/react').Pvar stores = require('AppStore');var redux = createRedux(stores);var App = React.createClass({ render: function() { return ( &Provider redux={redux}& {function() { return &AppWrap /&; }} &/Provider& ); }});React.render( &App /&, document.body);
一切就是这么简单么么哒~ 后续各种有的没的，webpack 都会帮你进行处理。
至此我们已经基本上手了 webpack 的使用，下面是补充一些有用的技巧。
一. shimming
在 AMD/CMD 中，我们需要对不符合规范的模块（比如一些直接返回全局变量的插件）进行 shim 处理，这时候我们需要使用 exports-loader 来帮忙：
{ test: require.resolve("./src/js/tool/swipe.js"), loader: "exports?swipe"}
之后在脚本中需要引用该模块的时候，这么简单地来使用就可以了：
require('./tool/swipe.js');swipe();
二. 自定义公共模块提取
在文章开始我们使用了CommonsChunkPlugin 插件来提取多个页面之间的公共模块，并将该模块打包为 common.js 。
但有时候我们希望能更加个性化一些，我们可以这样配置：
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");module.exports = { entry: { p1: "./page1", p2: "./page2", p3: "./page3", ap1: "./admin/page1", ap2: "./admin/page2" }, output: { filename: "[name].js" }, plugins: [ new CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]), new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"]) ]};// &script&s required:// page1.html: commons.js, p1.js// page2.html: commons.js, p2.js// page3.html: p3.js// admin-page1.html: commons.js, admin-commons.js, ap1.js// admin-page2.html: commons.js, admin-commons.js, ap2.js
三. 独立打包样式文件
有时候可能希望项目的样式能不要被打包到脚本中，而是独立出来作为.css，然后在页面中以&link&标签引入。这时候我们需要 extract-text-webpack-plugin 来帮忙：
var webpack = require('webpack'); var commonsPlugin = new monsChunkPlugin('common.js'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { plugins: [commonsPlugin, new ExtractTextPlugin("[name].css")], entry: { //...省略其它配置
最终 webpack 执行后会乖乖地把样式文件提取出来：
四. 与 grunt/gulp 配合
以 gulp 为示例，我们可以这样混搭：
gulp.task("webpack", function(callback) { // run webpack webpack({ // configuration }, function(err, stats) { if(err) throw new gutil.PluginError("webpack", err); gutil.log("[webpack]", stats.toString({ // output options })); callback(); });});
当然我们只需要把配置写到 webpack({ ... }) 中去即可，无须再写 webpack.config.js 了。
更多参照信息请参阅： grunt配置 / gulp配置 。
五. React 相关
⑴ 推荐使用 npm install react 的形式来安装并引用 React 模块，而不是直接使用编译后的 react.js，这样最终编译出来的 React 部分的脚本会减少 10-20 kb左右的大小。
⑵ react-hot-loader 是一款非常好用的 React 热插拔的加载插件，通过它可以实现修改-运行同步的效果，配合 webpack-dev-server 使用更佳！
基于 webpack 的入门指引就到这里，希望本文能对你有所帮助，你也可以参考下述的文章来入门：
webpack入门指谜
webpack-howto
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
阅读(42560)
CodeSecTeam微信公众号
未长夜痛哭者，不足与语人生
手机客户端webpack打包-模块分布解析 - CNode技术社区
这家伙很懒，什么个性签名都没有留下。
webpack打包原理解析
一开始，对webpack打包原理很不熟悉，看了不少资料，但是讲的都不是很清楚，现在来梳理一遍。
所有资源统一入口
这个是什么意思呢？就是webpack是通过js来获取和操作其他文件资源的，比如webpack想处理less,
但是它并不会直接从本地的文件夹中直接通过路径去读取css文件，而且通过执行入口js文件，如果入口
文件中，或者入口文件相关联的js文件中含有 require(xx.less) 这个less文件，那么它就会通过
对应的loader去处理这个less文件
打包中的文件管理
重点来了: webpack是如何进行资源的打包的呢？
每个文件都是一个资源，可以用require导入js
每个入口文件会把自己所依赖(即require)的资源全部打包在一起，一个资源多次引用的话，只会打包一份
对于多个入口的情况，其实就是分别独立的执行单个入口情况，每个入口文件不相干(可用CommonsChunkPlugin优化)
js单文件入口的情况
比如整个应用的入口为 entry.js
entry.js引用 util1.js util2.js， 同时util1.js又引用了util2.js
关键问题是: 它打包的会不会将 util2.js打包两份？
其实不会的，webpack打包的原理为，在入口文件中，对每个require资源文件进行配置一个id, 也
就是说，对于同一个资源,就算是require多次的话，它的id也是一样的，所以无论在多少个文件中
require，它都只会打包一分
对于和上面一致拓扑图，打包后的js代码为
/* 1 */ 代码打包模块为 id 为 1
通过上面的图片我们看到，
entry.js 入口文件对应的id为 1
util1.js的id为 2
util2.js的id为 3
entry.js引用了 2 和 3, util1.js引用了 3，说明了entry和util1引用的是同一份，util2.js不会重复打包
css单文件入口的情况
上面分析了js的情况，其实css也是一个道理。它同样也会为每个css资源分配一个id, 每个资源同样也只会导入一次。
可以看到, entry.js 和 util1.js共同引用了 style2.less，那么它们作用的结果是怎么样的呢？
可以看到 entry.js 和 util1.js使用的是同一个 css资源
注意: /* 1 */ 注释表示id为1的模块
听说 ExtractTextPlugin 导出css的插件比较火， 让我们来看看它到底帮我们干了啥？配置好相关引用后
newExtractTextPlugin('[name].[chunkhash].css')
运行，在static下面生成了 一个.css 一个.js
生成的css代码为
实际就是把三个css导出到一个css文件，而且同一个入口中，多次引用同一个css，实际只会打包一份
生成的.js为
可以看到 /* 2 */ 实际就是 util1.js模块，还是引用 id为3的模块 即css2, 但是我们看 3 模块
的定义，为空函数， 它给出的解释是
removed by extract-text-webpack-plugin 实际
就是newExtractTextPlugin把相关的css全部移出去了
多文件入口的情况
讲完了单入口，还需讲讲多入口，很多时候我们项目是需要多入口
修改webpack config
可以看到 输出为两个js文件
先对 entry.js 对应的输出文件进行分析
其实可以看到， util1.js
util2.js的内容都打包进 对应的js里面去了
在对 entry2.js 输出的文件进行分析
可以看到，把entry2.js依赖的 util2.js也打包进去了
所以多 入口 实际就是 分别执行多个单入口，彼此之间不影响
问题来了，多入口对应的css呢？ 还是上面的原则，css也是分别打包的，对于每个入口所依赖的css全部打包，
输出就是这个入口对应的css
最后讨论 CommonsChunkPlugin
之前提到过，每个入口文件，都会独立打包自己依赖的模块，那就会造成很多重复打包的模块，有没有一种方法
能把多个入口文件中，共同依赖的部分给独立出来呢？ 肯定是有的 CommonsChunkPlugin
这个插件使用非常简单，它原理就是把多个入口共同的依赖都给定义成 一个新入口
为何我这里说是定义成新入口呢，因为这个名字不仅仅对应着js 而且对于着和它相关的css等，比如
HtmlWebpackPlugin 中 就能体现出来，可以它的 chunks中 加入 common 新入口，它会自动把common
的css也导入html
可以看到， 不仅仅js公共模块独立出来，连css同样也是，感受到了 webpack强大了吧
我们可以大概对 common.js
index.xxxxx.js(entry.js对应的代码) index2.xxxx.js(entry2.js对应的代码)
打包出来的代码分析一下
webpack的id 有两种 一种为 chunkid 一种为moduleId
每个chunkid 对应的是一个js文件
每个moduleid对应的是一个个js文件的内容的模块（一个js文件里面可以require多个资源，每
个资源分配一个moduleid）
为何要出来一个chunkid呢？ 这个chunkid的作用就是，标记这个js文件是否已经加载过了
/******/
// object to store loaded and loading chunks
/******/
// &0& means &already loaded&
/******/
// Array means &loading&, array contains callbacks
/******/
var installedChunks = {
/******/
/******/
installedChunks 是记录一个chunkid是否已经加载过了
我们先从 common.js分析
common.js是公共分离出来的模块，所以按理来说，它应该是一个顶层的模块，实际上，确实如此
看 common.js代码
/******/ (function(modules) { // webpackBootstrap
/******/
// install a JSONP callback for chunk loading
/******/
var parentJsonpFunction = window[&webpackJsonp&];
/******/
window[&webpackJsonp&] = function webpackJsonpCallback(chunkIds, moreModules) {
/******/
// add &moreModules& to the modules object,
/******/
// then flag all &chunkIds& as loaded and fire callback
定义了一个 webpackJsonp 函数
看 index.xxxx.js代码
webpackJsonp([0],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ },
使用 common.js中定义的函数 webpackJsonp， 所以在浏览器中加载的话，必须先加载 common.js
这个 webpackJsonp([0],[]) 第一个参数 [0] 是什么意思呢？
它就是 chunkid ,我们知道一个chunkid
id对应一个 js 文件，它对应的js文件就是它的入口文件 entry.js， 那为何这里还要是一个数组
因为一个入口文件的话，可以依赖多个js文件，其他的 id 就是它所依赖的， 其实就是配置webpack的时候
那个入口js对应的 数组
index: ['./src/js/entry.js'],
[0] 和 现在的id数组一一对应
在 index2.xxx.js中，
webpackJsonp([1],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(8);
webpack.config配置的数组 js 对应的 thunkid
index2: ['./src/js/entry2.js']
即 entry2.js 就是 thunkid 1
上面说完了thunkid, 下面就说 moduleid了， common.js为顶层js文件，通过调用webpackJsonp
对其他文件进行处理，
common.js中
/******/
var parentJsonpFunction = window[&webpackJsonp&];
/******/
window[&webpackJsonp&] = function webpackJsonpCallback(chunkIds, moreModules) {
/******/
// add &moreModules& to the modules object,
/******/
// then flag all &chunkIds& as loaded and fire callback
/******/
for(moduleId in moreModules) {
/******/
modules[moduleId] = moreModules[moduleId];
/******/
webpackJsonpCallback(chunkIds, moreModules)定义为 chunkIds, moreModules，chunkIds 说了，
就是入口文件对应的 js 文件的 thunkid, 那么这个moreModules是什么呢？ 就是一个js文件中，一个个依赖的
和 导出本身的 module
可以看index2.xxxx.js
webpackJsonp([1],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(8);
/***/ },
/***/ 8:
/***/ function(module, exports, __webpack_require__) {
var util2 = __webpack_require__(3)
var css1 = __webpack_require__(4)
/***/ }
这里 moreModules 为一个对象，key 为 moduleid, value 就是一个个 module定义
比如 function(module, exports, __webpack_require__) { module.exports = __webpack_require__(8);}
最重要的来了， 这里的话， utils2 是公共的module，它被定义在commong.js中，
/* 0 */,
/* 1 */,
/* 2 */,
/* 3 */
/***/ function(module, exports) {
module.exports = {&name&: &util2.js&}
/***/ },
/* 4 */
可以看到， index.xxx.js 的 调用 和 index2.xxx.js的调用都是一样的，都是下面这句
var util2 = __webpack_require__(3)
它会寻找 moduleid 为3的模块，然后返回
如何寻找呢 看看 webpack_require 定义
/******/
function __webpack_require__(moduleId) {
/******/
// Check if module is in cache
/******/
if(installedModules[moduleId])
/******/
return installedModules[moduleId].
/******/
// Create a new module (and put it into the cache)
/******/
var module = installedModules[moduleId] = {
/******/
exports: {},
/******/
id: moduleId,
/******/
loaded: false
/******/
if(installedModules[moduleId])
如果缓存中存在的话，就直接返回。
由于 index.xxx.js 和 index2.xxx.js都是返回的同一个 id 的模块，所以实际上 它们使用的是同一个对象
这和nodejs里面的require是一样的，所以整个项目中，require公共模块中的资源的话，实际返回的都是同一个对象
欢迎讨论和star
CNode 社区为国内最专业的 Node.js 开源技术社区，致力于 Node.js 的技术研究。
服务器赞助商为
，存储赞助商为
，由提供应用性能服务。
新手搭建 Node.js 服务器，推荐使用无需备案的