Get Start
文檔地址
webpack是用來(lái)構(gòu)建app中的js module的。webpack可以簡(jiǎn)化構(gòu)建依賴(lài)應(yīng)用的的依賴(lài)關(guān)系圖并讓依賴(lài)內(nèi)容按照規(guī)定的順序進(jìn)行構(gòu)建。weboack可以自定義化代碼，可以在對(duì)外發(fā)布的時(shí)候分拆vendor/css/js代碼，在測(cè)試時(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)寫(xiě)法如下
//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庫(kù)，
所以需要先指定加載該庫(kù)，才能在index.js中使用_符號(hào)。
傳統(tǒng)的寫(xiě)法可能會(huì)導(dǎo)致，加載很多不需要使用的庫(kù)，而這些不使用的庫(kù)，
會(huì)影響網(wǎng)頁(yè)的加載速度。
使用webpack則不會(huì)有該問(wèn)題。
下面是使用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文件是通過(guò)webpack生成的-->
<script src="dist/bundle.js"></script>
</body>
</html>
代碼編寫(xiě)完成后在命令行中執(zhí)行
./node_modules/.bin/webpack app/index.js dist/bundle.js
表示從app/index.js入口文件開(kāi)始，生成需要使用的dis/bundle.js文件。
此時(shí)訪問(wèn)網(wǎng)頁(yè)，實(shí)現(xiàn)的效果是一樣的。
使用webpack打包，在打包的過(guò)程中，webpack只會(huì)將使用到的js代碼進(jìn)行打包。
未用到的會(huì)被移除。
ES2015
注意上面的代碼，使用了ES2015中的import/export語(yǔ)法。
webpack只處理import/export，除了這個(gè)之外想要使用其他的ES2015的語(yǔ)法，
仍然需要使用babel
webpack配置文件
真實(shí)項(xiàng)目中不可能使用命令行傳參的方式進(jìn)行配置。
一般會(huì)使用配置文件的形式。
配置文件名為webpack.config.js.
之前給項(xiàng)目傳遞的配置參數(shù)對(duì)應(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命令會(huì)默認(rèn)使用該配置文件
