Vue-CLI@4——html-webpack-plugin默认配置的获取与修改
官方文档
https://cli.vuejs.org/zh/guide/webpack.html#简单的配置方式
获取默认配置
配置vue.config.js
在项目根目录下创建vue.config.js文件,键入如下代码:
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {configureWebpack: config => {config.plugins.forEach((val) => {if (val instanceof HtmlWebpackPlugin) {console.log(val)console.log(val.options.templateParameters.toString())}}) }
}
其中config就是vue-cli中,webpack的默认配置
修改eslintrc.js
在该文件的eslintre.js中找到rules字段,删除no-console:
运行npm run build
运行npm run build ,控制台就会打印出相关的配置
有些外部工具可能需要通过一个文件访问解析好的 webpack 配置,比如那些需要提供 webpack 配置路径的 IDE 或 CLI。在这种情况下你可以使用如下路径:
<projectRoot>/node_modules/@vue/cli-service/webpack.config.js
html-webpack-plugin默认配置
{options: {template: 'D:\\nodeProgram\\vue-demo\\public\\index.html',templateParameters: (compilation, assets, pluginOptions) => {// enhance html-webpack-plugin's built in template paramslet statsreturn Object.assign({// make stats lazy as it is expensiveget webpack () {return stats || (stats = compilation.getStats().toJson())},compilation: compilation,webpackConfig: compilation.options,htmlWebpackPlugin: {files: assets,options: pluginOptions}}, resolveClientEnv(options, true /* raw */))},filename: 'index.html',hash: false,inject: true,compile: true,favicon: false,minify: {removeComments: true,collapseWhitespace: true,removeAttributeQuotes: true,collapseBooleanAttributes: true,removeScriptTypeAttributes: true},cache: true,showErrors: true,chunks: 'all',excludeChunks: [],chunksSortMode: 'auto',meta: {},title: 'Webpack App',xhtml: false}
}
参数详解
title:生成的html文档的标题。配置该项,它并不会替换指定模板文件中的title元素的内容,除非html模板文件中使用了模板引擎语法来获取该配置项值,如下ejs模板语法形式:
<title>{%= o.htmlWebpackPlugin.options.title %}</title>
filename:输出文件的文件名称,默认为index.html,不配置就是该文件名;此外,还可以为输出文件指定目录位置(例如'html/index.html')
1、filename配置的html文件目录是相对于webpackConfig.output.path路径而言的,不是相对于当前项目目录结构的。 2、指定生成的html文件内容中的link和script路径是相对于生成目录下的,写路径的时候请写生成目录下的相对路径。
template:指定你生成的文件所依赖哪一个html文件模板,支持加载器(如handlebars、ejs、undersore、html等),使用自定义的模板文件的时候,需要安装对应的loader
inject :向template或者templateContent中注入所有静态资源,不同的配置值注入的位置不经相同。
true //默认值,script标签位于html文件的 body 底部 body //script标签位于html文件的 body 底部 head //script标签位于html文件的 head中 false //不插入生成的js文件,这个几乎不会用到的
templateContent: string|function,可以指定模板的内容,不能与template共存。配置值为function时,可以直接返回html字符串,也可以异步调用返回html字符串。
favicon:html文件favicon,添加特定favicon路径到输出的html文档中,这个同
title
配置项,需要在模板中动态获取其路径值
hash
:true|false,是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值,添加hash形式如下所示:html <script type="text/javascript" src="common.js?a3e1396b501cdd9041be"></script>
minify: {....}|false;minify会对生成的html文件进行压缩。默认是false,可以对minify进行配置
传递 html-minifier 选项给 minify 输出,false就是不使用html压缩,minify具体配置参数请点击html-minifier
plugins: [new HtmlWebpackPlugin({minify: {removeAttributeQuotes: true // 移除属性的引号}}) ]
cache:true|fasle, 默认true;内容变化的时候生成一个新的文件,如果为true表示在对应的thunk文件修改后就会emit文件。
showErrors: true|false,默认true;是否将错误信息输出到html页面中。webpack报错的时候,会把错误信息包裹再一个pre中,默认是true。在生成html文件的过程中有错误信息,输出到页面就能看到错误相关信息便于调试。
chunks:chunks主要用于多入口文件,当你有多个入口文件,那就回编译后生成多个打包后的文件,选择使用那些js文件 ,没有设置chunks选项,那么默认是全部显示(当配置vue开发多页面时,记得配置chunks,否则会有html引入不需要的js报错 [Vue warn]: Cannot find element:)
excludeChunks:与
chunks
配置项正好相反,用来配置不允许注入的thunk。xhtml:true|fasle, 默认false;如果为 true ,则以兼容 xhtml 的模式引用文件。
chunksSortMode:none | auto| function,默认auto; 允许指定的thunk在插入到html文档前进行排序。
function值可以指定具体排序规则; auto基于thunk的id进行排序; none就是不排序
修改默认配置
直接修改
在获取到html-webpack-plugin的默认配置对象后,可通过修改该对象直接修改配置,比如修改输出文件名:
configureWebpack: config => {config.plugins.forEach((val) => {if (val instanceof HtmlWebpackPlugin) {console.log(val)console.log(val.options.templateParameters.toString())val.options.filename = 'indexx.html' // 修改输出文件名}})
}
链式修改
比直接修改表达能力更强而且更加安全,需要用到chainWebpack,以修改模板路径为例,代码如下:
chainWebpack: config => {config.plugin('html').tap(args => {args[0].template = '/Users/username/proj/app/templates/index.html'return args})
}
参考文章
https://blog.csdn.net/huzhenv5/article/details/104040077
https://segmentfault.com/a/1190000019920162
https://blog.csdn.net/D_claus/article/details/84140751
https://www.cnblogs.com/wonyun/p/6030090.html
Vue-CLI@4——html-webpack-plugin默认配置的获取与修改相关推荐
- Vue CLI 3 安装、创建、配置、安装插件
一.安装 1.全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它: npm uninstall vue-cli -g //或者 yarn global remove vue-cli 注 ...
- vite以及webpack(@vue/cli 5.x) vue3 alias别名配置
一.vite 之前写了一个vite的项目,配置找了半天,结果如下: import { defineConfig } from 'vite' import vue from '@vitejs/plugi ...
- Vue CLI 3结合Lerna进行UI框架设计
第一次在掘金发文章,有点啰里啰嗦,大家见谅. 当前大部分UI框架设计的Webpack配置都相对复杂,例如Element.Ant Design Vue和Muse-UI等Vue组件库.例如Element, ...
- Vue CLI 是如何实现的 -- 终端命令行工具篇
若微信中阅读体验不佳,可点击阅读原文在 PC 端阅读. Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供了终端命令行工具.零配置脚手架.插件体系.图形化管理界面等.本文暂且只分析 ...
- 七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用(安装,拉取2.x模板,初始化项目),Vue cli2详解,Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
- Vue CLI 官方文档(一)@vue/cli、@vue/cli-service、插件和 Preset
Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件和 Preset 文章目录 Vue CLI 官方文档(一)@vue/cli.@vue/cli-service.插件 ...
- 使用Vue CLI 3提升您的Vue.js工作流程
没有命令行界面(CLI)工具的帮助,我们几乎无法想象现代Web开发. 通过减少重复繁琐的任务,它们极大地促进并加快了开发流程. 手动设置项目,具有所有的上线,构建,测试,预处理,优化和依赖项跟踪功能, ...
- Vue CLI的详细介绍与讲解
什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI. 在使用Vue.js开发大型应用时 ...
- Vue Cli 3 搭建一个可按需引入组件的组件库架子
Ant-design.Element 这些框架都有按需引入组件的功能.需要使用哪个组件,就引入哪个组件,这样那些没必要的组件就不会打包到我们的项目里了.跟着我下边的步骤,相信大家也能搭建出一个按需引入 ...
最新文章
- RxJava 过滤操作符 take 与 takeLast
- 读博无门,就业碰壁,孤独当了7个月“民科”后,他的论文中了顶会
- Spark编程指南笔记
- c语言获取时间并存储,如何在C程序中获取日期和时间值?
- microsoft excel 正在等待其他某个应用程序_浅谈应该购买英特尔Mac还是等待购买基于Arm的Mac...
- c#:winform中多线程的使用
- Css中部分知识点整理【笔记整理】
- 简单入门Buffer
- TQ2440实现触摸屏和qt图形 解决segmentation fault
- linux环境c语言实现who,Linux下C语言编程环境的搭建1
- dell 恢复介质_安装DELL原装windows系统,使用 USB 恢复介质来安装 Microsoft Windows
- 面试时,当HR问“你有什么要问我的吗”时,应该问什么?
- svn版本库浏览器_版本库浏览器
- pytorch softmax 中参数 dim 的理解
- jsp注册页面java代码_使用Servlet和JSP实现用户注册功能
- 地球围绕着太阳的概念和计算
- 2、软件的生命周期软件测试的工作流程
- 通向大数据的巴别塔:这个完整详细的套路是否适合你?
- OJ每日一练——不高兴的津津
- 微信小程序仿摩拜单车
热门文章
- 计算机网络 实验 使用端口完成地址转换,Wireshark抓包工具计算机网络实验解析...
- case 日期when 范围_多个日期段如何分组 case when convert等用法
- easyui不同的jsp页面之间混乱_16.jsp九大内置对象,四大作用域
- excel根据一列内容查找排序另一列_利用泰坦尼克生存数据讲述Excel数据分析的基本操作...
- 千里眼摄像头支持对象存储吗_【手机技术】专业相机应用Halide全面支持苹果iPhone SE 2人像模式...
- 方舟服务器维护公告11月19日,明日方舟11月19日10点停机维护 更新内容一览
- c mysql批量添加数据类型_mybatis学习之路----mysql批量新增数据
- java线程死亡_java – 如何暂停main()直到所有其他线程死亡?
- c vs java_c++ vs java---之一
- Java多线程-生产者与消费者