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 = {...

Starzkg

11917人浏览 · 2020-04-08 14:35:03

Starzkg · 2020-04-08 14:35:03 发布

官方文档

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
    })
}