用webpack給網(wǎng)站添加manifest

Mr_houzi 發(fā)布于2019-08-22 10:48 / 2682人閱讀

摘要：一客戶端給添加基本上有兩種部署方式是其中一種還有一種是在本例子只針對(duì)第一種做部署配置項(xiàng)目目錄下命令行執(zhí)行以上代碼安裝依賴部署生產(chǎn)環(huán)境才部署所以找到或者是同一文件內(nèi)的生產(chǎn)條件下的生產(chǎn)環(huán)境配置中添加上具體可以參照項(xiàng)目打包項(xiàng)目構(gòu)建方式

.一客戶端 1.html

// 給index.html添加


...
  
//(1) 基本上有兩種部署方式,是其中一種

//(2)還有一種是 在 
// 本例子 只針對(duì)第一種做部署
.

2.js配置

npm install --save manifest-webpack-plugin
// 項(xiàng)目目錄下,命令行執(zhí)行以上代碼,安裝 manifest依賴
//部署webpack,生產(chǎn)環(huán)境才部署,所以找到,webpack.prod.conf.js或者是同一文件內(nèi)的生產(chǎn)
//條件下的生產(chǎn)環(huán)境配置option中添加上
//具體可以參照https://www.npmjs.com/package/webpack-assets-manifest
new ManifestPlugin(path.join("dist", "manifest.json"))

3.項(xiàng)目打包

 npm run build //項(xiàng)目構(gòu)建方式,不一定是run build具體看配置

// 在打包輸入項(xiàng)目目錄下能看到 manifest.json文件
// 然后提交到服務(wù)器

4.服務(wù)器配置

(1)nginx配置: 找到Ngnix服務(wù)器配置文件mime.types
在文件結(jié)尾加上 text/cache-manifest　　　　 mf manifest
重啟nginx
(2)apache 和上面差不多

云服務(wù)器 GPU云服務(wù)器如何給網(wǎng)站添加js 給網(wǎng)站用cdn 給js添加數(shù)據(jù) js給視頻添加水印

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/91294.html

相關(guān)文章

webpack多頁(yè)應(yīng)用架構(gòu)系列（十六）：善用瀏覽器緩存，該去則去，該留則留

摘要：瀏覽器緩存簡(jiǎn)單介紹下面來(lái)簡(jiǎn)單介紹一下瀏覽器緩存，以及為何我要在標(biāo)題中強(qiáng)調(diào)該去則去，該留則留。但后來(lái)我還是反轉(zhuǎn)了自己，這種方法雖然能留下瀏覽器緩存，卻做不到該去則去。本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000010317802如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：h...

pekonchan 2019-08-06 13:24 評(píng)論0 收藏0
webpack多頁(yè)應(yīng)用架構(gòu)系列（十六）：善用瀏覽器緩存，該去則去，該留則留

摘要：瀏覽器緩存簡(jiǎn)單介紹下面來(lái)簡(jiǎn)單介紹一下瀏覽器緩存，以及為何我要在標(biāo)題中強(qiáng)調(diào)該去則去，該留則留。但后來(lái)我還是反轉(zhuǎn)了自己，這種方法雖然能留下瀏覽器緩存，卻做不到該去則去。本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000010317802如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：h...

娣辯孩 2019-08-20 18:16 評(píng)論0 收藏0
Webpack 最佳實(shí)踐總結(jié)(二)

摘要：默認(rèn)做法是告訴瀏覽器這個(gè)文件的緩存時(shí)間，然后當(dāng)文件內(nèi)容被修改，則需要重命名該文件告訴瀏覽器需要重新下載和緩存，例如也能做類似的工作。上一篇介紹了 Webpack 優(yōu)化項(xiàng)目的四種技巧，分別是通過(guò) UglifyJS 插件實(shí)現(xiàn)對(duì) JavaScript 文件的壓縮，css-loader 提供的壓縮功能，配置NODE_ENV可以進(jìn)一步去掉無(wú)用代碼，tree-shaking幫助找到更多無(wú)用代碼 ...

Stardustsky 2019-08-21 12:03 評(píng)論0 收藏0
借助 workbox 將網(wǎng)站升級(jí)成 PWA

摘要：是谷歌近幾年一直在推進(jìn)的應(yīng)用新模型。既然如此，我們最好是站在巨人的肩膀上，這個(gè)巨人就是谷歌。是由谷歌瀏覽器團(tuán)隊(duì)發(fā)布，用來(lái)協(xié)助創(chuàng)建應(yīng)用的庫(kù)。當(dāng)然直接用還是太復(fù)雜了，谷歌還很貼心的發(fā)布了一個(gè)插件，能夠自動(dòng)生成和靜態(tài)資源列表。 PWA（Progressive Web Apps）是谷歌近幾年一直在推進(jìn)的 web 應(yīng)用新模型。PWA 借助 Service Worker 緩存網(wǎng)站的靜態(tài)資源，甚至...

shaonbean 2019-08-22 17:35 評(píng)論0 收藏0
Vue+thinkJs博客網(wǎng)站（一）之vue多頁(yè)面應(yīng)用的webpack3配置

摘要：首先看下的代碼編譯前刪除之前編譯生成的靜態(tài)資源首先需要改的是入口文件，因?yàn)槭嵌囗?yè)面應(yīng)用，需要多個(gè)入口文件來(lái)保證打包成不同的。一.項(xiàng)目簡(jiǎn)介 ? ? 本項(xiàng)目使用vue作為前端框架，thinkJs作為后端框架，構(gòu)建個(gè)人博客網(wǎng)站，頁(yè)面分為博客展示和后臺(tái)管理，主要目的是學(xué)習(xí)使用thinkJs。現(xiàn)在只完成了主要的博客增刪改功能，發(fā)現(xiàn)webpack的配置遇到了一些坑，這里先記錄下。項(xiàng)目目錄結(jié)構(gòu)如下...

NickZhou 2019-08-23 15:28 評(píng)論0 收藏0