Webpack 入門教程

時間 2019-11-13

標籤 webpack 入門教程简体版

原文原文鏈接

Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源。javascript

本章節基於 Webpack3.0 測試經過。css

從圖中咱們能夠看出，Webpack 能夠將多種靜態資源 js、css、less 轉換成一個靜態文件，減小了頁面的請求。html

接下來咱們簡單爲你們介紹 Webpack 的安裝與使用。前端

安裝 Webpack

在安裝 Webpack 前，你本地環境須要支持 node.js。java

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

使用 cnpm 安裝 webpack：webpack

cnpm install webpack -g

建立項目

接下來咱們建立一個目錄 app：web

mkdir app

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

app/runoob1.js 文件

document.write("It works.");

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

app/index.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，代碼以下所示：

app/runoob2.js 文件

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

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

app/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 文件，代碼以下：

app/style.css 文件

body { background: yellow; }

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

app/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") ：

app/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 文件，代碼以下所示：

app/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 modules

webpack 命令執行後，會默認載入當前目錄的 webpack.config.js 文件。

插件

插件在 webpack 的配置信息 plugins 選項中指定，用於完成一些 loader 不能完成的工。

webpack 自帶一些插件，你能夠經過 cnpm 安裝一些插件。

使用內置插件須要經過如下命令來安裝：

cnpm install webpack --save-dev

好比咱們能夠安裝內置的 BannerPlugin 插件，用於在文件頭部輸出一些註釋信息。

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

app/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 服務實時監聽它們的變化並自動刷新頁面。