一、webpack-dev-server配置实现了自动打包编译,并把编译成功的bundle.js放到内存中去=》服务器的目录中。【本身是在物理磁盘中】
二、除了要实现编译完的bundle.js文件要放到内存中去,html页面也要放到内存中去。
需要借助webpack的插件html-webpack-plugin来实现。
三、安装插件
npm install/i html-webpack-plugin --save-dev/-D
//把插件安装到项目目录中。
注意:安装html-webpack-plugin插件的时候,会默认安装最新版本,对最新版本的webpack的安装还没有研究透彻,一直报错,所以选择了低版本的安装
npm install/i html-webpack-plugin@3.2.0 --save-dev/-D
四、操作步骤
1、在webpack的配置文件中添加配置(webpack.config.js)
const htmlWebpackPlugin = require("html-webpack-plugin");//引入插件
module.exports = {
plugins: [//配置插件的节点
new htmlWebpackPlugin = ({
template: path.join(__dirname,'./src/index.html'), //指定模板页面,将来会根据指定的页面路径,去生成内存中的页面
filename: 'index.html' //指定生成的页面的名称
})
]
}
2、不需要手动去引入bundle.js了。html-webpack-plugin生成内存中的页面,已经正确的引入打包编译好的bundle.js文件了。
html-webpack-plugin插件的 作用:
1、自动在内存中根据指定页面生成一个内存的页面
2、自动把打包好的bundle.js文件追加到页面中去