[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教程