書圈 - 全棧開發實戰｜Vue進階——使用靜態模塊打包工具webpack－鑽石舞台

簡單介紹目前熱門的JavaScript應用程序的靜態模塊打包工具webpack。

webpack介紹

webpack根據模塊的依賴關係進行靜態分析，然後將這些模塊按照指定的規則生成對應的靜態資源。圖15.1是來自webpack官方網網站（https://webpack.js.org/）的模塊化示意圖。

■圖15.1 webpack模塊化示意圖

圖15.1的左邊是業務中編寫的各種類型文件，例如typescript、jpg、less、css，還有後續將要學習的.vue格式的文件。這些類型的文件通過特定的加載器（Loader）編譯後，最終統一生成.js、.css、.jpg、.png等靜態資源文件。在webpack中，一張圖片、一個css文件等都被稱為模塊，並彼此存在依賴關係。使用webpack的目的就是處理模塊間的依賴關係，並將它們進行打包。

webpack的主要適用場景是單頁面應用（SPA），SPA通常是由一個html文件和一堆按需加載的js文件組成。接下來學習webpack的安裝與使用。

安裝webpack與webpack-dev-server

本小節我們使用npm安裝webpack，而npm是集成在Node.js中的，所以需要首先安裝Node.js。

●

安裝Node.js和NPM

通過訪問官網https://nodejs.org/en/即可下載對應版本的Node.js，本書下載的是「14.15.4 LTS」。

下載完成後運行安裝包node-v14.15.4-x64.msi，一直下一步即可完成安裝。然後在命令行窗口中輸入命令node -v，檢查是否安裝成功。如圖15.2所示。

■圖15.2 查看Node.js的版本

如圖15.2所示，出現了版本號，說明Node.js已安裝成功。同時，npm包也已經安裝成功，可以輸入npm -v查看版本號。輸入npm -g install npm命令，將npm更新至最新版本。如圖15.3所示。

■圖15.3 查看與更新npm

●

安裝webpack

首先，創建一個目錄，例如C:\webpack-firstdemo，使用VSCode打開該目錄，並進入Terminal控制台，如圖15.4所示。

■圖15.4 打開目錄與Terminal控制台

（1）初始化配置

在圖15.4中輸入命令npm init初始化配置，該命令執行後，將有一系列選項，可以按回車快速確認，結束後將在webpack-firstdemo目錄下生成一個package.json文件。

（2）安裝webpack

初始化配置後，接着在圖15.4中輸入命令npm install webpack --save-dev在本地局部（項目中）安裝webpack。--save-dev將作為開發依賴來安裝webpack。安裝成功後，在package.json文件中將多一項配置：

"devDependencies": {"webpack": "^5.17.0",}

●

安裝webpack-dev-server

接着安裝webpack-dev-server，它可以在開發環境中提供很多服務，例如啟動一個服務器、熱更新、接口代理等。在圖15.4中輸入命令npm install webpack-dev-server --save-dev在本地局部安裝webpack-dev-server。

●

安裝webpack-cli

在webpack 4以前，不用安裝webpack-cli即可使用。在webpack 4以後，它將webpack和webpack-cli分開處理，需要安裝webpack-cli。在圖15.4中輸入命令npm install webpack-cli --save-dev在本地局部安裝webpack-cli。

如果在package.json文件的devDependencies中包含webpack、webpack-dev-server和webpack-cli，如圖15.5所示，說明已成功安裝。

■圖15.5 成功安裝webpack、webpack-dev-server和webpack-cli

webpack配置文件

webpack配置文件是一個名為webpack.config.js的.js文件，架構的好壞都體現在該配置文件中。下面我們由淺，完成配置。

【例15-7】完成webpack的基本配置。具體步驟如下：

●

初始化配置

在webpack-firstdemo目錄下創建一個名為webpack.config.js的.js文件，並初始化配置內容：

constconfig = {}module.exports= config

●

添加快速啟動webpack-dev-server腳本

在package.json的scripts裡面添加一個快速啟動webpack-dev-server服務的腳本：

"scripts": {"build":"webpack -p","test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server --open Chrome.exe --config webpack.config.js"}

在Terminal終端執行npm run build命令時，將執行webpack -p命令進行打包。

在Terminal終端執行npm run dev命令時，將執行webpack-dev-server –open Chrome.exe --config webpack.config.js命令，其中--config是指向webpack-dev-server讀取配置文件的路徑，這裡指向上面步驟中創建的webpack.config.js文件。--open將在執行命令時自動使用谷歌瀏覽器打開頁面（如果open後面沒有指定瀏覽器，則使用默認瀏覽器打開），默認地址是127.0.0.1:8080，但IP和端口號可以修改，示例如下：

"dev": "webpack-dev-server--host128.11.11.11--port9999 --open--configwebpack.config.js"

●

配置入口和出口

在webpack配置中，最重要的也是必選的兩項是入口（entry）和出口（output）。入口的作用是告訴webpack從哪裡開始尋找依賴並編譯；出口的作用是配置編譯後的文件存儲位置和文件名。

在webpack-firstdemo目錄下創建一個名為main.js空文件作為入口的文件，然後在webpack.config.js中進行入口和出口的配置：

constpath = require('path')constconfig = {entry: {main: './main'},output: {path: path.resolve(__dirname, 'dist'),publicPath: '/dist/',filename: 'bundle.js'},//開發模式:development，將保留開發時的一些必要信息//生產模式:production，盡力壓縮//none:只打包mode: 'development'}module.exports = config

上述配置entry中的main就是配置的入口，webpack將從main.js文件開始工作。output中path選項用來存放打包後文件的輸出目錄，是必填項。publicPath指定資源文件引用的目錄，如果資源存放在CDN上，這裡可以填CDN的網址。filename用於指定輸出文件的名稱。所以這裡配置的output意為打包後的文件將存儲在webpack-firstdemo/dist/bundle.js文件，在html中引入它即可。

●

創建index.html文件

在webpack-firstdemo目錄下，新建一個名為index.html文件，作為SPA的入口程序：

<divid="app">Hello Webpack! </div><scripttype="text/javascript"src="/dist/bundle.js"></script>

●

在瀏覽器中打開webpack項目

在Terminal終端執行npm run dev命令，將會自動在瀏覽器中打開頁面，如圖15.6所示。

■圖15.6 在瀏覽器中打開webpack項目

注意：執行npm run dev命令時，可能會報如下錯誤：

Cannot findmodule 'webpack-cli/bin/config-yargs'

出現上述錯誤的原因是webpack-cli的新版本與webpack-dev-server兼容性的問題，解決辦法是：首先，執行npm uninstall -g webpack-cli命令，卸載webpack-cli。然後，執行npm install webpack-cli@3.3.12 --save-dev命令，安裝低版本的webpack-cli。最後，執行npm run dev命令，將會自動在瀏覽器中打開頁面。

加載器Loaders與插件Plugins

●

加載器Loaders

在webpack中，一切皆模塊，例如.css、.js、.html、.jpg等。對於不同的模塊，需要使用不同的加載器（Loaders）來處理。Loaders是webpack最強大的功能之一。webpack通過使用不同的Loader，處理不同格式的文件，例如處理CSS樣式文件，需要使用style-loader和css-loader。下面通過NPM安裝它們：

npm installcss-loader --save-dev npm installstyle-loader --save-dev

Loaders安裝後，需要在webpack.config.js的module對象的rules屬性中配置。rules是一個數組配置規則，可以指定一系列Loaders，每個Loader都必須包含test和use兩個選項。配置規則告訴webpack符合test規定格式的文件，使用use後面的Loader處理。配置style-loader和css-loader示例代碼如下：

rules:[{test:/\.css$/,//webpack的loader執行順序是由右向左執行的，先執行css-loader後執行style-loaderuse: ['style-loader','css-loader']}]

上述配置的意思是當webpack編譯過程中遇到require()或import語句導入後綴名.css的文件時，先將.css文件通過css-loader轉換，再通過style-loader轉換，然後繼續打包。配置style-loader和css-loader完成後，就可以在配置的入口文件main.js中使用require()或import語句導入.css文件了。

webpack有許多功能強大的加載器，讀者可通過官方網站https://webpack.js.org/loaders/進行學習。

●

插件Plugins

插件Plugins是實現webpack的自定義功能，可實現Loaders不能實現的複雜功能。使用Plugins豐富的自定義API以及生命周期事件，可以控制webpack打包流程的每個環節。現在我們用一個mini-css-extract-plugin插件將散落在webpack-firstdemo中的css提取出來，並生成一個common.css文件，最終在index.html中通過的形式加載它。下面在【例15-7】的基礎上實現該插件。

【例15-8】實現CSS導出插件。具體實現過程如下：

（1）創建.css文件

在C:\webpack-firstdemo目錄中創建css文件夾，並在該文件夾中創建style.css，內容如下：

#app{font-size: 24px;color: #f50;}

（2）導入.css文件

配置style-loader和css-loader的前提下，在配置的入口文件main.js中使用import語句導入.css文件，具體如下：

import'./css/style.css'

（3）安裝mini-css-extract-plugin插件

通過npm install --save-dev mini-css-extract-plugin命令安裝mini-css-extract-plugin插件。

（4）配置插件

在配置文件webpack.config.js中配置插件，完整的webpack.config.js配置如下：

constpath = require('path')//導入插件constMiniCssExtractPlugin = require('mini-css-extract-plugin')constconfig = {entry: {main:'./main.js'},output: {path: path.resolve(__dirname, 'dist'),publicPath: '/dist/',filename: 'bundle.js'},mode: 'development',plugins: [newMiniCssExtractPlugin({filename: 'common.css'//導出的文件名})],// 添加的module裡面的rulesmodule:{rules:[{test: /\.css$/i,use: [{loader: MiniCssExtractPlugin.loader,options: {publicPath: '/dist/',},},'css-loader']}]}}module.exports = config

（5）使用CSS

在index.html中，使用元素引用common.css，具體代碼如下：

<head><linkrel="stylesheet"type="text/css"href="/dist/common.css"></head><divid="app">Hello Webpack! </div><scripttype="text/javascript"src="/dist/bundle.js"></script>

（6）測試插件

在Terminal終端執行npm run dev命令，將會自動在瀏覽器中打開頁面，如圖15.7所示。

■圖15.7 使用CSS的結果

從圖15.7可以看出，導出CSS的插件已生效。

Webpack看似複雜，但它只不過是一個js配置文件，只要明白入口、出口、加載器和插件這4個概念，使用起來就不會那麼困難。

單文件組件與vue-loader

Vue.js是一個漸進式的JavaScript框架，在使用webpack構建Vue應用時，可以使用一種新的構建模式：.vue單文件組件。

.vue是Vue.js自定義的一種文件格式，一個.vue文件就是一個單獨的組件，在文件內封裝了組件相關的代碼：html、css、js。

.vue文件由三部分組成<template>、<style>、<script>，示例如下：

可是，瀏覽器本身並不識別.vue文件，所以必須對.vue文件進行加載解析，此時需要webpack的vue-loader加載器。下面通過一個實例講解如何使用vue-loader實現單文件組件。

【例15-9】使用vue-loader實現單文件組件。

在【例15-8】的基礎上完成【例15-9】。具體實現過程如下：

●

安裝開發依賴

使用vue-loader加載解析.vue文件時，需要使用vue-template-compiler編譯器對模板內容預編譯為JavaScript渲染函數。安裝Vue、vue-loader以及vue-template-compiler依賴時，保證版本一致（編寫本書時，還沒有對應Vue 3的vue-template-compiler，因此本節使用的是Vue 2）。另外，還需要安裝babel-loader加載器解析ES語法。進入webpack-firstdemo目錄按照以下命令安裝依賴：

npm install-D vue vue-loader vue-template-compilernpm install-D vue-style-loadernpm install-D babel-loader @babel/core @babel/preset-env

●

修改配置文件

在配置文件webpack.config.js中，添加vue-loader和babel-loader的配置。修改後的配置文件內容如下：

constpath = require('path')constMiniCssExtractPlugin = require('mini-css-extract-plugin')constVueLoaderPlugin = require('vue-loader/lib/plugin')constconfig = {entry: {main:'./main.js'},output: {path: path.resolve(__dirname, 'dist'),publicPath: '/dist/',filename: 'bundle.js'},mode: 'development',module:{rules:[{test: /\.vue$/,loader: 'vue-loader'},{test: /\.css$/i,use: [//vue文件中的css'vue-style-loader',{loader: MiniCssExtractPlugin.loader,options: {publicPath: '/dist/',},},'css-loader']},{test: /\.m?js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}}]},plugins: [// 請確保引入該插件！newVueLoaderPlugin(),newMiniCssExtractPlugin({filename: 'common.css'//導出的文件名})]}module.exports = config

●

創建app.vue文件

在webpack-firstdemo目錄下新建一個app.vue文件作為根實例組件，具體內容如下：

<template><div>你好，{{vname}}</div></template><script>exportdefault{data(){return{vname: 'Vue'}}}</script><stylescoped>div{color: red; font-size: 40pt; }</style>

●

修改入口main.js

.vue是沒有名稱的組件，在父組件中使用時可以對它自定義。現在需要在main.js中使用它。修改後的main.js內容如下：

import'./css/style.css'//下面是Vue3的寫法/*//導入Vue框架中的createApp方法，在Vue3中不能全局導入Vueimport {createApp} from 'vue'//導入app.vue組件import App from './app.vue'//創建Vue根實例createApp(App).mount("#app")*///下面是Vue2的寫法importVue from'vue'//導入app.vue組件importApp from'./app.vue'//創建Vue根實例constvm = newVue({//指定vm實例要控制的頁面區域el: '#app',//通過render函數，把指定的組件渲染到el區域中render: h=>h(App)/*** 相當於 render: function(h){* return h(app)* }*/})

●

運行測試

執行命令npm run dev，運行結果如圖15.8所示。

■圖15.8 例15-9的運行結果

下面在webpack-firstdemo目錄中再新建一個.vue文件input.vue，具體代碼如下：

<template><div><inputv-model="uname"><p>輸入的用戶名是：{{ uname }}</p></div></template><script>exportdefault{props: {uname: {type: String}}}</script>

在根實例app.vue組件中，導入input.vue組件，修改後的app.vue代碼如下：

<template><div>你好，{{vname}}<v-input></v-input></div></template><script>importvInput from'./input.vue'exportdefault{data(){return{vname: 'Vue'}},components: {//vInput作為根組件的子組件vInput}}</script><stylescoped>div{color: red; font-size: 40pt; }</style>

執行命令npm run dev，運行結果如圖15.9所示。