在项目中,因为需要经常更新文件,但是浏览器缓存问题导致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

    引入:const HtmlWebpackPlugin = require('html-webpack-plugin')

    使用:

      

plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
filename: '../index.html'
})
],

  更多详细用法,可以参看这篇文章:https://segmentfault.com/a/1190000007294861

webpack配置路径及hash版本号,利用html-webpack-plugin自动生成html模板的更多相关文章

  1. webpack配置报错:invalid configuration object.webpack has been initialisted using a configuration objcet that does not match thie API schema

    最近接收了别人的项目,webpack配置总是报错如下:最后找到了解决办法,在此分享一下: 错误情况: 解决办法: 将package.json里面的colors删除掉即可

  2. 利用MyEclipse连接数据库并自动生成基于注解或者XML的实体类

    一.利用MyEclipse连接数据库 1. 打开MyEclipse的数据库连接视图 然后在Other中找到"MyEclipse Database"中的DB Browser 2. 在 ...

  3. 利用Eclipse的JPA自动生成注解实体

    新公司用的SSH(springmvc)框架,看代码的时候,发现没有hbm.xml文件,全部使用的注解形式.在一次闲聊的时候问同事,这么多entity  写起来不麻烦么.同事说根据数据库自动生成的.于是 ...

  4. 利用jsplumb和碰撞检测自动生成流程图

    使用jsplumb构建流程图模型时,有一个需求要求,选项可以从选项表中拖拽到指定容器,并且两个选项要接触到的时候才能连接起来,不接触不能连接.效果图如下 略丑- 因为这里用到了拖拽,拖放功能,所以用到 ...

  5. ASP.NET MVC5利用EF,反向自动生成数据库

    1.在Model类里面,写好相应的属性. using System; using System.Collections.Generic; using System.Linq; using System ...

  6. SpringBoot使用logback自定义配置时遇到的坑 --- 在 /tmp目录下自动生成spring.log文件

    问题描述 SpringBoot项目使用logback自定义配置后,会在/tmp/ 目录下生成 spring.log的文件(如下图所示). 解决方案 通过各种资料的搜索,最终发现问题的所在(logbac ...

  7. 利用动软代码生成器 自动生成LINQ需要用的数据实体类 (转)

    首先先建立一个模板 名称随意 我起的“生成数据实体.cmt” 代码如下: <#@ template language="c#" HostSpecific="True ...

  8. 利用Tkinter做的自动生成JSONSchema的小工具

    前面讲到可以使用JSONSchema做json数据校验, 但是每个接口数据都手动写jsonschema太痛苦了, 就写了个小脚本,可以直接复制接口文档的mock数据然后生成一个简单的jsonschem ...

  9. vue-cli中的webpack配置

    编辑模式下显示正常,打开的时候不知道为啥排版有问题.segementfalut链接在这里 版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2. ...

随机推荐

  1. 【Entity framework】Code First Approach

    开篇之前感谢 china_fucan的文章给我的帮助,下面的评论也解决了很多问题同样给予感谢. code first 项目中的ORM框架如果采用的是EF,那么可能会采用code first的方式去使用 ...

  2. Docker之Swarm

    Docker学习笔记 — Swarm搭建Docker集群 Swarm在schedule节点运行容器的时候,会根据指定的策略来计算最适合运行容器的节点,目前支持的策略有:spread, binpack, ...

  3. ISTQB学习笔记

    学习ISTQB大纲此文记录初次阅读时不够明确的地方 第一章:软件测试基础1. 引起软件缺陷的原因人都会犯错误(error,mistake),因此人设计的代码或文档中会引入缺陷(defect, faul ...

  4. php格式化数字输出number_format

    <?php $num = 4999.944444; $formattedNum = number_format($num).PHP_EOL; echo $formattedNum; $forma ...

  5. es6中的find filter 在数组中查找对象

    数组的方法find和filter var aa=[{id:1,name:'张三'},{id:2,name:'李四'},{id:3,name:'王五'},{id:2,name:'赵六'}] aa.fin ...

  6. 关于在pycharm下提示ModuleNotFoundError: No module named 'XXX' 的一种可能

    在pycharm下出现“ModuleNotFoundError: No module named 'XXX' ”提示时, 在网上找大部分的解决方案是重新在pycharm里安装对应的模块,但是这不是我要 ...

  7. IPC 之 Messenger 的使用

    一.概述 Messenger 是一种轻量级的 IPC 方案,它的底层实现是 AIDL ,对 AIDL 进行了封装,方便了对它的使用.Messenger 一次只处理一个请求,所以在服务端不用考虑线程同步 ...

  8. 力扣(LeetCode) 9.回文数

    判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1: 输入: 121 输出: true 示例 2: 输入: -121 输出: false 解释: 从左向 ...

  9. cocos2dx lua 绑定之一:自动绑定自定义类中的函数

    cococs2dx 3.13.1 + vs2013 + win10 1.首先定义C++类Student 在cocos2d-x\cocos文件夹下新建一个user_define的文件夹放置两个文件. 注 ...

  10. mui体验理解

    1.      mui简介 1.1  缘起 1.基于jq的jqmobile,性能低的无法忍受,且UI难看 2.bootstrap这种响应式设计,性能在低端机不足,而且UI风格一看就是网页,不是App的 ...