接 | 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/ 輸出結果如下:
進入到相對應的文件打開你的項目
*請認真填寫需求信息,我們會在24小時內與您取得聯系。