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相關 —— 鏈式操作-高級