?

打包時，為了直觀地發現項目中存在的問題，可以在打包時生成報告。生成報告的方式有兩種：

① 通過命令行參數的形式生成報告

Javascript

// 通過 vue-cli 的命令選項可以生成打包報告 // --report 選項可以生成 report.html 以幫助分析包內容 vue-cli-service build --report

② 通過可視化的UI面板直接查看報告（推薦）

在可視化的UI面板中，通過控制臺和分析面板，可以方便地看到項目中所存在的問題。

通過 vue.config.js 修改 webpack 的默認配置

通過?vue-cli 3.0?工具生成的項目，默認隱藏了所有 webpack 的配置項，目的是為了屏蔽項目的配置過程，讓程
序員把工作的重心，放到具體功能和業務邏輯的實現上。

如果程序員有修改 webpack 默認配置的需求，可以在項目根目錄中，按需創建?vue.config.js?這個配置文件，從
而對項目的打包發布過程做自定義的配置

（具體配置參考https://cli.vuejs.org/zh/config/#vue-config-js）。

Javascript

// vue.config.js // 這個文件中，應該導出一個包含了自定義配置選項的對象 module.exports = { // 選項... }

為開發模式與發布模式指定不同的打包入口

默認情況下，Vue項目的開發模式與發布模式，共用同一個打包的入口文件（即?src/main.js）。為了將項目
的開發過程與發布過程分離，我們可以為兩種模式，各自指定打包的入口文件，即：

• 開發模式的入口文件為?src/main-dev.js
• 發布模式的入口文件為?src/main-prod.js

configureWebpack?和?chainWebpack

在?vue.config.js?導出的配置對象中，新增?configureWebpack?或chainWebpack節點，來自定義?webpack?的打包配置。

在這里，?configureWebpack?和?chainWebpack?的作用相同，唯一的區別就是它們修改 webpack 配置的方式不同：

①?chainWebpack?通過鏈式編程的形式，來修改默認的?webpack?配置
②?configureWebpack?通過操作對象的形式，來修改默認的?webpack?配置

兩者具體的使用差異，可參考如下網址：

傳送門

總結

以上是生活随笔為你收集整理的前端学习（2737）：重读vue电商网站47之生成打包报告的全部內容，希望文章能夠幫你解決所遇到的問題。

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