webpack配置路径及hash版本号,利用html-webpack-plugin自动生成html模板
在项目中,因为需要经常更新文件,但是浏览器缓存问题导致js文件不是最新的,所有想办法添加hash值。
并配置webpack打包文件配置路径:
配置webpack打包文件路径,及非入口 chunk文件:
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist/assets'), //打包的文件路径
publicPath: 'assets/', //此输出目录对应的公开 URL 需要以 / 结尾
filename: 'build-[hash].js', //此选项决定了每个输出 bundle 的名称 使用参数:例:filename: "[name].[hash].[id].bundle.js"
chunkFilename: '[id].build-[hash].js' //此选项决定了非入口(non-entry) chunk 文件的名称
},
配置 html-webpack-plugin 生成模板文件:
首先需要下载:cnpm install html-webpack-plugin --save-dev
使用:
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
filename: '../index.html'
})
],
更多详细用法,可以参看这篇文章:https://segmentfault.com/a/1190000007294861
webpack配置路径及hash版本号,利用html-webpack-plugin自动生成html模板的更多相关文章
- webpack配置报错:invalid configuration object.webpack has been initialisted using a configuration objcet that does not match thie API schema
最近接收了别人的项目,webpack配置总是报错如下:最后找到了解决办法,在此分享一下: 错误情况: 解决办法: 将package.json里面的colors删除掉即可
- 利用MyEclipse连接数据库并自动生成基于注解或者XML的实体类
一.利用MyEclipse连接数据库 1. 打开MyEclipse的数据库连接视图 然后在Other中找到"MyEclipse Database"中的DB Browser 2. 在 ...
- 利用Eclipse的JPA自动生成注解实体
新公司用的SSH(springmvc)框架,看代码的时候,发现没有hbm.xml文件,全部使用的注解形式.在一次闲聊的时候问同事,这么多entity 写起来不麻烦么.同事说根据数据库自动生成的.于是 ...
- 利用jsplumb和碰撞检测自动生成流程图
使用jsplumb构建流程图模型时,有一个需求要求,选项可以从选项表中拖拽到指定容器,并且两个选项要接触到的时候才能连接起来,不接触不能连接.效果图如下 略丑- 因为这里用到了拖拽,拖放功能,所以用到 ...
- ASP.NET MVC5利用EF,反向自动生成数据库
1.在Model类里面,写好相应的属性. using System; using System.Collections.Generic; using System.Linq; using System ...
- SpringBoot使用logback自定义配置时遇到的坑 --- 在 /tmp目录下自动生成spring.log文件
问题描述 SpringBoot项目使用logback自定义配置后,会在/tmp/ 目录下生成 spring.log的文件(如下图所示). 解决方案 通过各种资料的搜索,最终发现问题的所在(logbac ...
- 利用动软代码生成器 自动生成LINQ需要用的数据实体类 (转)
首先先建立一个模板 名称随意 我起的“生成数据实体.cmt” 代码如下: <#@ template language="c#" HostSpecific="True ...
- 利用Tkinter做的自动生成JSONSchema的小工具
前面讲到可以使用JSONSchema做json数据校验, 但是每个接口数据都手动写jsonschema太痛苦了, 就写了个小脚本,可以直接复制接口文档的mock数据然后生成一个简单的jsonschem ...
- vue-cli中的webpack配置
编辑模式下显示正常,打开的时候不知道为啥排版有问题.segementfalut链接在这里 版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2. ...
随机推荐
- .NET 介绍
In order to continue our effort of being modular and well factored we don’t just provide the entire ...
- eclipse创建springBoot项目
创建Spring Boot 工程 先在eclipse中安装spring -tool -suite插件,然后根据以下步骤可以创建1.新建Spring Starter Project 2.Packagin ...
- 测试常用的Linux命令总结
列出常用的命令和最常用的用法,排名不分先后:) 1. find在/home目录下查找以.txt结尾的文件名find /home -name "*.txt"同上,但忽略大小写find ...
- React Native组件之BackAndroid !安卓手机的物理返回键的使用
ok!在安卓手机上,当我们用物理返回键的时候,会以一次性的将程序退出来,这样是很不好的体验,所以就需要使用RN的物理返回键组件:BackAndroid,其原理也就是 分析路由,然后pop()这样! o ...
- JavaScript重点知识(一)
一.总括 基础知识: 1.变量 2.原型和原型链 3.作用域和闭包 4.异步和单线程 JS的API: 1.BOM,DOM操作 2.事件绑定 3.Ajax 4.JSOP 5.存储 二.基础知识 2.1知 ...
- jquery.js 3.0报错, Uncaught TypeError: url.indexOf is not a function
转载自:http://majing.io/questions/432 问题描述 jQuery升级到3.0.0后类型错误 jquery.js:9612 Uncaught TypeError: url ...
- 2.0 vue内置指令与自定义指令
1.1 常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签才会输出到页 ...
- 数据库锁机制(以MySQL为例)
选自:https://blog.csdn.net/aluomaidi/article/details/52460844 https://www.zhihu.com/question/51513268/ ...
- JDK7+EclipseIDE+Tomcat7.0.55++mybatis3+Maven3.2.2 构建webapp 的java 的maven项目
构建Maven项目 工具 JDK7+EclipseIDE+Tomcat7.0.55++mybatis3+Maven3.2.2 JDK 下载地址 http://www.oracle.com/techne ...
- 力扣(LeetCode)461. 汉明距离
两个整数之间的汉明距离指的是这两个数字对应二进制位不同的位置的数目. 给出两个整数 x 和 y,计算它们之间的汉明距离. 注意: 0 ≤ x, y < 231. 示例: 输入: x = 1, y ...