一开始考虑到浏览器的缓存问题,所以给打包的文件都带了.[hash],但是,这之后,index.html文件中的引入并没有哈希值,所以,就用到了下面的信插件:

html-webpack-plugin可以根据你设置的模板,在每次运行后生成对应的模板文件,同时所依赖的CSS/JS也都会被引入,如果CSS/JS中含有hash值,则html-webpack-plugin生成的模板文件也会引入正确版本的CSS/JS文件。

一,install:

cnpm install html-webpack-plugin --save-dev

二,在webpack.config.js引入:

const HtmlWebpackPlugin = require('html-webpack-plugin');

三,配置:

module.exports = {
entry: './app/index.js',
output: {
...
},
module: {
...
},
plugins: [
new HtmlWebpackPlugin({
title: "This is the result",
filename: "./index.html",
template: "./app/index.html",
inject: "body",
favicon: "",
minify: {
caseSensitive: false,
collapseBooleanAttributes: true,
collapseWhitespace: true
},
hash: true,
cache: true,
showErrors: true,
chunks: "",
chunksSortMode: "auto",
excludeChunks: "",
xhtml: false
})
]
};

我这里用到的写法:

        new HtmlWebpackPlugin({
title: '麦旺通后台管理',
filename: __dirname + "/dist/index.html",//复制后存储路径
template: __dirname + "/src/index.html", // 模板路径
inject: "body",//引入模块的注入位置,取值true/false/body/head,默认是body
favicon: "",//指定页面的图标
minify: {
caseSensitive: false,//是否大小写敏感
collapseBooleanAttributes: true,//是否简写boolean格式的属性如:disabled="disabled" 简写为disabled
collapseWhitespace: true//是否去除空格
},
hash:true,//是否生成hash添加在引入文件地址的末尾,类似于我们常用的时间戳
cache:true,//是否需要缓存,如果填写true,则文件只有在改变时才会重新生成
showErrors: true,//是否将错误信息写在页面里,默认true,出现错误信息则会包裹在一个pre标签内添加到页面上
chunks: "",//引入的模块,这里指定的是entry中设置多个js时,在这里指定引入的js,如果不设置则默认全部引入
chunksSortMode: "auto",//引入模块的排序方式
excludeChunks: "",//排除的模块
xhtml: false//生成的模板文档中标签是否自动关闭,针对xhtml的语法,会要求标签都关闭,默认false
}),

解释以注释的形式写在其中,便于理解和记忆。

参考地址:

https://segmentfault.com/a/1190000008590102

总结:主要是解决在dist文件夹下生成index.html

webpack——html-webpack-plugin的更多相关文章

  1. webpack入门(四)——webpack loader 和plugin

    什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffee ...

  2. webpack编写一个plugin插件

    插件向第三方开发者提供了 webpack 引擎中完整的能力.使用阶段式的构建回调,开发者可以引入它们自己的行为到 webpack 构建流程中.创建插件比创建 loader 更加高级,因为你将需要理解一 ...

  3. 初探webpack之编写plugin

    初探webpack之编写plugin webpack通过plugin机制让其使用更加灵活,以适应各种应用场景,当然也大大增加了webpack的复杂性,在webpack运行的生命周期中会广播出许多事件, ...

  4. 优雅哥学 Webpack - 01 - Webpack 5 快速体验

    程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构 本文摘要:主要讲解 webpack 5 初体验.从webpack 5 初识到便写代码.优雅哥将 ...

  5. webpack入门——webpack的安装与使用

    一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...

  6. webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server

    一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...

  7. 安装webpack和webpack打包(此文转自Henery)

    Henery博客地址为:http://blog.csdn.net/henery_002 写的很详细,可以做参考 最近要做项目优化了,尤其是前端这块,许多js需要模块化管理和相应的优化 1.输入如下地址 ...

  8. Webpack学习-Webpack初识

    一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...

  9. Webpack学习-Plugin

    原文地址:http://wushaobin.top/2019/03/15/webpackPlugin/ 什么是Plugin? 在Webpack学习-工作原理(上)一文中我们就已经介绍了Plugin的基 ...

  10. 关于webpack 以及 webpack配置和常用插件的学习记录 (1)

    主要概念: Entry :   webpack的入口,构建的第一步从entry开始. Output :   输出,经过webpack处理后的得到最终想要的代码. Loader :   模块转换工具,把 ...

随机推荐

  1. 转MQTT压力测试之Tsung的使用

    转自:http://www.cnblogs.com/lingyejun/p/7941271.html nTsung测试工具的基本测试命令为 Tsung -f  ~/.tsung/mqtt.xml -l ...

  2. RMAN检查数据库physical/logical corruption

    1.检测physical corruption RMAN> backup validate database archivelog all; 2.检测logical corruption RMA ...

  3. jquery.validate校验+jquery.form提交,配合使用

    原文链接:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html 概述:本篇主要讨论jquery.validate结合jque ...

  4. Lintcode---将二叉树拆成链表

    将一棵二叉树按照前序遍历拆解成为一个假链表.所谓的假链表是说,用二叉树的 right 指针,来表示链表中的 next 指针. 注意事项 不要忘记将左儿子标记为 null,否则你可能会得到空间溢出或是时 ...

  5. Flume 中文入门手冊

    原文:https://cwiki.apache.org/confluence/display/FLUME/Getting+Started 什么是 Flume NG? Flume NG 旨在比起 Flu ...

  6. 常用Linux shell命令汇总

    1.检查远程端口是否对bash开放:echo >/dev/tcp/8.8.8.8/53 && echo "open" 2.让进程转入后台:Ctrl + z 3 ...

  7. 每日英语:Air Pollution From Coal Use Cuts Lifespans in China, Study Shows

    Air pollution from coal combustion likely cut life expectancy in parts of China by more than five ye ...

  8. pyspark采用python3开发

    现在时间2017-04-17. python版本3.5支持pyspark python3.6目前还不支持 做法简单,只需要在bin/pyspark中增加 export PYSPARK_PYTHON=p ...

  9. JS中声明全局变量

    JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量,否则在function声明的是局部变量 ...

  10. github上搭建网站前台页面

    其实就是把html页面提交到github,为了能在线演示: 1. 首先在github网站找到你的项目 2. 点击设置 3. 找到这几个选项,选择master branch打钩,然后保存 4. 然后就会 ...