复制起步demo

准备

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

  1.   |- /src
  2. +   |- print.js

我们在 src/print.js 文件中添加一些逻辑：
src/print.js

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

并且在 src/index.js 文件中使用这个函数：
src/index.js

  1.  import _ from 'lodash';
  2. +import printMe from './print.js';
  4.  function component() {
  5.    const element = document.createElement('div');
  6. +  const btn = document.createElement('button');
  8.    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  10. +  btn.innerHTML = 'Click me and check the console!';
  11. +  btn.onclick = printMe;
  13. +  element.appendChild(btn);
  15.    return element;
  16.  }
  18.  document.body.appendChild(component());

还要更新 dist/index.html 文件，来为 webpack 分离入口做好准备：
dist/index.html

  1.  <!DOCTYPE html>
  2.  <html>
  3.    <head>
  4.      <meta charset="utf-8" />
  5.  -   <title>管理资源</title>
  6.  +   <title>管理输出</title>
  7.  +   <script src="./print.bundle.js"></script>
  8.    </head>
  9.    <body>
  10.  -   <script src="bundle.js"></script>
  11.  +   <script src="./index.bundle.js"></script>
  12.    </body>
  13.  </html>

现在调整配置。我们将在 entry 添加 src/print.js 作为新的入口起点（print），然后修改 output，以便根据入口起点定义的名称，动态地产生 bundle 名称：
webpack.config.js

  1.  const path = require('path');
  3.  module.exports = {
  4. -  entry: './src/index.js',
  5. +  entry: {
  6. +    index: './src/index.js',
  7. +    print: './src/print.js',
  8.   },
  9.    output: {
  10. -    filename: 'bundle.js',
  11. +    filename: '[name].bundle.js',
  12.      path: path.resolve(__dirname, 'dist'),
  13.    },
  14.  };

npm run build

我们可以看到，webpack 生成 print.bundle.js 和 index.bundle.js 文件，这也和我们在 index.html 文件中指定的文件名称相对应。如果你在浏览器中打开 index.html，就可以看到在点击按钮时会发生什么。
但是，如果我们更改了我们的一个入口起点的名称，甚至添加了一个新的入口，会发生什么？会在构建时重新命名生成的 bundle，但是我们的 index.html 文件仍然引用旧的名称。让我们用 HtmlWebpackPlugin 来解决这个问题。

添加HtmlWebpackPlugin

作用：生成html并自动加载打包后的js

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

webpack.config.js

  1. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3.  module.exports = {
  4.     、、、
  5.     plugins: [
  6.       new HtmlWebpackPlugin({
  7.         title: '管理输出',
  8.       }),
  9.     ],
  10.  };

清理 /dist 文件夹

webpack.config.js

  1.  output: {
  2.    filename: '[name].bundle.js',
  3.    path: path.resolve(__dirname, 'dist'),
  4. +   clean: true,
  5.  },