7、webpack管理输出

※项目使用前文webpack起步建立的项目

随着应用程序增长，并且一旦开始对文件名使用哈希(hash)]并输出多个 bundle，手动地对 index.html 文件进行管理，一切就会变得困难起来。然而，可以通过一些插件，会使这个过程更容易操控。

1、index.html自动生成，防止入口脚本名字修改还要再手动修改index.html

1)安装html-webpack-plugin

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

2)新增src/print.js文件

export default function print() {
    console.log('print js print infomation!');
}

3）更改wenpack配置文件webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: '输出管理'
        })
    ]
}

4、构建前目录结构

webpack-demo
  |- webpack.config.js // webpack配置文件
  |- package.json
  |- /src        // 新增src源代码文件夹
    |- index.js  // 新增js文件
    |- print.js
  |-/dist

5、构建工程

npm run build

6、构建后目录结构

   webpack-demo
  |- webpack.config.js // webpack配置文件
  |- package.json
  |- /src        // 新增src源代码文件夹
    |- index.js  // 新增js文件
    |- print.js
  |- /dist
    |- app.bundle.js
    |- print.bundle.js
   |- index.html

7、浏览器打卡index.html 验证结果