npm 本地安装 html-webpack-plugin 插件后，在 webpack.dev.config.js 中配置 webpack 

var htmlWebpackPlugin = require('html-webpack-plugin');

先建立对插件的引用，commonjs 模块引用的写法

plugins 对应值为一个数组

如果要在 webpack 中使用插件，只需要在 webpack 的配置对象中增加一个 plugins 属性，值为数组类型，插件初始化（看插件自身的实现）

需求背景： webpack 生成的打包文件 [name]-[hash].js 的文件名是不确定的，是否需要每次修改 index.html 中 js 引入的文件名？ —— 利用 webpack 插件解决这个问题： 使用 html-webpack-plugin，先用 npm 本地开发安装 npm i html-webpack-plugin -D

filename: '[name]-[chunkhash].js'

改为文件chunk自己的hash值，两个打包模块都不一样，这个hash值可以看做是文件自身的版本号，只有当这个文件发生改变的时候这个hash值才会发生变化 —— 这个特征在项目的上线过程中很有用，只上线那些被改过的文件

将filename改为占位符，而不是用静态字符串： [name]-[chunk].js 

输出如图

官网中解释 multi entry

如果多个chunk，filename中就使用占位符[name]、[hash]、[chunkhash]

[name] 文件名

[hash] 打包时的第一行显示hash

[chunkhash] 每个chunk自己的hash值

entry 改为对象类型

entry: {
	main: './src/script/main.js',
	a: './src/script/a.js'
}

但此时打包输出的只有一个 bundle.js 文件

和 output 有关

output: {
	path: ('./dist/js'),
	filename: 'bundle.js'
}

1. 不要在filename中指定绝对路径，因为在path中会指定，否则两个会混乱

2. filename 是用于打包后的每个输出文件，当多输入时（entry为一个对象，多个chunk），同一个filename会被覆盖，最后只生成一个文件

entry 对一个对象 （似乎现在官网上没有提及 entry 可以是数组）

[0] 模块 multi main，把两个不相关的模块 main.js 和 a.js 打包在一起

将webpack.dev.config.js中的 entry 字段设置为数组字符串：

entry: ['./src/script/main.js','./src/script/a.js']

打包结果如图，打包原因 single entry 单个入口，两个入口模块被打到multi main模块中，最后生成 bundle.js 文件

在 npm package.json 中的 script 字段添加 webpack + 选项  的简写命令

"webpack": "webpack --config webpack.dev.config.js --progress --display-modules --colors --display-reson"

之后只需在命令行运行 npm run webpack即可，不再添加选项

重命名 webpack.config.js 为 webpack.dev.config.js 后，运行 webpack 失效，因为默认的配置文件为 webpack.config.js，此时需要通过 --config 选项指定配置文件

webpack --config webpack.dev.config.js

entry 打包的入口从哪个文件开始

output 打包后的文件保存在什么地方

path 打包后保存的目录

filename 打包后的文件名

命令行运行 webpack 时会默认读取根目录下的 webpack.config.js 或者是通过 --config 选项指定的文件

该配置文件应该导出一个配置对象，如

module.exports = {
    // configuration
}

注意是 exports 不是 export

项目文件结构：

dist 打包输出

node_modules npm包

src 打包源文件

    script 脚本文件

    style 样式文件

index.html 原页面

package.json

webpack.config.js 

--display-reasons 

展示打包这个模块的原因

cjs require ./world.js [0] ./hello.js 1:0-21    hello.js中require这个world.js文件