Get Start
文檔地址
webpack是用來構(gòu)建app中的js module的。webpack可以簡化構(gòu)建依賴應(yīng)用的的依賴關(guān)系圖并讓依賴內(nèi)容按照規(guī)定的順序進(jìn)行構(gòu)建滨嘱。weboack可以自定義化代碼，可以在對外發(fā)布的時(shí)候分拆vendor/css/js代碼渣聚，在測試時(shí)使用hot-reload機(jī)制愉耙。
Creating a bundle
創(chuàng)建webpack的項(xiàng)目
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack
一般js項(xiàng)目的傳統(tǒng)寫法如下
//app/index.js
function component () {
var element = document.createElement('div');
/* lodash is required for the next line to work */
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component());
//index.html
<html>
<head>
<title>webpack 2 demo</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="app/index.js"></script>
</body>
</html>
需要在html中指定要加載的index.js，但是由于index.js中使用了lodash庫块饺，
所以需要先指定加載該庫赞辩，才能在index.js中使用_符號。
傳統(tǒng)的寫法可能會導(dǎo)致授艰，加載很多不需要使用的庫辨嗽，而這些不使用的庫，
會影響網(wǎng)頁的加載速度淮腾。
使用webpack則不會有該問題糟需。
下面是使用webpack實(shí)現(xiàn)同樣操作的代碼示例
首先需要安裝lodash，
npm install --save lodash
//app/index.js
import _ from 'lodash'
function component () {
var element = document.createElement('div');
/* lodash is required for the next line to work */
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component());
//index.html
<html>
<head>
<title>webpack 2 demo</title>
</head>
<body>
<!--注意加載的該js文件是通過webpack生成的-->
<script src="dist/bundle.js"></script>
</body>
</html>
代碼編寫完成后在命令行中執(zhí)行
./node_modules/.bin/webpack app/index.js dist/bundle.js
表示從app/index.js入口文件開始谷朝，生成需要使用的dis/bundle.js文件洲押。
此時(shí)訪問網(wǎng)頁，實(shí)現(xiàn)的效果是一樣的圆凰。
使用webpack打包杈帐，在打包的過程中，webpack只會將使用到的js代碼進(jìn)行打包专钉。
未用到的會被移除挑童。
ES2015
注意上面的代碼，使用了ES2015中的import/export語法驶沼。
webpack只處理import/export炮沐，除了這個之外想要使用其他的ES2015的語法，
仍然需要使用babel
webpack配置文件
真實(shí)項(xiàng)目中不可能使用命令行傳參的方式進(jìn)行配置回怜。
一般會使用配置文件的形式大年。
配置文件名為webpack.config.js.
之前給項(xiàng)目傳遞的配置參數(shù)對應(yīng)于下面的配置文件。
var path = require('path');
module.exports = {
entry: './app/index.js',//打包的入口文件
output: {
filename: 'bundle.js',//打包生成的文件名
path: path.resolve(__dirname, 'dist')//打包文件存放的路徑
}
};
按照上面配置執(zhí)行webpack命令如下所示
./node_modules/.bin/webpack --config webpack.config.js
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./app/index.js 278 bytes {0} [built]
如果存在webpack.config.js文件玉雾，webpack命令會默認(rèn)使用該配置文件
