用webpack给网站添加manifest

Mr_houzi 发布于2019-08-22 10:48 / 2587人阅读

摘要：一客户端给添加基本上有两种部署方式是其中一种还有一种是在本例子只针对第一种做部署配置项目目录下命令行执行以上代码安装依赖部署生产环境才部署所以找到或者是同一文件内的生产条件下的生产环境配置中添加上具体可以参照项目打包项目构建方式

.一客户端 1.html

// 给index.html添加


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

//(2)还有一种是 在 
// 本例子 只针对第一种做部署
.

2.js配置

npm install --save manifest-webpack-plugin
// 项目目录下,命令行执行以上代码,安装 manifest依赖
//部署webpack,生产环境才部署,所以找到,webpack.prod.conf.js或者是同一文件内的生产
//条件下的生产环境配置option中添加上
//具体可以参照https://www.npmjs.com/package/webpack-assets-manifest
new ManifestPlugin(path.join("dist", "manifest.json"))

3.项目打包

 npm run build //项目构建方式,不一定是run build具体看配置

// 在打包输入项目目录下能看到 manifest.json文件
// 然后提交到服务器

4.服务器配置

(1)nginx配置: 找到Ngnix服务器配置文件mime.types
在文件结尾加上 text/cache-manifest　　　　 mf manifest
重启nginx
(2)apache 和上面差不多

GPU云服务器云服务器如何给网站添加js 给网站用cdn 给js添加数据 js给视频添加水印

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91294.html

webpack多页应用架构系列（十六）：善用浏览器缓存，该去则去，该留则留

摘要：浏览器缓存简单介绍下面来简单介绍一下浏览器缓存，以及为何我要在标题中强调该去则去，该留则留。但后来我还是反转了自己，这种方法虽然能留下浏览器缓存，却做不到该去则去。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000010317802如果您对本系列文章感兴趣，欢迎关注订阅这里：h...

pekonchan 2019-08-06 13:24 评论0 收藏0
webpack多页应用架构系列（十六）：善用浏览器缓存，该去则去，该留则留

摘要：浏览器缓存简单介绍下面来简单介绍一下浏览器缓存，以及为何我要在标题中强调该去则去，该留则留。但后来我还是反转了自己，这种方法虽然能留下浏览器缓存，却做不到该去则去。本文首发于Array_Huang的技术博客——实用至上，非经作者同意，请勿转载。原文地址：https://segmentfault.com/a/1190000010317802如果您对本系列文章感兴趣，欢迎关注订阅这里：h...

娣辩孩 2019-08-20 18:16 评论0 收藏0
Webpack 最佳实践总结(二)

摘要：默认做法是告诉浏览器这个文件的缓存时间，然后当文件内容被修改，则需要重命名该文件告诉浏览器需要重新下载和缓存，例如也能做类似的工作。上一篇介绍了 Webpack 优化项目的四种技巧，分别是通过 UglifyJS 插件实现对 JavaScript 文件的压缩，css-loader 提供的压缩功能，配置NODE_ENV可以进一步去掉无用代码，tree-shaking帮助找到更多无用代码 ...

Stardustsky 2019-08-21 12:03 评论0 收藏0
借助 workbox 将网站升级成 PWA

摘要：是谷歌近几年一直在推进的应用新模型。既然如此，我们最好是站在巨人的肩膀上，这个巨人就是谷歌。是由谷歌浏览器团队发布，用来协助创建应用的库。当然直接用还是太复杂了，谷歌还很贴心的发布了一个插件，能够自动生成和静态资源列表。 PWA（Progressive Web Apps）是谷歌近几年一直在推进的 web 应用新模型。PWA 借助 Service Worker 缓存网站的静态资源，甚至...

shaonbean 2019-08-22 17:35 评论0 收藏0
Vue+thinkJs博客网站（一）之vue多页面应用的webpack3配置

摘要：首先看下的代码编译前删除之前编译生成的静态资源首先需要改的是入口文件，因为是多页面应用，需要多个入口文件来保证打包成不同的。一.项目简介本项目使用vue作为前端框架，thinkJs作为后端框架，构建个人博客网站，页面分为博客展示和后台管理，主要目的是学习使用thinkJs。现在只完成了主要的博客增删改功能，发现webpack的配置遇到了一些坑，这里先记录下。项目目录结构如下...

NickZhou 2019-08-23 15:28 评论0 收藏0