溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Webpack的用法案例，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。
從圖中我們可以看出，Webpack 可以將多種靜態資源 js、css、less 轉換成一個靜態文件，減少了頁面的請求。
接下來我們簡單為大家介紹 Webpack 的安裝與使用。
安裝 Webpack
在安裝 Webpack 前，你本地環境需要支持 node.js。
由于 npm 安裝速度慢，本教程使用了淘寶的鏡像及其命令 cnpm，安裝使用介紹參照：使用淘寶 NPM 鏡像。
使用 cnpm 安裝 webpack：
cnpm install webpack -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
執行以上命令會編譯 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，輸出結果如下：
創建第二個 JS 文件
接下來我們創建另外一個 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]在瀏覽器訪問，輸出結果如下所示：
webpack 根據模塊的依賴關系進行靜態分析，這些文件(模塊)會被包含到 bundle.js 文件中。Webpack 會給每個模塊分配一個唯一的 id 并通過這個 id 索引和訪問模塊。 在頁面啟動時，會先執行 runoob1.js 中的代碼，其它模塊會在運行 require 的時候再執行。
LOADER
Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進行轉換。
所以如果我們需要在應用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他們做兩件不同的事情，css-loader 會遍歷 CSS 文件，然后找到 url() 表達式然后處理他們，style-loader 會把原來的 CSS 代碼插入頁面中的一個 style 標簽中。
接下來我們使用以下命令來安裝 css-loader 和 style-loader(全局安裝需要參數 -g)。
cnpm install css-loader style-loader
執行以上命令后，會再當前目錄生成 node_modules 目錄，它就是 css-loader 和 style-loader 的安裝目錄。
接下來創建一個 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在瀏覽器訪問，輸出結果如下所示：
require CSS 文件的時候都要寫 loader 前綴 !style-loader!css-loader!，當然我們可以根據模塊類型（擴展名）來自動綁定需要的 loader。 將 runoob1.js 中的 require("!style-loader!css-loader!./style.css") 修改為 require("./style.css") ：
runoob1.js 文件
require("./style.css");
document.write(require("./runoob2.js"));然后執行：
webpack runoob1.js bundle.js --module-bind 'css=style-loader!css-loader'
在瀏覽器訪問，輸出結果如下所示：
顯然，這兩種使用 loader 的方式，效果是一樣的。
配置文件
我們可以將一些編譯選項放在配置文件中，以便于統一管理：
創建 webpack.config.js 文件，代碼如下所示：
module.exports = {
entry: "./runoob1.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
};接下來我們只需要執行 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 moduleswebpack 命令執行后，會默認載入當前目錄的 webpack.config.js 文件。
插件
插件在 webpack 的配置信息 plugins 選項中指定，用于完成一些 loader 不能完成的工。
webpack 自帶一些插件，你可以通過 cnpm 安裝一些插件。
使用內置插件需要通過以下命令來安裝：
cnpm install webpack --save-dev
比如我們可以安裝內置的 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 實例')
]
};然后運行:
webpack
打開 bundle.js，可以看到文件頭部出現了我們指定的注釋信息。
開發環境
當項目逐漸變大，webpack 的編譯時間會變長，可以通過參數讓編譯的輸出內容帶有進度和顏色。
webpack --progress --colors
如果不想每次修改模塊后都重新編譯，那么可以啟動監聽模式。開啟監聽模式后，沒有變化的模塊會在編譯后緩存到內存中，而不會每次都被重新編譯，所以監聽模式的整體速度是很快的。
webpack --progress --colors --watch
當然，我們可以使用 webpack-dev-server 開發服務，這樣我們就能通過 localhost:8080 啟動一個 express 靜態資源 web 服務器，并且會以監聽模式自動運行 webpack，在瀏覽器打開 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以瀏覽項目中的頁面和編譯后的資源輸出，并且通過一個 socket.io 服務實時監聽它們的變化并自動刷新頁面。
# 安裝 cnpm install webpack-dev-server -g # 運行 webpack-dev-server --progress --colors
在瀏覽器打開 http://localhost:8080/ 輸出結果如下：
感謝你能夠認真閱讀完這篇文章，希望小編分享Webpack的用法案例內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
