官方文檔

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默认配置的获取与修改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。