vue-cli@4中默认的html-webpack-plugin配置

本文章代码所用vue-cli的版本号为：
@vue/cli 4.1.2

如何获取默认配置

1. 配置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的默认配置

2. 修改eslintrc.js
   在该文件的eslintre.js中找到rules字段，删除no-console：
   

3. 运行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
  }
}

修改默认配置

有两种方式可以修改默认配置：

1. 直接修改，在获取到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' // 修改输出文件名
        }
    })
}

2. 链式修改，它比直接修改表达能力更强而且更加安全，需要用到chainWebpack，以修改模板路径为例，代码如下：

chainWebpack: config => {
  config
    .plugin('html')
    .tap(args => {
      args[0].template = '/Users/username/proj/app/templates/index.html'
      return args
    })
}

详细信息可以查看官方文档：vue-cli webpack相关 —— 链式操作-高级