- 安装 html-webpack-plugin
npm i html-webpack-plugin -D
2.修改webpack.config.json文件
// 导入在内存中生成的HTML插件 只要是插件都一定要放在plugin插件中去
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports ={
...
plugins: [
new htmlWebpackPlugin({ //创建一个在内存中生成html插件
template: path.join(__dirname, '/src/index.html'), // 指定模板页面, 将来会根据指定的页面路径, 去生成内存中的页面
filename: 'index.html' // 指定生成内存中的页面
})
]
}
...
全部的页面代码
const path = require('path');
// 导入在内存中生成的HTML插件 只要是插件都一定要放在plugin插件中去
const htmlWebpackPlugin = require('html-webpack-plugin');
// 这个配置文件, 其实就是一个js文件, 通过node 中的模块操作, 向外暴露了一个配置对象
module.exports = {
// 在配置文件中, 需要手动的指定入口和出口
entry: path.join(__dirname, './src/main.js'), // 入口, 表示webpack要打包那个文件
output: {
path: path.join(__dirname, './dist'), // 指定打包好的文件, 放在那个目录中去
filename: 'bundle.js', // 这里是指输出的文件名称
},
mode: 'production',
plugins: [
new htmlWebpackPlugin({ //创建一个在内存中生成html插件
template: path.join(__dirname, './src/index.html'), // 指定模板页面, 将来会根据指定的页面路径, 去生成内存中的页面
filename: 'index.html' // 指定生成内存中的页面
})
]
};
