一、为什么要使用Webpack？
- 随着前端工程越来越复杂，单独写几个文件来写业务代码，这样的方式已经无法保证项目的可维护性了，所以我们就想把不同的业务逻辑拆成模块然后去分开引入这些模块，每个模块自己做自己的事情。这样就可以保证项目地维护性和可扩展性了！
- 但假如你有几千个模块，那你能在页面上引入几千个js文件吗？所以当项目大到这种程度的时候，我们就得借助工具来管理我们的这些模块了！
- 而
Webpack就是可以帮助我们管理复杂项目的一个工具。 - 与
Webpack类似还有很多相似的工具，比如说Gulp，Grunt，Browserify等等 - 但是这几年，
Webpack的使用率直线上升，比如说Vue，React，Angular三大框架的脚手架工具都开始使用它来做底层代码的构建，这得益于Webpack可以提供其他工具无法实现的一些特性，比如说Tree shaking，代码懒加载，code splitting 也就是代码分割，等等。
所以现在来说，用Webpack做代码管理的工具已经是越来越多前端开发者的共识了！！！！
二、Webpack是什么？
Webpack就是一个模块打包工具，让我们可以把复杂的程序细化为小的文件
最开始只是针对js来进行打包，后来随着版本的不断的更新，它不仅仅只是js的打包工具了，它还能够打包css文件，scss，lsee等css预处理器``img图片等等，可以说它可以打包你任何想要打包的工具。
三、如何简单地使用Webpack？
1.在当前项目目录 package.json配置文件，初始化我们的项目
通过命令初始化package.json的时候，终端会出现一些询问，比如项目名称，项目的描述，作者的信息等等，直接一路回车就行
npm init // 初始化项目 生成package.json文件
这时候会发现目录下有了一个package.json文件
2. 通过npm 或cnpm 安装 webpack
//全局安装 webpack
npm install -g webpack
//本地安装 安装到当前项目目录，下载到开发环境里
npm install --save-dev webpack
npm install --save-dev webpack-cli
// 注意webpack-cli最好不要全局-g安装，否则如果有两个webpack项目的话会出现一些问题
3. 创建dist目录，用来生成打包后的文件，比如我在dist文件夹里创建了一个index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>这是我们的基础页面</title>
</head>
<body>
<!-- 写入最基础的html代码，它在这里目的在于引入打包后的js文件（这里我们先把之后打包后的js文件命名为bundle.js -->
<div id="root">
</div>
</body>
</html>
4.然后再创建一个src目录，用来存放我们的代码逻辑，比如我在src文件夹创建了一个 main.js，写了一段简单行为
// 我想要对index.html中的root元素添加一段文字
let root = document.querySelector('#root')
root.innerHTML = 'hello'
root.style.color = 'orange'
现在我们打开index.html页面，会发现控制台报了一段错误，说并没有找到bundle.js
那么我现在想要让main,js进行一个打包，变成bundle.js该怎么操作呢？在终端输入命令:
webpack src/main.js --output dist/bundle.js
这个命令的意思是我要通过webpack将src目录下的main.js打包 ，--output的意思是出口文件，后面跟着的是我要生成的出口文件的路径，也就是我要把main.js进行打包，并生成到dist目录下,出口文件的名字叫bundle.js
按下回车键，你会发现dist目录下生成了bundle.js文件
然后打开页面，你会发现没有报错了，而且我的hello也正常显示了
这是一个最基本的打包方法也是最笨的方法，因为如果我去对dom元素做了修改，比如改变为红色，这时候刷新页面，你会发现它并没有变为红色，是因为，当你对代码做了修改，就需要执行命令，打包一下，不然dist目录中的bundle.js是没有更新的
但是我如果每次打包都输入这么长的命令，是不是特别麻烦？所以我们继续往下进行
5.在项目根目录下创建webpack.config.js文件进行配置
在webpack.config.js中进行设置
// 引入webpack提供的地址
const path = require('path')
module.exports = {
// 是否对打包的文件进行压缩
mode:'production',
// 入口文件配置
entry:{
// 入口文件路径，main属性名可以随便写
main:'./src/main.js'
},
// 出口文件配置配置
output:{
// 设置打包的文件名
filename:'bundle.js',
// 设置打包的文件生成路径
path:path.resolve(__dirname,'dist')
}
}
配置成功以后，再进行打包就不需要这么长串的命令了，可以直接通过以下命令进行打包了：
webpack // 执行命令进行打包
以上就是一个最基本的打包使用，那么我觉得每次修改代码都得需要进行打包，才能看到页面的实时改变，我觉得还是太麻烦了，这里我去通过下载一个插件，来配置本地服务器
6.配置本地服务器
-
下载依赖包：
npm install webpack-dev-server --save-dev -
然后打开package.json，在scripts对象中加上下面代码
"dev": "webpack-dev-server --open --port 8080 --contentbase src --hot"这里我用图片简单说了下这几个属性中的意义
-
在运行命令之前，我们首先复制一份dist下的index.html,复制到我们的项目根目录，跟dist 以及src文件夹处于平级关系
-
最后在终端运行
npm run dev指令就可以正常跑起来了 -
代码修改后，觉得可以了，直接
webpack进行打包
当然如果想让这个index.html，我想在打包的时候就直在dist中生成index.html这个文件的话，那么可以去下载插件，然后在webpack.config.js中去进行引入配置plugins对象
网上关于这方面的配置很多，这里就不一一说了，这篇文章只是对于webpack做一个简单地介绍，真正在项目中去配置的话，就不是一盘文章能说的明白的了
那么随后我在继续学习使用webpack的过程中呢，也将继续把我经历的过程说出来，对自己有个总结，如果有什么不足之处，还请见谅，指出我的不足之处
感谢观看！！！