webpack初體驗之模塊化開發
寫在前面的話
上次寫過一篇關於webpack入門的博客，當時只是說借助node來完成開發，並用webpack打包以讓瀏覽器識別。其實其主要思想就是實現前端模塊化開發。
眾所周知，歷史上，JavaScript 一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。這在開發大型的、復雜的項目時就變得很困難。這就需要一種模塊加載機制，在ES6之前，就有一些模塊加載方案，比如CommonJS和AMD，上篇文章就是用到CommonJS規範。但現在，ES6已經填補了Module這塊空白。下面就簡單說下利用webpack實現前端模塊化開發。
實例
介紹
本文主要介紹webpack的入門，因為我自己也是剛上手webpack，還在學習階段，所以會講得很基礎。對於沒用過webpack的童鞋，看完能懂就是我的目的。你也可以參考我的上篇博客webpack入門。另外關於ES6模塊化,我覺得你應該要提前會懂，我就不講了，這裏有更好的文檔 ES6 Module
使用webpack之前的準備
新建一個文件夾，比如叫 webpack-demo，這個就是你的項目目錄，然後在這個文件夾裏再新建一個 src文件夾，名字可任意，在 src 文件夾裏，如圖新建幾個文件：
每個文件其實都是一個模塊，
a.js中：
export default function(){ console.log(‘Module A‘); }
b.js中：
export default function(){ console.log(‘Module B‘); }
index.js中：
import A from ‘./a.js‘ import B from‘./b.js‘ A(); B();
index.html中：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Webpack模塊化開發</title> </head> <body> <script src="./index.js"></script> </body> </html>
很顯然，這就是一個模塊化開發過程，html文件引入index.js，而index.js又依賴於a.js和b.js。我們想要的結果是在瀏覽器中打開html文件時，控制臺中打印出：
Module A
Module B
然而事實上，當我們打開控制臺時，顯示：
這是因為目前我們前端開發，瀏覽器還不支持模塊化，想要實現模塊化功能，需借助webpack。
安裝webpack
在此之前，你需要安裝好node，並對npm有些了解，node安裝完就自帶了npm。
終端進入 webpack-demo 文件夾裏，執行：
npm init
輸入這個命令後，終端會問你一系列諸如項目名稱，項目描述，作者等信息，一路回車默認即可。
你也可以執行：
npm init -y
以避免被問一些問題。
這個命令執行後，會自動生成一個package.json文件，這是一個標準的npm說明文件，裏面蘊含了豐富的信息，包括當前項目的依賴模塊，自定義的腳本任務等等。
接下來，就在本項目裏安裝webpack依賴，同樣是在 webpack-demo 文件夾裏，執行：
npm install webpack --save-dev
可能會等一會兒，執行完畢後會生成一個node_modules文件夾，可能還有一個package-lock.json文件，你先不必在意它們幹嘛的。
安裝完webpack後，還需要新建一個webpack配置文件，默認文件名是webpack.config.js。
完成以上所有步驟後，文件夾的內容如下：
配置webpack.config.js文件
接下來，我們來配置一下 webpack.config.js 這個文件：
var path = require(‘path‘); module.exports = { entry:‘./src/index.js‘, output:{ path:path.join(__dirname,‘dist‘), filename:‘main.js‘ } }
entry是入口文件地址，本項目中，需引用的是index.js文件，所以它就是入口文件；
output定義出口，path是打包後的文件存儲路徑，它必須是一個絕對路徑，可以借助node中的path模塊，來拼接一個絕對路徑。dist是一個文件夾，用來存儲打包文件，沒有則自動創建。filename則定義打包後的文件名，此文件就是存儲在dist中的。
打包
配置好文件後，在終端執行命令：
webpack
如圖：
此時就是打包成功了，我們去項目目錄看一下，會發現多了一個dist目錄，裏面有main.js文件：
此時我們就可以用這個main.js文件了，將它引入index.html中，替換index.js：
<script src="../dist/main.js"></script>
保存，在瀏覽器中打開，控制臺中：
發現此時已經達到我們的預期效果。
補充
默認的配置文件名是webpack.config.js，如果你修改了這個名字，比如修改為 config.js，此時打包，你需要這樣寫：
webpack --config config.js
指定一下文件名，效果一樣。
結尾
這就是webpack的簡單打包功能，看起來是不是很簡單。其實它並不是像本文中介紹的這樣簡單，很多強大的功能都需要通過配置文件來實現。在這之前，了解上面的知識應該能夠入門的。更多的知識，我也會慢慢記錄，你也可以參考文檔webpack中文文檔
webpack初體驗之模塊化開發