Output Management

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

这个指南将在上一个指南的基础上对示例代码进行扩展。

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.

到现在为止，我们已经给index.html手动包含了所有的资源，但是，一旦开始使用哈希值为文件名并输出多个包，index.html将难以手动管理文件。然而，有一些插件可以使这个过程更容易管理。

Preparation （预备）

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

首先，让我们调整一下我们的项目：

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:

让我们添加一些逻辑到src/print.js

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: 536msAsset     Size  Chunks                    Chunk Namesapp.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: 854msAsset       Size  Chunks                    Chunk Namesprint.bundle.js     544 kB       0  [emitted]  [big]  printapp.bundle.js    2.81 kB       1  [emitted]         appindex.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站的小伙伴们喜欢。

[webpack3.8.1]Guides-4-Output Management（输出管理）相关推荐

  1. Android Studio Build Output控制台输出乱码解决

    Android Studio版本升级到4.0之后,出现Build Output控制台输出乱码的现象.该情况在Android Studio版本3.6及以上就会出现. 解决方法: 点击Android St ...

  2. 计算机编程中的aa是什么意思,output是什么意思 output的例句 编程中output表示输出参数...

    output 意思 [英][ˈaʊtpʊt][美][ˈaʊtˌpʊt] n.产量; 输出; 作品; [计]输出信号; vt.输出; 例句: 双语英语 1. That's almost 10% abov ...

  3. [BZOJ] 1620: [Usaco2008 Nov]Time Management 时间管理

    1620: [Usaco2008 Nov]Time Management 时间管理 Time Limit: 5 Sec  Memory Limit: 64 MB Submit: 850  Solved ...

  4. bzoj 1620: [Usaco2008 Nov]Time Management 时间管理（贪心）

    1620: [Usaco2008 Nov]Time Management 时间管理 Time Limit: 5 Sec  Memory Limit: 64 MB Submit: 834  Solved ...

  5. Objective -C Memory Management 内存管理 第一部分

    Objective -C Memory Management  内存管理  第一部分 Memory management is part of a more general problem in pr ...

  6. SQL Server 2005 安装后，没有Management Studio管理工具的解决办法

    如果您在安装SQL Server 2005之前安装了Visual Studio .NET 2005或2008,并且在安装VS时选择了SQL Server 2005 Express,那么很不幸,SQL ...

  7. Time Management 时间管理

    Time Management 时间管理 世界上最快而又最慢,最长而又最短,最平凡而又最珍贵,最易被忽视而又最令人后悔的是什么? ------时间 ------接下来敢不敢完成挑战测试:你对时间的感知 ...

  8. PDM系统输出管理功能介绍

    PDM是一门用来管理所有与产品相关信息(包括零件信息.配置.文档.CAD文件.结构.权限信息等)和所有与产品相关过程(包括过程定义和管理)的技术.通过实施PDM,可以提高生产效率,有利于对产品的全生命 ...

  9. 2017-02-20 Sql Server2016安装后无法找到Microsoft Sql Server Management Studio管理器

    最近安装的sql sever2016后发现没有Sql server management studio管理工具,无法操作sql server 解决方案,可去官网单独下载 Sql Server Mana ...

最新文章

  1. 深度学习基础知识(一): 概述-神经网络起源和发展
  2. memcpy实例(一)
  3. python networkx库_python之networkx库小结
  4. mysql 数据库名称相同吗_mysql 数据库名称相同吗
  5. VM虚拟机跟主机间共享文件
  6. linux一g运行内存不足,在linux运行weblogic出现运行内存不足错误，求鞭挞....
  7. python是什么 自学-你们都是怎么自学python的?
  8. element ui 点击修改开启停用按钮状态
  9. CASIA WebFace、WIDDER FACE、FDDB、AFLW、CelebA训练集详解
  10. swift菜鸟入门视频教程-02-基本运算符
  11. Git版本控制，一个本地子分支修改了代码(包括依赖pom)任何文件，然后本地主分支就自动更改为子分支的！这个问题这样解决
  12. Oracle11g安装教程
  13. C#窗体控件—textbox
  14. 高速下载文件的方法（对百度，城通等网盘无效）
  15. 在centos官网下载系统镜像完整教程
  16. STM32L476低功耗—进入STOP2模式4s后LPTIM中断唤醒+功率实测
  17. 计算机没有进程管理器,win10系统任务管理器中没有进程的处理办法
  18. Bellman-Ford与SPFA
  19. stream流的常用方法
  20. Can#39;t locate Tk.pm

热门文章

  1. Android 第十九课 大喇叭--广播机制----动态注册监听网络变化与静态注册实现开机启动
  2. figma下载_我如何使用Figma，CSS Grid和CSS Flexbox构建登录页面
  3. figma下载_通过构建7个通用UI动画来掌握Figma中的动画
  4. 对比俩个字符串的相似度
  5. JavaWEB中读取配置信息
  6. 王高利：Apache Httpd负载均衡Tomcat并实现Session Sticky和Session Cluster
  7. golang reflect
  8. HDU - 4734 F(x) （2013成都网络游戏，数字DP）
  9. phpRedisAdmin 安装
  10. Servlet请求转发中文乱码解决