1. 初始化項目
首先，讓我們用命令行創(chuàng)建一個名為 webapp 的項目文件夾雇锡，初始化 npm搁痛，本地安裝 webpack。
// 命令行 輸入：
mkdir webapp && cd webapp
npm init -y
npm install --save-dev webpack
如果你是初次接觸 npm和命令行工具逼侦，建議看看我的這篇 npm 應(yīng)用基礎(chǔ)匿辩。
運行了上述命令以后，在你本地的 webapp 項目文件夾創(chuàng)建一個包含 index.js 文件的 src（source的縮寫）文件夾榛丢，和一個包含 index.html 文件的 dist（distribution的縮寫）的文件夾铲球。顧名思義， src 文件夾中放置我們的源代碼晰赞， dist 文件夾是我們發(fā)布的項目文件夾稼病。這時候你 webapp 文件夾應(yīng)該包含如下文件：
// webapp 文件夾目錄結(jié)構(gòu)：
webapp
|- package.json
|- /src
|- index.js
|- /dist
|- index.html
編寫 index.html 文件內(nèi)容如下：
// index.html 內(nèi)容：
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="bundle.js"></script> <!-- 這個 bundle.js 將要使用webpack生成 -->
</body>
</html>
現(xiàn)在如果打開這個網(wǎng)頁，會報錯找不到 bundle.js 文件掖鱼。不用擔(dān)心然走，我們接下來就用 webpack 命令行生成這個文件。
2. 生成主 js 文件
首先戏挡，我們要編寫 index.js 文件內(nèi)容如下：
// index.js 內(nèi)容：
import _ from 'lodash'; // webpack 支持多種模塊引用語法芍瑞，包括CommonJs，AMD以及ES6褐墅。我推薦使用ES6語法拆檬，以后我會寫文章專門解釋他們的區(qū)別。
function component() {
var element = document.createElement('div');
element.innerHTML = _.join( ['Hello', 'webpack'], ' ' );
return element;
}
document.body.appendChild( component() );
可以看到妥凳，我們的項目入口 js 文件是 index.js竟贯，它引用了 lodash 模塊，所以在生成主 js 文件前逝钥，我們需要安裝 lodash 依賴：
// 命令行 輸入：
npm install --save lodash
安裝完成后屑那，package.json 文件中的出一個 dependencies 的對象，該對象包含一個 lodash 屬性艘款。
可能細心的你注意到了齐莲，我們安裝 webpack 的時候用了
--save-dev選項，但是安裝lodash的時候用了--save選項磷箕。并且选酗，在package.json 文件中，webpack 和 lodash 也分別出現(xiàn)在了 devDependencies 和 dependencies 對象中岳枷。這里的--save表示保存為依賴（dependency）芒填，依賴項就是運行我們的項目所必須的模塊，而-save-dev表示保存為開發(fā)依賴（development dependency）空繁，是我們開發(fā)的時候所必須的模塊殿衰，但并不是運行項目或者在生產(chǎn)環(huán)境下必須的模塊。兩者一個顯著的特征區(qū)別就是當(dāng)我們在命令行執(zhí)行npm install時盛泡，npm 只會幫我們安裝 dependencies 對象中的依賴模塊闷祥。
然后我們可以通過命令行將 index.js 連同依賴的 lodash 一起打包成一個名為 bundle.js 的主文件：
// 命令行 輸入：
./node_modules/.bin/webpack src/index.js dist/bundle.js
好吧，我承認這是一個蹩腳的寫法。并且windows下路徑連接符還需要用\凯砍。
但是箱硕，我們成功地使用 webpack 生成了一個 bundle.js 文件，并且我們在瀏覽器打開 index.html 文件悟衩，可以看到“Hello webpack”剧罩。下面我要講解如何簡單地配置 webpack 使我們可以簡化上述命令。
3. 簡單配置 webpack
在我們的項目文件夾下創(chuàng)建一個 webpack.config.js 文件座泳，如下：
// webapp 文件夾目錄結(jié)構(gòu)：
webapp
|- package.json
* |- webpack.config.js
|- /src
|- index.js
|- /dist
|- index.html
|- bundle.js
并按照如下代碼編輯 webpack.config.js 文件：
// webpack.config.js 內(nèi)容：
const path = require('path'); // path是node內(nèi)置的模塊
module.exports = {
entry: './src/index.js', // 入口文件的相對路徑
output: { // 輸出
filename: 'bundle.js', // 文件名
path: path.resolve(__dirname, 'dist') // 文件所在目錄的絕對路徑
}
};
這時候我們只需在命令行內(nèi)輸入：
// 命令行 輸入：
// Linux, Mac 下：
./node_modules/.bin/webpack
// 或者 windows:
.\node_modules\.bin\webpack
就能生成 bundle.js 文件惠昔。如果我們還想進一步簡化該命令，我們就需要修改 package.json 文件的 “scripts” 對象了挑势。
4. 配置 package.json 的 scripts
package.json 的 scripts 對象負責(zé)存放我們自定義的命令行命令镇防，該對象的每個屬性對應(yīng)了一個命令，屬性名為我們在npm run后面輸入的命令的名稱潮饱，屬性值為這個命令来氧。因此，我們可以這樣修改 package.json：
// package.json 內(nèi)容：
{
...
"scripts": {
"build": "webpack" //這里不用再寫安裝路徑了
},
...
}
注意在 scripts 對象里饼齿，我們可以訪問本地安裝的 npm 包饲漾，而不用再寫這些包的安裝路徑了。所以缕溉，最終我們輸入如下命令就能完成我們的工作了：
// 命令行 輸入：
npm run build
