html-webpack-plugin的两个基本作用

我们知道前面 bundle.js 是保存在内存中 ，优点就是速度快， 那咱们也想让 html 也放到内存中， 就要用到一个插件

html-webpack- plugin

首先先安装这个插件

npm  i  html-webpack-plugin  -D

导入 在内存中生成html 页面的插件

进入 webpack.config.js 里 添加内容如下：

const path= require('path')
const htmlwebpackplugin=require('html-webpack-plugin')   //导入 html-webpack-plugin, 它是个plugin 要放到plugins 节点上去
module.exports = {
    entry: path.join(__dirname,'./src/main.js'),
    output: {
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    plugins:[
        new htmlwebpackplugin(  //创建一个在内存中生成html 页面的插件 对象
            {
                template: path.join(__dirname,'./src/index.html') ,  //指定模板页面， 将来生成内存模板页面
                filename: 'index.html'   //生成的内存模板名字
            }
        )

    ],
       mode: 'development' // 设置mode
}

分析运行结果

第一 生成的内存html ， 多加了一行html 代码 如下：

<script src="bundle.js" type="text/javascript"></script>

这个意义就是 咱们不要关心， bundle.js 放在哪里了，不管放到哪他都能找到。
插件已经帮我们搞好了。

总结

1. 帮我们在内存生成html 页面
2. 帮我们处理 bundle.js