本文为阅读http://zhaoda.net/webpack-handbook/usage.html文章后总结而得
为什么要使用webpack
1、无需用户再去纠结于复杂的依赖关系
2、当有很多模块需要加载时，传统的方法有两种：
- 每个模块分别请求，这样会导致请求过多，影响速度
- 一个请求获取所有模块，这样会导致模块太大，同样影响速度
webpack通过懒加载的方式，只加载当前需要的模块，而非在最开始就获取所有模块，且无论css、js都可以通过webpack进行整合加载
使用方法
bundle.js：其他待加载文件通过webpack ‘待加载文件’ bundle.js将资源打包到bundle.js中
entry.js：待加载资源，若该资源还需要调用其它模块，则通过require（'./待加载文件）调用。
待加载文件：通过module.exports=.....，将exports的内容供外部调用。
example：
首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js：
打包过程会显示日志：
用浏览器打开 index.html 将会看到 It works. 。
接下来添加一个模块 module.js 并修改入口 entry.js
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>// entry.js
document.write('It works.')$ webpack entry.js bundle.js
打包过程会显示日志：
Hash: e964f90ec65eb2c29bb9
Version: webpack 1.12.2
Time: 54ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./entry.js 27 bytes {0} [built]用浏览器打开 index.html 将会看到 It works. 。
接下来添加一个模块 module.js 并修改入口 entry.js
// module.js
module.exports = 'It works from module.js.'
// entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模块
Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。
配置webpack
可以看到，上面的语句有些复杂，在cmd中需要打很长的命令。那么如何简化呢，通过全局配置webpack。为了配置webpack，我们需要对两个文件进行编写。
package.json
{
"name": "webpack-example",
"version": "1.0.0",
"description": "A simple webpack example.",
"main": "bundle.js",//我们的html要加载的最终通过webpack生成的文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"webpack"
],
"author": "zhaoda",
"license": "MIT",
"devDependencies": {//注意这些依赖都是事先已经安装好的
"css-loader": "^0.21.0",
"style-loader": "^0.13.0",
"webpack": "^1.12.2"
}
}然后运行npm install
webpack.config.js
该文件返回给我们的是一个json 格式的配置信息对象。
var webpack = require('webpack')
module.exports = {
entry: './entry.js',//入口文件，我们的待加载主文件
output: {//webpack处理后生成文件的路径及名称
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [//加载器
{test: /\.css$/, loader: 'style!css'}
]
}
}