[webpack3.8.1]Guides-4-Output Management（輸出管理）

時間  2019-11-11
標籤 webpack3.8.1 webpack guides output management 輸出 管理 简体版
原文   原文鏈接

Output Management

This guide extends on code examples found in the Asset Management guide.html

       這個指南將在上一個指南的基礎上對示例代碼進行擴展。node

So far we've manually included all our assets in our index.html file, but as your application grows and once you start using hashes in filenames and outputting multiple bundles, it will be difficult to keep managing your index.html file manually. However, a few plugins exist that will make this process much easier to manage.webpack

       到如今爲止，咱們已經給index.html手動包含了全部的資源，可是，一旦開始使用哈希值爲文件名並輸出多個包，index.html將難以手動管理文件。然而，有一些插件能夠使這個過程更容易管理。git

Preparation （預備）

First, let's adjust our project a little bit:github

       首先，讓咱們調整一下咱們的項目：web

project

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

Let's add some logic to our src/print.js file:npm

       讓咱們添加一些邏輯到src/print.jsjson

src/print.js

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

And use that function in our src/index.js file:瀏覽器

        在咱們的src/index.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());

Let's also update our dist/index.html file, in preparation for webpack to split out entries:

        咱們也給咱們的dist/index.html升升級，準備webpack拆分條目。

dist/index.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>

Now adjust the config. We'll be adding our src/print.js as a new entry point (print) and we'll change the output as well, so that it will dynamically generate bundle names, based on the entry point names:

        如今，調整配置。咱們將要添加咱們的src/print.js做爲一個新的條目，並且，咱們還要改變輸出，以便於它可以動態地生成基於入口點名稱的捆綁後的名稱。

webpack.config.js

const path = require('path');

  module.exports = {
    entry: {
-     index: './src/index.js',
+     app: './src/index.js',
+     print: './src/print.js'
    },
    output: {
-     filename: 'bundle.js',
+     filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

Let's run npm run build and see what this generates:

       讓咱們運行npm run build，看看生成了什麼：

Hash: aa305b0f3373c63c9051
Version: webpack 3.0.0
Time: 536ms
          Asset     Size  Chunks                    Chunk Names
  app.bundle.js   545 kB    0, 1  [emitted]  [big]  app
print.bundle.js  2.74 kB       1  [emitted]         print
   [0] ./src/print.js 84 bytes {0} {1} [built]
   [1] ./src/index.js 403 bytes {0} [built]
   [3] (webpack)/buildin/global.js 509 bytes {0} [built]
   [4] (webpack)/buildin/module.js 517 bytes {0} [built]
    + 1 hidden module

We can see that webpack generates our print.bundle.js and app.bundle.js files, which we also specified in our index.html file. if you open index.html in your browser, you can see what happens when you click the button.

       咱們能夠看到，webpack生成了咱們的print.bundle.js和app.bundle.js還有不少咱們在index.html中定義的文件。若是你在瀏覽器中打開index.html，當你點擊按鈕時你就能夠看到發生了什麼。

But what would happen if we changed the name of one of our entry points, or even added a new one? The generated bundles would be renamed on a build, but our index.html file would still reference the old names. Let's fix that with the HtmlWebpackPlugin.

       可是，若是咱們把其中一個入口點更名，會發生什麼呢？更甚者，咱們添加了一個新的會發生什麼呢？咱們生成的打包的文件將會在編譯中重命名，可是咱們的index.html文件仍然關聯的是舊文件名。讓咱們使用HtmlWebpackPlugin來修復這個bug。

Setting up HtmlWebpackPlugin （啓動HtmlWebpackPlugin）

First install the plugin and adjust the webpack.config.js file:

       首先，安裝插件，調整webpack.config.js文件：

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')
    }
  };

Before we do a build, you should know that the HtmlWebpackPlugin by default will generate its own index.html file, even though we already have one in the dist/ folder. This means that it will replace our index.html file with a newly generated one. Let's see what happens when we do an npm run build:

       在咱們開始一個編譯以前，你應當知道HtmlWebpackPlugin是會默認建立一個index.html的，即使咱們已經有一個放在dist/文件夾裏了(｀・ω・´)。這就意味着呀，咱們的index.html將會被覆蓋 Σ(っ°Д°;)っ讓咱們來看一下，當咱們運行npm run build會發生什麼吧：

Hash: 81f82697c19b5f49aebd
Version: webpack 2.6.1
Time: 854ms
           Asset       Size  Chunks                    Chunk Names
 print.bundle.js     544 kB       0  [emitted]  [big]  print
   app.bundle.js    2.81 kB       1  [emitted]         app
      index.html  249 bytes          [emitted]
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./src/index.js 172 bytes {1} [built]
   [4] multi lodash 28 bytes {0} [built]
Child html-webpack-plugin for "index.html":
       [0] ./~/lodash/lodash.js 540 kB {0} [built]
       [1] ./~/html-webpack-plugin/lib/loader.js!./~/html-webpack-plugin/default_index.ejs 538 bytes {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]

If you open index.html in your code editor, you'll see that the HtmlWebpackPlugin has created an entirely new file for you and that all the bundles are automatically added.

       若是你在你的代碼編輯器中打開了index.html，你將會看到HtmlWebpackPlugin已經爲你建立了一個全新的文件，並且全部須要捆綁的文件都已經自動地添加上了。

If you want to learn more about all the features and options that the HtmlWebpackPlugin provides, then you should read up on it on the HtmlWebpackPlugin repo.

       若是你想學習更多HtmlWebpackPlugin提供的關於特性和選項的內容，而後你應當專門攻讀HtmlWebpackPlugin的報告。

You can also take a look at html-webpack-template which provides a couple of extra features in addition to the default template.

       你也能夠稍微看看html-webpack-template，它提供了一組默認模板額外的特性。

Cleaning up the /dist folder （/dist文件夾大掃除）

As you might have noticed over the past guides and code example, our /dist folder has become quite cluttered. Webpack will generate the files and put them in the /dist folder for you, but it doesn't keep track of which files are actually in use by your project.

       你應該也注意到了，通過一系列的指南和我們的代碼例子，咱這個/dist文件夾啊，已經很是凌亂了(╬￣皿￣)。

In general it's good practice to clean the /dist folder before each build, so that only used files will be generated. Let's take care of that.

       一般來講，在每一次編譯以前清理/dist文件夾是一種優良品格(～￣▽￣)～ 。這樣呀，只有真正被使用的文件纔會生成。讓咱們來處理一下吧。

  1. popular plugin to manage this is the clean-webpack-plugin so let's install and configure it.

       clean-webpack-plugin是全部作這類事情的流行插件中的一個，那麼好，咱們來安裝和配置一下它吧！

npm install clean-webpack-plugin --save-dev

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']),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

Now run an npm run build and inspect the /dist folder. If everything went well you should now only see the files generated from the build and no more old files!

       如今(๑¯∀¯๑)，咱們運行npm run build而且監視/dist文件夾，若是一切正常，你將只會看到編譯後的文件，以前的舊文件沒啦！

The Manifest （清單）

You might be wondering how webpack and its plugins seem to "know" what files are being generated. The answer is in the manifest that webpack keeps to track how all the modules map to the output bundles. If you're interested in managing webpack's output in other ways, the manifest would be a good place to start.

       你也許會好奇，webpack和它的插件是怎麼知道哪些文件是須要生成的，哪些沒用呢？答案是這樣的，webpack會一直跟蹤更新一個清單，這個清單上會記錄全部的模塊到輸出的映射關係。若是你對於使用其它方式來管理webpack的輸出，manifest是一個不錯的選擇。

The manifest data can be extracted into a json file for easy consumption using the WebpackManifestPlugin.

       清單數據能夠提取到一個JSON文件，以便於使用WebpackManifestPlugin。

We won't go through a full example of how to use this plugin within your projects, but you can read up on the concept page and the caching guide to find out how this ties into long term caching.

       咱們將不會詳細介紹如何在您的項目中使用這個插件，可是您能夠閱讀概念頁面和緩存指南，瞭解這些內容如何與長期緩存聯繫起來。

Conclusion （總結一下）

Now that you've learned about dynamically adding bundles to your HTML, let's dive into the development guide. Or, if you want to dig into more advanced topics, we would recommend heading over to the code splitting guide.

       如今，你已經學習了有關如何動態添加綁定到你的HTML，讓咱們一頭扎進開發指南的海洋裏吧。或者，若是你想深挖更多的更高級的主題，咱們強烈推薦您趕忙踏上代碼分割指南的征途。

P.S.:原本想很嚴肅地翻譯官網的指南來着，忽然間發現沒幾個小盆友看，￣へ￣，乾脆加點本身喜歡的宅文化表情。但願愛逛B站的小夥伴們喜歡。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程