webpack自动打包功能实现
目录
一、了解webpack
当前web开发面临的困境
1.文件依赖关系错综复杂
2.静态资源请求效率低
3.模块化支持不友好
4.浏览器对高级javascript特性兼容程度较低
webpack是前端项目构建工具（打包工具）
提供了有好的模块化支持，以及代码压缩混淆，处理js兼容问题，性能优化等强大功能
二、在项目中安装和配置webpack
1.运行npm install webpack webpack-cli -D命令，安装webpack相关的包
2.在项目根目录中，创建名为webpack.config.js 的webpack配置文件‘
3.在webpack的配置文件中，初始化如下配置：
module.exports = {
mode:'development' //mode用来指定构建模式
}4.在package.json配置文件中的scripts节点下，新增dev脚本如下：
"script":{
"dev":"webpack" //script节点下的脚本，可以通过npm run执行
}5.在终端中运行npm run dev命令，启动webpack进行项目打包
三、webpack的打包
1.默认打包的入口文件为src下的index.js，默认打包的输出文件为dist下的main.js
2.若要修改打包的入口和出口，可以在webpack.config.js中新增如下配置：
const path = require('path')
module.exports = {
entry: path.join(__dirname, './src/index.js'),
output: {
path: path.join(__dirname, './dist'), // 输出文件的存放路径
filename: 'bundle.js' // 输出文件的名称
}
}3.运行npm run dev进行打包，会发现在dist文件中出现bundle.js文件
4.将bundle.js引用到index.html中，运行页面。
四、webpack的自动打包
1.为什么要进行自动打包？
若修改js中的样式，例如jquery中的 $(‘li:odd’).css(‘backgroundColor’,‘red’）代码，会发现页面样式并没有发生改变，因为我们在index.html中引入的是bundle.js而不是index.js,所以每次修改代码都得npm run dev 进行打包，自动打包会更方便，也就是热更新。
2.配置webpack的自动打包功能
（1）运行npm install webpack-dev-server -D命令，安装支持项目自动打包的工具
（2）修改package.json -> scripts 中的dev命令如下：
"scripts":{
"dev":"webpack-dev-server" //script节点下的脚本，可以通过npm run 执行
}（3）将src -> index.html中，scripts脚本的引用路径，修改为“/bundle.js”，该文件是虚拟的，看不见的。
（4）运行npm run dev命令，重新进行打包
（5）在浏览器中访问http://localhost:8080地址，查看自动打包效果
若出现 Cannot find module ‘webpack-cli/bin/config-yargs’
问题，可能是webpack与webpack-dev-server版本不兼容
原文地址：https://blog.csdn.net/qq_38679823/article/details/125205460
