Angular10配置webpack打包 「詳細教程」

對於 Angular 項目，推薦使用 angular-cli 建立打包項目 Angular 會默認幫咱們配置。 可是有特殊的需求時就顯然不是很靈活，好比想分割一些較大的打包文件、分析每一個打包文件組成，自定義webpack一些參數的時候就發現無從下手。 對許多項目的常見依賴項是日期庫moment.js 。 這包括使用語言環境的功能，可是，它大大增長了總體捆綁軟件的大小。這些都是須要咱們優化的地方。

1、ngx-build-plus 創建額外配置

這裏推薦一個工具庫ngx-build-plus，不須要改不少東西就能在現有項目進行集成。接下來教你們如何使用，具體詳情能夠去github上找文檔。雖然官方文檔上只標註到了可用版本爲9，可是Angular10也是可使用的。

1. 使用CLI建立一個新的Angular項目

從零搭建Angular10項目

先決條件

在開始以前，請確保你的開發環境已經包含了 Node.js 和 npm 包管理器。

Node.js

Angular 須要 Node.js 的 8.x 或 10.x 版本。

• 要想檢查你的版本，請在終端/控制檯窗口中運行 node -v 命令。

2. 添加ngx-build-plus： ng add ngx-build-plus

npm 包管理器

Angular、Angular CLI 和 Angular 應用都依賴於某些庫所提供的特性和功能，它們都是 npm 包。要下載和安裝 npm 包，你必須擁有一個 npm 包管理器。

本 「快速上手」 中使用的是 yarn 客戶端命令行界面，管理依賴包

要想檢查你是否已經安裝了 yarn 客戶端，請在終端/控制檯窗口中運行 yarn -v 命令。

第一步：安裝 Angular CLI

你要使用 Angular CLI 來建立項目、建立應用和庫代碼，並執行多種開發任務，好比測試、打包和發佈。

全局安裝 Angular CLI。

要想使用 npm 來安裝 CLI，請打開終端/控制檯窗口，並輸入下列命令：

yarn global add @angular/cli

• 1

要想檢查你是否已經安裝了 angular/cli，請在終端/控制檯窗口中運行 ng --version` 命令。

第二步：建立工做區和初始應用

Angular 工做區就是你開發應用的上下文環境。 每一個工做區包含一些供一個或多個項目使用的文件。 每一個項目都是一組由應用、庫或端到端（e2e）測試構成的文件。

要想建立工做區和初始應用項目：

1. 運行 CLI 命令 ng new，並提供一個名字 my-app，以下所示：

   ng new my-app

2. ng new 會提示你要把哪些特性包含在初始的應用項目中。請按回車鍵接受默認值。

Angular CLI 會安裝必要的 Angular npm 包及其它依賴。這可能要花幾分鐘。

還將建立下列工做區和初始項目文件：

• 一個新的工做區，根目錄名叫 my-app

• 一個初始的骨架應用項目，也叫 my-app（但位於 src 子目錄下）

• 一個端到端測試項目（位於 e2e 子目錄下）

• 相關的配置文件

初始的應用項目是一個簡單的 「歡迎」 應用，隨時能夠運行它。

ng new命令後面有不少選項，詳見https://angular.cn/cli/new，因爲咱們的項目大多使用less編寫樣式所以須要添加後綴--style less，表明項目中默認使用less，用於樣式文件的文件擴展名或預處理程序。

完整命令：ng new my-app --style less

第三步：啓動開發服務器

Angular 包含一個開發服務器，以便你能輕易地在本地構建應用和啓動開發服務器。

1. 進入工做區目錄（my-app）。

2. 使用 CLI 命令 ng serve 啓動開發服務器，並帶上 --open 選項。

ng serve --open

• 1

ng serve 命令會自動啓動服務器，並監視你的文件變化，當你修改這些文件時，它就會從新構建應用。

--open（或只用 -o）選項會自動打開瀏覽器，並訪問 http://localhost:4200/。

第四步：編輯你的第一個 Angular 組件

組件 是 Angular 應用中的基本構造塊。 它們在屏幕上顯示數據、監聽用戶輸入，並根據這些輸入採起行動。

做爲初始應用的一部分，CLI 也會爲你建立第一個 Angular 組件。它就是根組件，名叫 app-root。

1. 打開 ./src/app/app.component.ts。

2. 把 title 屬性從 'my-app' 修改爲 'My First Angular App'。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']})export class AppComponent {
  title = 'My First Angular App!';}

瀏覽器將會用修改過的標題自動刷新。

打開 ./src/app/app.component.less 並給這個組件提供一些樣式。

src/app/app.component.less

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;}

工做區配置文件

每一個工做空間中的全部項目共享同一個 CLI 配置環境。該工做空間的頂層包含着全工做空間級的配置文件、根應用的配置文件以及一些包含根應用的源文件和測試文件的子文件夾。

工做空間配置文件	用途
.editorconfig	代碼編輯器的配置。參見 EditorConfig。
.gitignore	指定 Git 應忽略的沒必要追蹤的文件。
README.md	根應用的簡介文檔.
angular.json	爲工做區中的全部項目指定 CLI 的默認配置，包括 CLI 要用到的構建、啓動開發服務器和測試工具的配置項，好比 TSLint，Karma 和 Protractor。欲知詳情，請參閱 Angular 工做空間配置 部分。
package.json	配置工做空間中全部項目可用的 npm 包依賴。有關此文件的具體格式和內容，請參閱 npm 的文檔。
package-lock.json	提供 npm 客戶端安裝到 node_modules 的全部軟件包的版本信息。欲知詳情，請參閱 npm 的文檔。若是你使用的是 yarn 客戶端，那麼該文件就是 yarn.lock。
src/	根項目的源文件。
node_modules/	向整個工做空間提供npm包。工做區範圍的node_modules依賴關係對全部項目均可見。
tsconfig.json	工做空間中各個項目的默認 TypeScript 配置。好比運行項目時遇到一個問題https://blog.csdn.net/a1056244734/article/details/108326580，就須要更改tsconfig.json中配置
tsconfig.base.json	供工做空間中全部項目使用的基礎 TypeScript 配置。全部其它配置文件都繼承自這個基礎文件。欲知詳情，參見 TypeScript 文檔中的使用 extends 進行配置繼承部分
tslint.json	工做空間中各個項目的默認 TSLint 配置。好比全局是否使用單引號，變量命名語法，每行最大字段數等等

應用項目文件

CLI 命令 ng new my-app 會默認建立名爲 「my-app」 的工做空間文件夾，並在 src/ 文件夾下爲工做空間頂層的根應用生成一個新的應用骨架。新生成的應用包含一個根模塊的源文件，包括一個根組件及其模板。

當工做空間文件結構到位時，能夠在命令行中使用 ng generate 命令往該應用中添加功能和數據。這個初始的根應用是 CLI 命令的默認應用（除非你在建立其它應用以後更改了默認值）。

除了在命令行中使用 CLI 以外，你還可使用像 Angular Console 這樣的交互式開發環境，或直接在應用的源文件夾和配置文件中操做這些文件。

對於單應用的工做區，工做空間的 src/ 子文件夾包含根應用的源文件（應用邏輯、數據和靜態資源）。對於多項目的工做空間，projects/ 文件夾中的其它項目各自包含一個具備相同結構的 project-name/src/ 子目錄。

應用源文件

頂層文件 src/ 爲測試並運行你的應用提供支持。其子文件夾中包含應用源代碼和應用的專屬配置。

應用支持文件	目的
app/	包含定義應用邏輯和數據的組件文件。
assets/	包含要在構建應用時應該按原樣複製的圖像和其它靜態資源文件。
environments/	包含特定目標環境的構建配置選項。默認狀況下，有一個無名的標準開發環境和一個生產（「prod」）環境。你還能夠定義其它的目標環境配置。
favicon.ico	用做該應用在標籤欄中的圖標。
index.html	當有人訪問你的站點時，提供服務的主要 HTML 頁面。CLI 會在構建你的應用時自動添加全部的 JavaScript 和 CSS 文件，因此你一般不用手動添加任何 <script> 或 <link> 標籤。
main.ts	應用的主要切入點。用 JIT 編譯器編譯應用，而後引導應用的根模塊（AppModule）在瀏覽器中運行。你也能夠在不改變任何代碼的狀況下改用 AOT 編譯器，只要在 CLI 的 build 和 serve 命令中加上 --aot 標誌就能夠了。
polyfills.ts	爲瀏覽器支持提供了膩子（polyfill）腳本。
styles.sass	列出爲項目提供樣式的 CSS 文件。該擴展還反映了你爲該項目配置的樣式預處理器。
test.ts	單元測試的主入口點，帶有一些 Angular 特有的配置。你一般不須要編輯這個文件。

If you create an application using Angular’s strict mode, you will also have an additional package.json file in the src/app directory. For more information, see Strict mode.

在 src/ 文件夾裏面，app/ 文件夾中包含此項目的邏輯和數據。Angular 組件、模板和樣式也都在這裏。

SRC/APP/ 文件	用途
app/app.component.ts	爲應用的根組件定義邏輯，名爲 AppComponent。當你嚮應用中添加組件和服務時，與這個根組件相關聯的視圖就會成爲視圖樹的根。
app/app.component.html	定義與根組件 AppComponent 關聯的 HTML 模板。
app/app.component.css	爲根組件 AppComponent 定義了基本的 CSS 樣式表。
app/app.component.spec.ts	爲根組件 AppComponent 定義了一個單元測試。
app/app.module.ts	定義了名爲 AppModule 的根模塊，它會告訴 Angular 如何組裝應用。這裏最初只聲明一個 AppComponent。當你嚮應用中添加更多組件時，它們也必須在這裏聲明。
app/package.json	此文件只會出如今使用 --strict 模式建立的應用中。此文件不是供包管理器使用的。它用來告訴各類工具和打包器，這個目錄下的代碼是否沒有非局部化的反作用。

應用配置文件

根應用的配置文件位於工做空間的根目錄下。對於多項目工做空間，項目專屬的配置文件位於項目根目錄 projects/project-name/。

項目專屬的 TypeScript 配置文件繼承自工做區範圍內的 tsconfig.base.json，而項目專屬的 TSLint 配置文件則繼承自全工做區級內的 tslint.json。

應用專屬的配置文件	用途
.browserslistrc``browserslist	配置各類前端工具之間共享的目標瀏覽器和 Node.js 版本。欲知詳情，請參閱 GitHub 上的瀏覽器列表。
karma.conf.js	應用專屬的 Karma 配置。
tsconfig.app.json	應用專屬的 TypeScript 配置，包括 TypeScript 和 Angular 模板編譯器的選項。參見 TypeScript 配置。
tsconfig.spec.json	應用測試的 TypeScript 配置。參見 TypeScript 配置。
tslint.json	應用專屬的 TSLint 配置。

端到端測試文件（基本用不到）

根級的 e2e/ 文件夾中包含一組針對根應用的端到端測試的源文件，以及測試專屬的配置文件。

對於多項目的工做空間，應用專屬的端到端測試文件都位於項目各自的根目錄下，即 projects/project-name/e2e/。

e2e/
   src/                 (end-to-end tests for my-app)
      app.e2e-spec.ts
      app.po.ts
    protractor.conf.js  (test-tool config)
    tsconfig.json       (TypeScript config inherits from workspace)

2. 添加ngx-build-plus： ng add ngx-build-plus

注意：若是要將其添加到projects文件夾中的特定子項目，請使用--project開關指向它：ng add ngx-build-plus --project getting-started

備註：這一步經過NPM安裝包，在Angular >= 7 and CLI >= 7版本中，讓您的項目使用自定義生成器的更新您的angular.jsonng serve和ng build。可是6版本中可能會出現安裝不成功，這時候請直接yarn add ngx-build-plus --dev，而後angular.json文件中更改如下兩處地方:

 "build": {    - "builder": "@angular-devkit/build-angular:browser"    + "builder": "ngx-build-plus:build"    ...  },  "serve": {   - "builder": "@angular-devkit/build-angular:dev-server"    + "builder": "ngx-build-plus:dev-server"    ...  } 複製代碼

 

3. 建立文件webpack.partial.js並添加到（子）項目的根目錄：

  const webpack = require('webpack');      module.exports = {       plugins: [           new webpack.DefinePlugin({               "VERSION": JSON.stringify("4711")           })       ]   } 複製代碼

 

4. 在您的 app.component.ts中使用全局變量VERSION：

  import { Component } from '@angular/core';      declare const VERSION: string;      @Component({       selector: 'app-root',       templateUrl: './app.component.html',       styleUrls: ['./app.component.css']   })   export class AppComponent {       title = 'Version: ' + VERSION;   } 複製代碼

 

5. 使用--extra-webpack-config指向部分Webpack配置的開關啓動應用程序：

ng serve --extra-webpack-config webpack.partial.js -o 複製代碼

 

若是您的項目是基於CLI的子項目，請也使用該--project開關：

ng serve --project getting-started -o --extra-webpack-config webpack.partial.js 複製代碼

 

提示：考慮爲此命令建立一個npm腳本。

6. 確保顯示了您的webpack配置所提供的版本。

有打印結果顯示就表示你的項目已經啓用了webpack.partial.js文件中的配置，下面就是在webpack.partial.js中補充咱們須要的功能了，筆者主要集中在了兩大塊。

1. 添加BundleAnalyzerPlugin，分析打包文件

2. 第三方庫模塊分離 - optimization + splitChunks，分割較大的文件

下面分別描述

2、webpack-bundle-analyzer 打包文件分析工具

1.安裝

$ yarn add  webpack-bundle-analyzer --dev 複製代碼

 

2.配置

在webpack.partial.js中的module.exports = webpackConfig這句話的上面增長

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = {   plugins: [     new BundleAnalyzerPlugin({       analyzerMode: 'static',     }),     new webpack.DefinePlugin({       "VERSION": JSON.stringify("4711")     })   ] } 複製代碼

 

3.運行

啓動服務：

生產環境查看：npm run build --report 或 正常build 便可啓動查看器

開發環境查看：webpack -p --progress 或啓動正常devServer服務便可啓動查看器!

4.結果

5.該插件默認配置

new BundleAnalyzerPlugin({       // openAnalyzer: true,       // reportFilename: path.join(__dirname, 'report.html')       //  能夠是`server`，`static`或`disabled`。       //  在`server`模式下，分析器將啓動HTTP服務器來顯示軟件包報告。       //  在「靜態」模式下，會生成帶有報告的單個HTML文件。       //  在`disabled`模式下，你可使用這個插件來將`generateStatsFile`設置爲`true`來生成Webpack Stats JSON文件。       analyzerMode: 'static',       //  將在「服務器」模式下使用的主機啓動HTTP服務器。       // analyzerHost: '127.0.0.1',       //  將在「服務器」模式下使用的端口啓動HTTP服務器。       // analyzerPort: 8888,       //  路徑捆綁，將在`static`模式下生成的報告文件。       //  相對於捆綁輸出目錄。       // reportFilename: 'report.html',       //  模塊大小默認顯示在報告中。       //  應該是`stat`，`parsed`或者`gzip`中的一個。       //  有關更多信息，請參見「定義」一節。       // defaultSizes: 'parsed',       //  在默認瀏覽器中自動打開報告       // openAnalyzer: true,       //  若是爲true，則Webpack Stats JSON文件將在bundle輸出目錄中生成       // generateStatsFile: false,       //  若是`generateStatsFile`爲`true`，將會生成Webpack Stats JSON文件的名字。       //  相對於捆綁輸出目錄。       // statsFilename: 'stats.json',       //  stats.toJson（）方法的選項。       //  例如，您可使用`source：false`選項排除統計文件中模塊的來源。       //  在這裏查看更多選項：https：  //github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21       // statsOptions: null,       // logLevel: 'info' // 日誌級別。能夠是'信息'，'警告'，'錯誤'或'沉默'。     }), 複製代碼

 

模塊功能：可以查看到你的文件打包壓縮後中真正的內容，找出那些模塊組成最大的大小，找到錯誤的模塊，優化它！最好的事情是它支持縮小捆綁！它解析它們以得到實際大小的捆綁模塊。它也顯示他們的gzipped大小！

3、使用webpack把第三方庫模塊分離 - optimization + splitChunks

在 webpack4.x 中，咱們使用 optimization.splitChunks 來分離公用的代碼塊。SplitChunks插件簡單的來講就是Webpack中一個提取或分離代碼的插件，主要做用是提取公共代碼，防止代碼被重複打包，拆分過大的js文件，合併零散的js文件。

這裏說的分離，固然只是針對一些第三方庫（通常來自 node_modules），以及咱們本身定義的工具庫（或公用方法）。

不知如何下手？首先，咱們來看官網給的一份

1. 默認配置：

splitChunks: {     chunks: "async",     minSize: 30000,     minChunks: 1,     maxAsyncRequests: 5,     maxInitialRequests: 3,     automaticNameDelimiter: '~',     name: true,     cacheGroups: {         vendors: {             test: /[\\/]node_modules[\\/]/,             priority: -10         },     default: {             minChunks: 2,             priority: -20,             reuseExistingChunk: true         }     } } 複製代碼

 

接着，咱們再來看下它們的含義：

• chunks： 該屬性值的數據類型能夠是 字符串 或者 函數。若是是字符串，那它的值可能爲 initial | async | all 三者之一。默認值的數據類型爲 字符串，默認值爲 async，但推薦用 all。它表示將哪一種類型的模塊分離成新文件。字符串參數值的做用分別以下：

  • initial：表示對異步引入的模塊不處理

  • async：表示只處理異步模塊

  • all：不管同步仍是異步，都會處理

• minSize： 該屬性值的數據類型爲數字。它表示將引用模塊分離成新代碼文件的最小體積，默認爲 30000，單位爲字節，即 30K（指min+gzip以前的體積）。這裏的 30K 應該是最佳實踐，由於若是引用模塊小於 30K 就分離成一個新代碼文件，那頁面打開時，勢必會多增長一個請求。

• maxSize： 把提取出來的模塊打包生成的文件大小不能超過maxSize值，若是超過了，要對其進行分割並打包生成新的文件。單位爲字節，默認爲0，表示不限制大小。

• minChunks： 該屬性值的數據類型爲數字。它表示將引用模塊如不一樣文件引用了多少次，才能分離生成新代碼文件。默認值爲 1

• maxAsyncRequests： 該屬性值的數據類型爲數字，默認值爲 5。它表示按需加載最大的並行請求數，針對異步。

• maxInitialRequests： 該屬性值的數據類型爲數字，默認值爲 3。它表示單個入口文件最大的並行請求數，針對同步。

• automaticNameDelimiter： 該屬性值的數據類型爲字符串，默認值爲。它表示分離後生成新代碼文件名稱的連接符，好比說 app1.js 和 app2.js 都引用了 utils.js 這個工具庫，那麼，最後打包後分離生成的公用文件名多是 xxapp1~app2.js 這樣的，即以 ~ 符號鏈接。

• name： 該屬性值的數據類型能夠是 布爾值 或者 函數（返回值爲字符串），其中布爾值得爲 true，此時，分離文件後生成的文件名將基於 cacheGroups 和 automaticNameDelimiter。若是設置爲 false，則不會進行模塊分離。

• cacheGroups： 該屬性值的數據類型爲對象，它的值能夠繼承 splitChunks.* 中的內容。若是 cacheGroups存在與 splitChunks.* 同名的屬性，則 cacheGroups 的屬性值則直接覆蓋 splitChunks.* 中設置的值。

• test： 該屬性值的數據類型能夠爲 字符串 或 正則表達式，它規定了哪些文件目錄的模塊能夠被分離生成新文件。

• priority： 該屬性值的數據類型能夠爲數字，默認值爲 0。它表示打包分離文件的優先

• reuseExistingChunk： 該屬性值的數據類型能夠爲布爾值。它表示針對已經分離的模塊，再也不從新分離。

2.分離第三方庫

要將第三方庫分離出來，咱們須要調整配置文件，設置 chunks: 'all'，即表示讓全部加載類型的模塊在某些條件下都能打包。

3.分離工具函數

打包中，咱們發現，工具函數模塊（utils）的源碼被分別打包到了兩個文件中，這顯然是不對。之因此出現這種狀況，是由於咱們設置了 minSize: 30000，即分離成獨立文件的最小體積爲 30K，而這裏的 工具函數（utils.js）只有幾KB，因此，沒被分離成單獨的文件。

4.第三方庫合併打包並重命名

有的時候，咱們但願將全部來自 node_modules 的第三方庫都打包到同一個文件中。顯然，上面的打包配置並無知足這個條件。而且，咱們還但願能夠對打包後的文件名進行重命名。

要完成，只須要在 cacheGroups 設置 name 屬性便可。這裏，筆者還把項目中使用到的moment、handsontable、angular庫單獨分離出來了。

// webpack.config.js module.exports = {   optimization: {     splitChunks: {       chunks: 'all',       minSize: 30000,       maxSize: 0,       minChunks: 1,       maxAsyncRequests: 5,       maxInitialRequests: 3,       automaticNameDelimiter: '~',       name: true,       cacheGroups: {         moment: {           name: 'moment',           test: /[\\/]node_modules[\\/]moment[\\/]/,           priority: -6 // 兩個cacheGroup.priority相同時，先定義的會先命中         },         handsontable: {           name: 'handsontable',           test: /[\\/]node_modules[\\/]handsontable[\\/]/,           priority: -7         },         angular: {           name: 'angular',           test: /[\\/]node_modules[\\/]@angular[\\/]/,           priority: -9         },        vendors: {           name: 'vendors',           test: /[\\/]node_modules[\\/]/,           priority: -10         },         default: {           name: 'default',           minChunks: 2,           priority: -20,           reuseExistingChunk: true         }       }     }   } } 複製代碼

 

5.SplitChunks插件配置選項

• chunks選項，決定要提取那些模塊。

  默認是async：只提取異步加載的模塊出來打包到一個文件中。 異步加載的模塊：經過import('xxx')或require(['xxx'],() =>{})加載的模塊。

  initial：提取同步加載和異步加載模塊，若是xxx在項目中異步加載了，也同步加載了，那麼xxx這個模塊會被提取兩次，分別打包到不一樣的文件中。 同步加載的模塊：經過 import xxx或require('xxx')加載的模塊。

  all：無論異步加載仍是同步加載的模塊都提取出來，打包到一個文件中。

• minSize選項：規定被提取的模塊在壓縮前的大小最小值，單位爲字節，默認爲30000，只有超過了30000字節纔會被提取。

• maxSize選項：把提取出來的模塊打包生成的文件大小不能超過maxSize值，若是超過了，要對其進行分割並打包生成新的文件。單位爲字節，默認爲0，表示不限制大小。

• minChunks選項：表示要被提取的模塊最小被引用次數，引用次數超過或等於minChunks值，才能被提取。

• maxAsyncRequests選項：最大的按需(異步)加載次數，默認爲 6。

• maxInitialRequests選項：打包後的入口文件加載時，還能同時加載js文件的數量（包括入口文件），默認爲4。

• 先說一下優先級 maxInitialRequests / maxAsyncRequests <maxSize<minSize。

• automaticNameDelimiter選項：打包生成的js文件名的分割符，默認爲~。

• name選項：打包生成js文件的名稱。

• cacheGroups選項，核心重點，配置提取模塊的方案。裏面每一項表明一個提取模塊的方案。下面是cacheGroups每項中特有的選項，其他選項和外面一致，若cacheGroups每項中有，就按配置的，沒有就使用外面配置的。

• test選項：用來匹配要提取的模塊的資源路徑或名稱。值是正則或函數。

• priority選項：方案的優先級，值越大表示提取模塊時優先採用此方案。默認值爲0。

• reuseExistingChunk選項：true/false。爲true時，若是當前要提取的模塊，在已經在打包生成的js文件中存在，則將重用該模塊，而不是把當前要提取的模塊打包生成新的js文件。

• enforce選項：true/false。爲true時，忽略minSize，minChunks，maxAsyncRequests和maxInitialRequests外面選項

4、HtmlWebpackPlugin

HtmlWebpackPlugin簡化了HTML文件的建立，以便爲你的webpack包提供服務。這對於在文件名中包含每次會隨着編譯而發生變化哈希的 webpack bundle 尤爲有用。 你可讓插件爲你生成一個HTML文件，這個插件有兩個重要做用。

1. 建立HTML頁面文件到你的輸出目錄

2. 將webpack打包後的chunk自動引入到這個HTML中

1.安裝

npm install --save-dev html-webpack-plugin

 

使用yarn

yarn add --dev html-webpack-plugin

 

2.基本用法

該插件將爲你生成一個 HTML5 文件， 其中包括使用 script 標籤的 body 中的全部 webpack 包。 只需添加插件到你的 webpack 配置以下：

const HtmlWebpackPlugin = require('html-webpack-plugin') const path = require('path') module.exports = {   plugins: [     new webpack.DefinePlugin({       "VERSION": JSON.stringify("4711")     }),     new HtmlWebpackPlugin({       filename: 'index.html',  // 根據模板文件生成的html的文件名       template: path.join(__dirname, 'src/index.html'),        chunksSortMode: 'manual',       chunks: ['styles', 'runtime', 'polyfills', 'scripts', 'vendors', 'main']     })   ] }

 

這將會產生一個包含如下內容的文件 dist/index.html：

<!doctype html> <html lang="zh"> <head>   <meta charset="utf-8">   <meta http-equiv="Pragma" content="no-cache"/>   <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>   <meta http-equiv="Expires" content="0"/>   <meta name="viewport" content="width=device-width,initial-scale=1">   <meta name="renderer" content="webkit">   <meta name="force-rendering" content="webkit">   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>   <title>test</title>   <base href="/">   <link rel="icon" type="image/png" href="favicon.png">   <link href="styles.bf72314ba2e0c15c73f2.css" rel="stylesheet"> </head> <body> <app-root></app-root> <div id="preloader">   <div>     <div class="loader loader--glisteningWindow"></div>   </div> </div> <script src="runtime.fe0efdd131eb00c21b3a.js"></script> <script src="vendors.6d9d661339fe7a583752.js"></script> <script src="polyfills.5cb77843a9758f0097e1.js"></script> <script src="scripts.d526d9658102820143d1.js"></script> <script src="moment.65d799ec0675b5ff9b59.js"></script> <script src="handsontable.c50df86ef38503e832a5.js"></script> <script src="main.db888715d5d02500d39e.js"></script> </body> </html>

 

若是你有多個 webpack 入口點， 他們都會在生成的HTML文件中的 script 標籤內。

須要注意的是，默認angular-cli打包生成的入口文件也被配置成了index.html，因此咱們須要更改angular.jaon文件中的配置。而且，因爲Angular單頁面應用的入口文件爲main.ts 因此！chunks配置中，main 必定必定要放在最後，不然運行會出錯，筆者由於沒有放在最後找了一夜的bug~~ 改成：

3.HtmlWebpackPlugin插件配置選項

您能夠將配置選項的哈希值傳遞給html-webpack-plugin。容許的值以下：

名稱	類型	默認	描述
title	{String}	Webpack App	用於生成的HTML文檔的標題
filename	{String}	'index.html'	將HTML寫入的文件。默認爲index.html。您能夠在這裏指定一個子目錄（如：assets/admin.html）
template	{String}	``	webpack模板的相對或絕對路徑。默認狀況下，它將使用（src/index.ejs若是存在）。
templateContent	{string、Function、false}	false	可用於代替template提供內聯模板-請閱讀「編寫本身的模板」部分
templateParameters	{Boolean、Object、Function}	false	容許覆蓋模板中使用的參數
inject	{Boolean、String}	true	`true
publicPath	{String、'auto'}	'auto'	用於腳本和連接標籤的publicPath
scriptLoading	{'blocking'、'defer'}	'blocking'	現代瀏覽器支持非阻塞javascript加載（'defer'），以提升頁面啓動性能。
favicon	{String}	``	將給定的圖標圖標路徑添加到輸出HTML
meta	{Object}	{}	容許注入meta-tags。例如meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}
base	{Object、String、false}	false	注入base標籤。例如base: "https://example.com/path/page.html
minify	{Boolean、Object}	true若是mode是'production'，不然false	控制是否以及以何種方式最小化輸出。有關更多詳細信息。
hash	{Boolean}	false	若是是，true則將惟一的webpack編譯哈希值附加到全部包含的腳本和CSS文件中。這對於清除緩存頗有用
cache	{Boolean}	true	僅在文件被更改時發出文件
showErrors	{Boolean}	true	錯誤詳細信息將寫入HTML頁面
chunks	{?}	?	僅容許您添加一些塊（例如，僅單元測試塊）
chunksSortMode	{String、Function}	auto	容許控制在將塊包含到HTML中以前應如何對其進行排序。容許值爲`'none'
excludeChunks	{Array.<string>}	``	容許您跳過一些塊（例如，不添加單元測試塊）
xhtml	{Boolean}	false	若是true將link標籤呈現爲自動關閉（符合XHTML）

最後奉上完整的webpack.partial.js

 

const webpack = require('webpack') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin const HtmlWebpackPlugin = require('html-webpack-plugin') const path = require('path') module.exports = {   externals: {        // 打包除外的文件     echarts: 'echarts'   },   optimization: {     splitChunks: {       chunks: "all",       minSize: 20000,       minChunks: 1,       maxAsyncRequests: 5,       maxInitialRequests: 3,       automaticNameDelimiter: '~',       name: true,       cacheGroups: {         moment: {           name: 'moment',           test: /[\\/]node_modules[\\/]moment[\\/]/,           priority: -6         },         handsontable: {           name: 'handsontable',           test: /[\\/]node_modules[\\/]handsontable[\\/]/,           priority: -7         },         angular: {           name: 'angular',           test: /[\\/]node_modules[\\/]@angular[\\/]/,           priority: -9         },         vendors: {           name: 'vendors',           test: /[\\/]node_modules[\\/]/,           priority: -10         },         default: {           name: 'default',           minChunks: 2,           priority: -20,           reuseExistingChunk: true         }       }     }   },   plugins: [     new BundleAnalyzerPlugin({       analyzerMode: 'static',     }),     new webpack.DefinePlugin({       "VERSION": JSON.stringify("4711")     }),     new HtmlWebpackPlugin({       filename: 'index.html',       template: path.join(__dirname, 'src/index.html'),       chunksSortMode: 'manual',       chunks: ['styles', 'runtime', 'polyfills', 'scripts', 'vendors', 'main']      // 限定順序，main.js必須在最後     })   ] } 複製代碼

 

但願你們打包順利，項目運行快快滴。

做者：青顏的天空