管理输出主要针对多个bundle，但是通常打包成的bundle只有一个。

1.最简单的管理

（1）.相关文件

index.html
多加

  <html>
    <head>
      <title>Output Management</title>
      <script src="./print.bundle.js"></script>//
    </head>
    <body>
      <script src="./app.bundle.js"></script>//
    </body>
  </html>

print.js:

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

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());

（2）. webpack.config.js

需要配置entry和output属性
output里需要用到占位符。

 const path = require('path');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    output: {
      filename: '[name].bundle.js',//name就是entry里的app，print。
      path: path.resolve(__dirname, 'dist')
    }
  };

执行npm run build之后，就会看到生成了app.bundle.js和print.bundle.js，这和index.html导入的一致。

2.加上HtmlWebpackPlugin插件

这个插件存在的最大意义就是帮助更新index.html文件，在我们更改了入口起点（webpack.config.js里的entry）之后。

（1）安装

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

(2)添加入口文件

添加入口文件：print2.js

export default function printMe2() {
    console.log('afg');
}
let a = 111;  
let b = 222;  
var jk = (c,d) => c*d;  
console.log(jk(a,b));

在index.js里import：

import _ from 'lodash';
import printMe from './print.js';
import printMe2 from './print2.js';
function component(){
    var btn = document.createElement('button')
    var element = document.createElement('div');
    element.innerHTML = _.join(['hello','webpack','']);

    btn.innerHTML = 'click me and check the console!';
    btn.onclick = printMe2;
    element.appendChild(btn);

    return element;
}
document.body.appendChild(component());
document.body.appendChild(component());

(3)配置webpack.config.js入口

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js',
    print2: './src/print2.js'//1.添加入口
  },
  output: {
    //filename: 'bundle.js',
    filename:'[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {    
    loaders: [{    
        test: /\.js$/,    
        exclude: /node_modules/,    
        loader: 'babel-loader'    
    }]    
  },
  plugins: [//2.配置plugins
         new HtmlWebpackPlugin({
           title: 'Output Management'
         })
       ]  

};

在我们构建之前/dist文件夹里已经有index.html这个文件，我们已经添加了入口起点，再次进行构建npm run build，HtmlWebpackPlugin就会默认生成index.js,将原来的替换掉。然后新生成的bundle会自动添加到dist文件夹下的index.html里

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Output Management</title>
  </head>
  <body><!--包含print2对的<script>是后来添加的-->
  <script type="text/javascript" src="app.bundle.js"></script><script type="text/javascript" src="print2.bundle.js"></script><script type="text/javascript" src="print.bundle.js"></script></body>
</html>

这个插件还有其他的功能

3.清理dist文件夹

如果没有进行清理的话，每次构建后生成的文件都会保存在dist文件夹里，即使某些文件你已经用不到了，它仍然保留在那里，造成很大困扰。
这里写图片描述
比如上面目录，框出来的是项目修改前生成的文件，现在项目修改了，框出来部分已经不是源码构建出来的了，没有用武之地了，应该清理掉。
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');//1.导入插件
module.exports = {
  entry: {
    app: './src/index.js',
    print: './src/print.js',
    print2: './src/print2.js'
  },
  output: {
    //filename: 'bundle.js',
    filename:'[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {    
    loaders: [{    
        test: /\.js$/,    
        exclude: /node_modules/,    
        loader: 'babel-loader'    
    }]    
  },
  plugins: [
        new CleanWebpackPlugin(['dist']),//2.添加插件配置
         new HtmlWebpackPlugin({
           title: 'Output Management'
         })
       ]  
};

现在构建以下，打开dist文件夹，发现多余的文件已经消失了。cmd里会有相关记录
这里写图片描述

这里写图片描述

关于用Manifest管理输出部分，我们暂时不加以深入。

webpack之管理输出