官方文档
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 params let stats return Object.assign({ // make stats lazy as it is expensive get 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 }) }
标签:文件,plugin,配置,默认,webpack,html,true From: https://www.cnblogs.com/lorin/p/16798111.html