webpack自动打包功能配置

当我们在js中修改后，在浏览器打开html文件并没有任何变化，这是因为引入的js文件是之前打包的js文件，如果要实现修改后的js有变化，需要在重新打包一次，这样就大大的增加了我们的工作量，所以这儿就用到了webpack配置自动打包功能。
这儿我用vscode为编辑器

• 第一步：vscode终端，在项目根目录中，运行 npm install webpack-dev-server -D 命令,安装支持项目自动打包的工具。
• 第二步：修改package.json -> scripts 中的start命令如下(注意 这儿的start可以自己起一个名字):
  
• 第三步：将src -> index.html 中，script 脚本的引用路径，修改为"/button.js"
  这儿引用了上面那个地址修改成“button.js”
  
• 第四步：终端运行 npm run start 打包
  
• 第五步：在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

当我们在index.js中修改成蓝色，再次查看效果

这样就完成了自动打包的配置
注意:
●webpack -dev-server会启动一个实时打包的http 服务器
●webpack-dev-server
打包生成的输出文件,默认放到了项目根目录中，而且是虚拟的、看不见的

在vscode中要停止自动打包，使用ctrl+c快捷键，选择 Y 接口停止自动打包功能