webpack 輸出管理

garynan發表於2019-03-14
Web

webpack 輸出管理

GitHub 學習 Demo。

準備

編輯專案

  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
  |- /src
    |- index.js
+   |- print.js
  |- /node_modules

# src/print.js

export default function printMe() {
  console.log('I get called from print.js!');
}

# src/index.js

  import _ from 'lodash';
+ import printMe from './print.js';

  function component() {
    var element = document.createElement('div');
+   var btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

+   btn.innerHTML = 'Click me and check the console!';
+   btn.onclick = printMe;
+
+   element.appendChild(btn);

    return element;
  }

  document.body.appendChild(component());

# dist/index.html

  <!doctype html>
  <html>
    <head>
-     <title>Asset Management</title>
+     <title>Output Management</title>
+     <script src="./print.bundle.js"></script>
    </head>
    <body>
-     <script src="./bundle.js"></script>
+     <script src="./app.bundle.js"></script>
    </body>
  </html>
複製程式碼

我們可以看到webpack生成了print.bundle.js和app.bundle.js檔案，我們也在index.html檔案中指定了這些檔案。 如果您在瀏覽器中開啟index.html，則可以看到單擊按鈕時會發生什麼。

tips :

如果我們更改了其中一個入口點的名稱，或者甚至新增了新入口點，會發生什麼？

生成的包將在構建時重新命名，但我們的index.html檔案仍將引用舊名稱。 讓我們用HtmlWebpackPlugin解決這個問題。

設定 HtmlWebpackPlugin

安裝依賴

npm install --save-dev html-webpack-plugin
複製程式碼

修改專案

# webpack.config.js

  const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Output Management'
+     })
+   ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };
複製程式碼

在我們進行構建之前，您應該知道HtmlWebpackPlugin預設情況下會生成自己的index.html檔案，即使我們已經在dist /資料夾中有一個。 這意味著它將用新生成的index.html檔案替換我們的index.html檔案。

如果您在程式碼編輯器中開啟index.html，您將看到HtmlWebpackPlugin為您建立了一個全新的檔案，並且所有的bundle都會自動新增。

如果您想了解有關HtmlWebpackPlugin提供的所有功能和選項的更多資訊，那麼您應該在HtmlWebpackPlugin repo上閱讀它。

您還可以檢視html-webpack-template，除了預設模板之外，還提供了一些額外的功能。

編譯前清空 /dist 目錄

現在你已經知道上一個例子中，/dist目錄變得非常雜亂。wepack 會為你生成檔案並放進 /dist 目錄中,但它不會跟蹤哪些檔案是真實被你的專案所使用。

一般來說，在每次編譯專案到/dist中先清空一下/dist的內容，是一種很好的做法，從而保證目錄下的檔案都是最新且被專案實實在在應用到的。

一個常用的外掛是clean-webpack-plugin。

安裝依賴

npm install --save-dev clean-webpack-plugin
複製程式碼

修改專案

# webpack.config.js

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [
+     // new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin
+     new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

複製程式碼

編譯

npm run build
# npx webpack
複製程式碼

編譯成功後你會發現，/dist內不會有多餘的檔案，因為所有老的檔案都先被刪除了。

Manifest 應用快取配置

你可能會好奇，為什麼 webpack 會知道有哪些檔案正在被建立？答案在於manifest，它讓 webpack 能夠跟蹤所有 modules 是怎麼樣對映到輸出的 bundles 中的。

如果你對用其他方式管理 webpack 輸出的話，manifest 是一個好的起點。

manifest 的資料可以被提取到一個 json 檔案中，它會被 WebpackManifestPlugin 很容易地使用。

需要深入瞭解長遠地快取配置方案，請檢視 the concept page 和 caching guide

NEXT

現在，我們已經知道怎麼樣去動態的捆綁程式碼 bundles 並新增到你的 html 中。如果你有興趣深入更多關於 output 的高階配置，請閱讀 code splitting guide。

後面講展開 development guide 開發配置的學習

相關文章