webpack——html-webpack-plugin
一开始考虑到浏览器的缓存问题,所以给打包的文件都带了.[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的更多相关文章
- webpack入门(四)——webpack loader 和plugin
什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffee ...
- webpack编写一个plugin插件
插件向第三方开发者提供了 webpack 引擎中完整的能力.使用阶段式的构建回调,开发者可以引入它们自己的行为到 webpack 构建流程中.创建插件比创建 loader 更加高级,因为你将需要理解一 ...
- 初探webpack之编写plugin
初探webpack之编写plugin webpack通过plugin机制让其使用更加灵活,以适应各种应用场景,当然也大大增加了webpack的复杂性,在webpack运行的生命周期中会广播出许多事件, ...
- 优雅哥学 Webpack - 01 - Webpack 5 快速体验
程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构.分享vue.Java等前后端技术和架构 本文摘要:主要讲解 webpack 5 初体验.从webpack 5 初识到便写代码.优雅哥将 ...
- webpack入门——webpack的安装与使用
一.简介 1.什么是webpack webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. ...
- webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
- 安装webpack和webpack打包(此文转自Henery)
Henery博客地址为:http://blog.csdn.net/henery_002 写的很详细,可以做参考 最近要做项目优化了,尤其是前端这块,许多js需要模块化管理和相应的优化 1.输入如下地址 ...
- Webpack学习-Webpack初识
一.前言 webpack 到底是个什么东西呢,看了一大堆的文档,没一个能看懂的,因为上来就是给个module.exports 然后列一大堆配置,这个干啥,那个干啥,没一点用.但凡要用一个东西,一个东西 ...
- Webpack学习-Plugin
原文地址:http://wushaobin.top/2019/03/15/webpackPlugin/ 什么是Plugin? 在Webpack学习-工作原理(上)一文中我们就已经介绍了Plugin的基 ...
- 关于webpack 以及 webpack配置和常用插件的学习记录 (1)
主要概念: Entry : webpack的入口,构建的第一步从entry开始. Output : 输出,经过webpack处理后的得到最终想要的代码. Loader : 模块转换工具,把 ...
随机推荐
- 转MQTT压力测试之Tsung的使用
转自:http://www.cnblogs.com/lingyejun/p/7941271.html nTsung测试工具的基本测试命令为 Tsung -f ~/.tsung/mqtt.xml -l ...
- RMAN检查数据库physical/logical corruption
1.检测physical corruption RMAN> backup validate database archivelog all; 2.检测logical corruption RMA ...
- jquery.validate校验+jquery.form提交,配合使用
原文链接:http://www.cnblogs.com/datoubaba/archive/2012/06/06/2538873.html 概述:本篇主要讨论jquery.validate结合jque ...
- Lintcode---将二叉树拆成链表
将一棵二叉树按照前序遍历拆解成为一个假链表.所谓的假链表是说,用二叉树的 right 指针,来表示链表中的 next 指针. 注意事项 不要忘记将左儿子标记为 null,否则你可能会得到空间溢出或是时 ...
- Flume 中文入门手冊
原文:https://cwiki.apache.org/confluence/display/FLUME/Getting+Started 什么是 Flume NG? Flume NG 旨在比起 Flu ...
- 常用Linux shell命令汇总
1.检查远程端口是否对bash开放:echo >/dev/tcp/8.8.8.8/53 && echo "open" 2.让进程转入后台:Ctrl + z 3 ...
- 每日英语: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 ...
- pyspark采用python3开发
现在时间2017-04-17. python版本3.5支持pyspark python3.6目前还不支持 做法简单,只需要在bin/pyspark中增加 export PYSPARK_PYTHON=p ...
- JS中声明全局变量
JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为全局变量,否则在function声明的是局部变量 ...
- github上搭建网站前台页面
其实就是把html页面提交到github,为了能在线演示: 1. 首先在github网站找到你的项目 2. 点击设置 3. 找到这几个选项,选择master branch打钩,然后保存 4. 然后就会 ...