溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Webpack的用法案例

發(fā)布時(shí)間：2020-11-06 14:17:34 來源：億速云 閱讀：177 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了Webpack的用法案例，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

Webpack 是一個(gè)前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源。

Webpack的用法案例

從圖中我們可以看出，Webpack 可以將多種靜態(tài)資源 js、css、less 轉(zhuǎn)換成一個(gè)靜態(tài)文件，減少了頁面的請求。

接下來我們簡單為大家介紹 Webpack 的安裝與使用。

安裝 Webpack

在安裝 Webpack 前，你本地環(huán)境需要支持 node.js。

由于 npm 安裝速度慢，本教程使用了淘寶的鏡像及其命令 cnpm，安裝使用介紹參照：使用淘寶 NPM 鏡像。

使用 cnpm 安裝 webpack：

cnpm install webpack -g

創(chuàng)建項(xiàng)目

接下來我們創(chuàng)建一個(gè)目錄 app：

mkdir app

在 app 目錄下添加 runoob1.js 文件，代碼如下：

document.write("It works.");

在 app 目錄下添加 index.html 文件，代碼如下：

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

接下來我們使用 webpack 命令來打包：

webpack runoob1.js bundle.js

執(zhí)行以上命令會編譯 runoob1.js 文件并生成bundle.js 文件，成功后輸出信息如下所示：

Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main
   [0] ./runoob1.js 29 bytes {0} [built]

在瀏覽器中打開 index.html，輸出結(jié)果如下：

Webpack的用法案例

創(chuàng)建第二個(gè) JS 文件

接下來我們創(chuàng)建另外一個(gè) js 文件 runoob2.js，代碼如下所示：

module.exports = "It works from runoob2.js.";

更新 runoob1.js 文件，代碼如下：

document.write(require("./runoob2.js"));

接下來我們使用 webpack 命令來打包：

webpack runoob1.js bundle.js
 
Hash: dcf55acff639ebfe1677
Version: webpack 1.12.13
Time: 52ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.55 kB       0  [emitted]  main
   [0] ./runoob1.js 41 bytes {0} [built]
   [1] ./runoob2.js 46 bytes {0} [built]

在瀏覽器訪問，輸出結(jié)果如下所示：

Webpack的用法案例

webpack 根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，這些文件(模塊)會被包含到 bundle.js 文件中。Webpack 會給每個(gè)模塊分配一個(gè)唯一的 id 并通過這個(gè) id 索引和訪問模塊。 在頁面啟動時(shí)，會先執(zhí)行 runoob1.js 中的代碼，其它模塊會在運(yùn)行 require 的時(shí)候再執(zhí)行。

LOADER

Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進(jìn)行轉(zhuǎn)換。

所以如果我們需要在應(yīng)用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他們做兩件不同的事情，css-loader 會遍歷 CSS 文件，然后找到 url() 表達(dá)式然后處理他們，style-loader 會把原來的 CSS 代碼插入頁面中的一個(gè) style 標(biāo)簽中。

接下來我們使用以下命令來安裝 css-loader 和 style-loader(全局安裝需要參數(shù) -g)。

cnpm install css-loader style-loader

執(zhí)行以上命令后，會再當(dāng)前目錄生成 node_modules 目錄，它就是 css-loader 和 style-loader 的安裝目錄。

接下來創(chuàng)建一個(gè) style.css 文件，代碼如下：

body {
    background: yellow;
}

修改 runoob1.js 文件，代碼如下：

require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));

接下來我們使用 webpack 命令來打包：

webpack runoob1.js bundle.js
 
Hash: a9ef45165f81c89a4363
Version: webpack 1.12.13
Time: 619ms
    Asset     Size  Chunks             Chunk Names
bundle.js  11.8 kB       0  [emitted]  main
   [0] ./runoob1.js 76 bytes {0} [built]
   [5] ./runoob2.js 46 bytes {0} [built]
    + 4 hidden modules

在瀏覽器訪問，輸出結(jié)果如下所示：

Webpack的用法案例

require CSS 文件的時(shí)候都要寫 loader 前綴 !style-loader!css-loader!，當(dāng)然我們可以根據(jù)模塊類型（擴(kuò)展名）來自動綁定需要的 loader。 將 runoob1.js 中的 require("!style-loader!css-loader!./style.css") 修改為 require("./style.css") ：

runoob1.js 文件

require("./style.css");
document.write(require("./runoob2.js"));

然后執(zhí)行：

webpack runoob1.js bundle.js --module-bind 'css=style-loader!css-loader'

在瀏覽器訪問，輸出結(jié)果如下所示：

Webpack的用法案例

顯然，這兩種使用 loader 的方式，效果是一樣的。

配置文件

我們可以將一些編譯選項(xiàng)放在配置文件中，以便于統(tǒng)一管理：

創(chuàng)建 webpack.config.js 文件，代碼如下所示：

module.exports = {
    entry: "./runoob1.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    }
};

接下來我們只需要執(zhí)行 webpack 命令即可生成 bundle.js 文件：

webpack
 
Hash: 4fdefac099a5f36ff74b
Version: webpack 1.12.13
Time: 576ms
    Asset     Size  Chunks             Chunk Names
bundle.js  11.8 kB       0  [emitted]  main
   [0] ./runoob1.js 65 bytes {0} [built]
   [5] ./runoob2.js 46 bytes {0} [built]
    + 4 hidden modules

webpack 命令執(zhí)行后，會默認(rèn)載入當(dāng)前目錄的 webpack.config.js 文件。

插件

插件在 webpack 的配置信息 plugins 選項(xiàng)中指定，用于完成一些 loader 不能完成的工。

webpack 自帶一些插件，你可以通過 cnpm 安裝一些插件。

使用內(nèi)置插件需要通過以下命令來安裝：

cnpm install webpack --save-dev

比如我們可以安裝內(nèi)置的 BannerPlugin 插件，用于在文件頭部輸出一些注釋信息。

修改 webpack.config.js，代碼如下：

var webpack=require('webpack');
 
module.exports = {
    entry: "./runoob1.js",
    output: {
        path: __dirname,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: "style-loader!css-loader" }
        ]
    },
    plugins:[
    new webpack.BannerPlugin('菜鳥教程 webpack 實(shí)例')
    ]
};

然后運(yùn)行:

webpack

打開 bundle.js，可以看到文件頭部出現(xiàn)了我們指定的注釋信息。

開發(fā)環(huán)境

當(dāng)項(xiàng)目逐漸變大，webpack 的編譯時(shí)間會變長，可以通過參數(shù)讓編譯的輸出內(nèi)容帶有進(jìn)度和顏色。

webpack --progress --colors

如果不想每次修改模塊后都重新編譯，那么可以啟動監(jiān)聽模式。開啟監(jiān)聽模式后，沒有變化的模塊會在編譯后緩存到內(nèi)存中，而不會每次都被重新編譯，所以監(jiān)聽模式的整體速度是很快的。

webpack --progress --colors --watch

當(dāng)然，我們可以使用 webpack-dev-server 開發(fā)服務(wù)，這樣我們就能通過 localhost:8080 啟動一個(gè) express 靜態(tài)資源 web 服務(wù)器，并且會以監(jiān)聽模式自動運(yùn)行 webpack，在瀏覽器打開 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以瀏覽項(xiàng)目中的頁面和編譯后的資源輸出，并且通過一個(gè) socket.io 服務(wù)實(shí)時(shí)監(jiān)聽它們的變化并自動刷新頁面。

# 安裝
cnpm install webpack-dev-server -g
 
# 運(yùn)行
webpack-dev-server --progress --colors

在瀏覽器打開 http://localhost:8080/ 輸出結(jié)果如下：

Webpack的用法案例

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享Webpack的用法案例內(nèi)容對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手