本文为阅读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.')
然后编译 entry.js 并打包到 bundle.js:
$ 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 entry.js bundle.js 后刷新页面看到变化 It works.It works from 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'}
]
}
}
然后我们只需要在cmd运行webpack,就可以事先与上文webpack entry.js bundle.js 一样的功能了。