接 | cnblogs.com/

言

現實應用環境，會有使用vue開發多頁面環境的需求，這些頁面擁有共同的依賴，但是卻又都是獨立的，為了實現vue的多頁面打包，可以使用webpack，同時又因為vue-cli自帶了webpack，所以我們還可以采用vue-cli本身的配置文件進行多頁打包操作。

VUE3多頁面打包

方式一：webpack配置

webpack安裝參考：[安裝 | webpack 中文網]。

直接在package.json同級目錄下創建webpack.config.js(創建一個webpack的配置文件即可)，然后在配置文件內輸入內容：

/**

*配置

* */

/*path處理模塊，可有可無，主要是為了方便路徑鏈接，因為在配置文件內對于參數而言只接受絕對路徑，利用path.resovle(__dirname, 相對路徑)可以自動生成絕對路徑，此模塊為webpack自帶*/

let path = require('path')

/*vue-loader,vue加載插件，使用npm install vue-loader直接安裝即可

*同時對于vue3而言需要單獨安裝@vue/compiler-sfc,vue2的話是vue-compiler

*/

let vueLoader = require('vue-loader')

/*html-webpack-plugin,模版處理插件，如果存在多個html模版就需要安裝

*直接用npm install html-webpack-plugin

*/

let htmlWebPackPlugin = require('html-webpack-plugin')

/**

*compression-webpack-plugin，這是一個可選插件，目的是為了對打包后的文件進行壓縮，因為打包后會形成一個大的js文件，文件越大網頁打開速度越慢。

*/

let compressionWebpackPlugin = require('compression-webpack-plugin')

module.exports = {

/*打包入口，多入口就是從這里來的，當打包時，會去找到每一個入口文件，

并根據這個文件依賴去打包，每一個入口寫一個key-value對*/

entry: {

/*key-value格式

key就是標識名稱，之所以寫成 "/js/index/index" 格式是為了在打包時將文件輸出到對應目錄，

默認情況下，文件只會輸出到output所指定的目錄下，之后便沒有區分，這里用“/”分割就是利用輸出路徑時小漏洞形成目錄*/

/*value是要打包入口的地址，利用path.resolve處理絕對路徑問題*/

'/js/index/index': path.resolve(__dirname, './src/entry/index.js'),

'/js/index2/index2': path.resolve(__dirname, './src/entry/index2.js')

},

/*文件輸出目錄，只能有一個，[官方要求](https://www.webpackjs.com/concepts/output/)*/

output: {

/*輸出的入口文件的名稱，【name】就是剛才上面我們指定的key值，這個值不能通過外部變量或數組動態修改*/

filename: '[name].js',

/*輸出目錄，也需要指定絕對路徑*/

path: path.resolve(__dirname, './dist')

},

/*插件配置與加載*/

plugins: [

/*加載vue文件打包插件*/

new vueLoader.VueLoaderPlugin,

/*html模版打包插件，有幾個入口就要用幾個，書寫順序與上方入口順序一致，

如果只有一個，那么所有入口都會通過這一個模版打包*/

new htmlWebPackPlugin({

template: path.resolve(__dirname, './public/html/index.html'),

filename: 'index.html'

}),

new htmlWebPackPlugin({

template: path.resolve(__dirname, './public/html/index2.html'),

filename: 'xxjszx.html'

}),

/*加載壓縮插件，將test中查找到的文件類型全部壓縮，test的值對應的是一個正則表達式*/

new compressionWebpackPlugin({

test: /\.js$|\.html$|\.css$|\.jpg$|\.png$/,

threshold: 100000,

deleteOriginalAssets: false

})

],

module:{

/*文件處理規則*/

rules: [

{

/*css處理規則，直接用css-loader插件默認加載，css-loader插件也需要使用npm安裝*/

test: /\.css$/,

use: ['style-loader', 'css-loader']

},

{

/*vue文件加載規則*/

test: /\.vue$/,

use: ['vue-loader']

},

{

/*圖片文件處理規則，使用url-loader插件改寫文件名并放到指定位置*/

test: /\.(jp?g|png|svg|ico)$/,

use: 'url-loader?limit=2048&name=./img/[hash:8].[name].[ext]'

}

]

}

}

方式二：vue-cli配置

vue-cli目前已不提供vue.config.js配置文件，但是我們可以手動在package.json同級目錄創建一個，創建成功后此文件將作為優先調用對象，結構與內容同webpack類似（其實就是內置的webpack配置），可參考官網配置解釋：配置參考 | Vue CLI：

module.exports = {

/*pages指定入口，同樣是key-value對的形式，只不過是將配置集成到了一起*/

pages: {

/*名稱*/

xxjszx: {

/*入口，同上面的entry*/

entry: 'src/entry/xxjszx.js',

/*模版，同上面的html-webpack-plugin插件*/

template: 'public/html/xxjszx.html',

/*輸出后的文件名稱*/

filename: 'xxjszx.html',

},

index: {

entry: 'src/entry/index.js',

template: 'public/html/index.html',

/*這里是html輸出到的文件地址，也可以利用/斜杠表示目錄，例如index/index.html就代表創建index目錄并把index.html放到目錄下*/

filename: 'index.html',

}

}

}

vue3多頁面直接運行

使用vue.config.js配置好后，直接使用npm run dev命令即可，對應vue的vue-cli-service serve，運行可根據pages定義的key值進行路由調用頁面，key值為index那么調用格式就是/index,默認頁面是index路由對應頁面。如果采用webpack打包是無法直接運行多頁面的，需要在打包后部署到服務器上。

篇文章了解了怎么去配置以及運行webpack，但是由于簡單的打包js，有時候我們有很多css文件需要去打包，這個怎么辦呢？不用著急，這邊文章就是來一起學習怎么去簡單的打包css文件。

配置webpack環境

首先創建空文件夾通過命令全局安裝webpack（如果你已經全局安裝過webpack，可以直接進行下一步初始化根目錄）

//全局安裝
npm install -g webpack
//或者--淘寶鏡像，速度比較快
cnpm install -g webpack

其次初始化你的文件根目錄并且安裝依賴

npm init //根目錄初始化
npm install --save-dev webpack // 安裝Webpack

然后創建你的項目

eg：在根文件夾下創建一個src文件夾，src文件夾里面可以放入你的源代碼js，css等
 同樣根目錄下創建一個public文件夾，里面放入你的html文件它在這里目的在于引入打包后的js文件，這里我們先把 之后打包后的js文件命名為bundle.js

根目錄下創建并配置webpack.config.js文件

const path=require('path');
module.exports={
 //JavaScript執行入口文件,
 entry:'./src/js/main.js',
 //需要指定一下輸出的路徑path和輸出的文件名filename
 output:{
 filename:'bundle.js', //自定義輸出文件名
 path:path.resolve(__dirname,'./public/js') //自定義輸出文件所在目錄
 },
 //設置mode
 mode: 'development' // 設置mode
}

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 的安裝目錄。

接下來在src文件夾下的css文件夾里創建一個index.css文件

body{
 background: red;
}

同時配置入口文件main.js

require("!style-loader!css-loader!../css/index.css");//這個就是配置的css文件
document.write("Hello World!");

然后在根目錄下運行webpack

webpack

輸出成功后，打開你的html文件，即可看到帶有css的打包過的項目！

配置文件

require CSS 文件的時候都要寫 loader 前綴 !style-loader!css-loader!，這樣有些麻煩，我們可以通過配置文件來方便操作。

首先更改require CSS方式：

require("../css/index.css");

然后配置webpack.config.js文件

const path=require('path');
module.exports={
 //JavaScript執行入口文件,
 entry:'./src/js/main.js',
 //需要指定一下輸出的路徑path和輸出的文件名filename
 output:{
 filename:'bundle.js', //自定義輸出文件名
 path:path.resolve(__dirname,'./public/js') //自定義輸出文件所在目錄
 },
 //設置style-loader css-loader
 module:{
 rules: [
 {
 test: /\.css$/,
 use: [
 {
 loader: "style-loader"
 }, {
 loader: "css-loader"
 }
 ]
 }
 ]
 }
}

再次運行webpack，你會發現有神奇的效果。

開發環境

項目逐漸變大，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/ 輸出結果如下：

進入到相對應的文件打開你的項目