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初體驗之模塊化開發