一、webpack介绍
1.概念：webpack是前端项目工程化的具体解决方案
2.功能：提供友好的前端模块化开发的支持，以及代码压缩混淆、处理浏览器JavaScript的兼容性，性能优化等强大功能
3.好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性
二、webpack使用
1.安装：在要运行的根目录下打开终端，然后输入以下命令：
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
2.项目中配置：主要分为三步
①在项目根目录中创建名为：webpack.config.js的webpack配置文件，并初始化如下的基本配置：
module.exports = {
mode: "development"
}
//mode中有两个可选值，一个为development在进行前端开发时使用,另一个为production在开发完成后，上线时使用
②在package.json的scripts节点下，新增dev脚本，其内容如下：
"scripts" :{
"dev" : "webpack"
}
③在cmd终端中运行:
npm run dev
dev是你第二步自己命名的参数，
当这三步完成后，就可以将项目进行打包创建
三、webpack中一些常识
1.在webpack 4.x和5.x的版本中，会有一个默认约定
默认的打包入口：src->index.js文件
默认的打包输出路径：dist->main.js，dist是通过npm run dev后自动打包生成的
2.也可以通过在上面创建的webpack.config.js中修改默认约定
//首先导入path
const path = require('path')
//接着通过两个属性entry和output修改
module.exports = {
mode : "development"
entry: path.jion(__dirname,'./src/index.js'), //打包入口文件的路径
output: {
path:path.jion(__dirname,'/dist'), //输出文件的存放路径
filename: 'bundle.js' // 输出文件的名称，默认为main.js
}
}
