1. 程式人生 > >webpack初體驗之模塊化開發

webpack初體驗之模塊化開發

dirname 所有 絕對路徑 image 內容 有一個 介紹 ctype package

寫在前面的話

上次寫過一篇關於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初體驗之模塊化開發