webpack的实时打包构建

1. 在项目根目录中创建webpack.config.js

2. 由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径：

   const path= require(“path”);
   module.exports={
   enter:path.join(__dirname,".src/index.js"),
   output:{
   path:join(__dirname,"./dist"),
   filename:“main.js”
   },
   }

3.输入webpack进行打包
4.输入npm run dev 运行项目
5.输入ctrl+c关闭项目运行npm i html-webpack-plugin --save-dev安装到开发依赖
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require(‘html-webpack-plugin’);
plugins:[ // 添加plugins节点配置插件
new htmlWebpackPlugin({
template:path.join(__dirname, ‘src/index.html’),//模板路径
filename:‘index.html’//自动生成的HTML文件的名称
})
]