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

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

　　　　使用：

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

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

转载于:https://www.cnblogs.com/LChenglong/p/9243641.html

webpack配置路径及hash版本号，利用html-webpack-plugin自动生成html模板相关推荐

js webpack 配置路径_Vue.js学习No.5(WebPack配置二)
学习的内容如下开始当我们需要频繁的修改main.js 我们每次都需要去构建,这样显得很麻烦,webpack .srcmain.js -o .distbundle.js,通过配置文件去配置每次的打包 ...
node.js require 自动执行脚本并生成html,利用node.js实现自动生成前端项目组件的方法详解...
本文主要给大家介绍了关于利用node.js实现自动生成前端项目组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 脚本编写背景写这个小脚本的初衷是,项目本身添加一个组件太 ...
js webpack 配置路径_vue使用webpack配置路径别名
原始的文件引用方式的缺点要拼写一个巨长无比的字符串,而且每引用一次都要拼写一次. 如果这个文件位置变了,我就要把所有引用它的文件都修改一次. 下面介绍一种很优雅的方式,使用webpack的resolv ...
js webpack 配置路径_webpack中如何设置html引入js的路径
如题所一如分算需上来处一定迹面数一跳这件我子作示,如果webpa新直能分支调二浏页器朋代说,事刚需求ck这样配置 var htmlWebpackPlugin = require('html-webpa ...
mye连接mysql_利用MyEclipse连接数据库并自动生成基于注解或者XML的实体类
一.利用MyEclipse连接数据库 1. 打开MyEclipse的数据库连接视图然后在Other中找到"MyEclipse Database"中的DB Browser 2. 在 ...
利用Eclipse的JPA自动生成注解实体
新公司用的SSH(springmvc)框架,看代码的时候,发现没有hbm.xml文件,全部使用的注解形式.在一次闲聊的时候问同事,这么多entity 写起来不麻烦么.同事说根据数据库自动生成的.于是 ...
webpack配置路径问题
一般写vue项目,结合vue-cli,webpack使用. 必定会涉及到组件的引用问题这篇文章主要是教你怎样改文件的路径首先找到build文件夹下面的webpack.base.conf.js这个文 ...
python自动生成word报告_利用Python实现报告自动生成
前几天,在网上看到一篇介绍利用Python组件实现MS word内容生成的文章.可能是很久没接触编码,感觉在技术领域变得有点孤陋寡闻了,看见一些实用的功能都觉的屌屌的.以前经常通过代码写Excel文件 ...
如何用python自动改试卷_利用Python和Jinja2自动生成试卷
一.概述 Jinja2是Python 3下一个被广泛应用的模版引擎,它的设计思想来源于Django的模板引擎,并扩展了其语法和一系列强大的功能.其中最显著的一个是增加了沙箱执行功能和可选的自动转义功能 ...
vue-cli中的webpack配置
编辑模式下显示正常,打开的时候不知道为啥排版有问题. segementfalut链接在这里版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2 ...

webpack配置路径及hash版本号，利用html-webpack-plugin自动生成html模板

webpack配置路径及hash版本号，利用html-webpack-plugin自动生成html模板相关推荐

最新文章

热门文章