webpack是我们前端开发人员很好用的一个打包工具 因为它支持一键打包，以及一些命令也很人性化。目的是将所有的文件 集成与一个js文件 避免二次请求 对服务器减压
直接走入正题吧。
第一步
首先 新建一个文件夹 文件夹一定不能为中文 否则会出现一些未知的错误，这个坑我已经踩过了~~ 直接给个语义化最强的名字吧 就叫webpack好了
然后在里面建两个文件夹 一个src 用于放我们写好的页面 以及一些js文件 css样式
第二个文件夹dist 用于存放打包好的文件
第二步 初始化
运行npm命令 npm init -y 快速初始化 然后会在根目录生成一个package.json的文件
第三步 本地安装webpack以及webpack依赖的包
1: 使用yarn add webpack -D 本地安装webpack包 （注意：这里如果用npm i webpack -D安装本地包的话 可能会报错 安装不上去 建议使用yarn命令安装本地 全局包使用npm命令进行安装）
2: 使用 npm i webpack-cli -D 本地安装webpack-cli 这个包 webpack依赖于这个包 如果安装成功了 在package.json文件中的 devDependencies 对象当中会有这两个文件名称
第四步 在src文件夹里面建立一个页面 和一个js文件
HTML首页
这是编写的js文件 通过 import $ from ‘jquery’ 引入通过npm下载的jquery包
然后可以直接在里面编写js代码 下面的代码是简单的隔行变色的效果
页面都搭好了之后 然后我们进行下一步
**创建一个webpack.config.js配置文件文件 **
在根目录创建一个wenpack.config.js文件 看图标也许已经猜到了 这并不是一个js文件，
它是webpack的一个配置文件 当我们没有手动输入指定打包到哪个路径的时候 则会到这里面来找
配置如下 ：
entry: 这里写需要打包的路径，文件
output: 这里的path写需要打包到哪个文件夹 filename是指定生成的打包完成的名字
约定打包的js文件名字叫做 bundle.js
然后通过mode: 指定模式 development是开发者模式 就是打包的文件没有压缩过的
还有一个是项目上线时候的模式 单词是啥我也忘记了 具体可以百度
这些都弄好之后 我们可以在终端中直接输入 webpack 然后就一键打包了 在index.html页面引入 打包好的js文件就可以了
回车输入
成功的话 如下图
这个时候 我们打开页面看看
ok 成功了
但是 每次更新的时候 都需要重新打包 手动刷新页面 作为一个程序员 自然是不愿意干这些无意义的琐事 不可能的 这辈子都不可能的
接下来就是重点了
通过npm i webpack-dev-server -D让页面运行在服务端 并且自动更新
npm i webpack-dev-server -D 在本地安装这个包 会把index.js生成在内存中
可以直接用script引入内存中的包 本地磁盘的包可以不装都ok
安装好了之后 在package.json 里面的script对象 定义一个dev 把包名写上去
"webpack-dev-server " 这样就可以通过命令运行这个包了 因为包名过长 不能直接运行
所以需要在这里定义一下 后面的–open 代表是服务启动 自动打开网页 --contentBase 代表打开哪个指定的文件夹 --hot 可以起到自动刷新页面的作用 当我们一更改代码 保存之后 被webpack-dev-server 监听到了之后 就会自动刷新页面 有了这几个命令之后 让我们少做了很多事情 …
配置好了之后 在终端运行 npm run dev 会自动打开运行在服务器的页面 页面跟之前一样
关于在webpack里面引入css less 样式问题
默认 webpack是不支持打包js以外的文件 这个时候需要在另外安装两个包
1: css-loader 2: style-loader 两个包 安装方式还是和之前一样 安装到本地
可以直接一次性安装多个包 包名中间用空格隔开
命令： npm i style-loader css-loader -D
这些包不需要再次引入
安装好了直接在index.js导入写好的css样式 如图
到这里还没完 ------
接下来我们要到webpack-config-js里面去配置一些内容
与mode 平级 一个module对象 配置如下 里面放一个rules数组
里面放对象 test表示正则匹配指定的后缀名 use表示用到的哪些规则
当然 也不支持 图片 URL地址 这个时候 我们又需要安装一个loader
在终端运行命令 npm i url-loader file-loader -D
url-loader依赖于file-loader 所以直接一起装了
然后在去webpack.config.js 里面配置一下
跟css配置同级
基本的安装与使用大概就这么多吧
-------------------------------在更两个常见的错误吧
如果出现了某某文件 不是内部命令 或者可运行的文件 如下图：
这种情况 一般是之前的包可能被删了
在package.json 里面有记录之前装过这个文件，但是不代表现在还有这个文件
这个时候直接把node_modules 这个包删了 然后运行npm i 命令 会把所有记录在package.json里面的文件全部安装好
**还有就是 记住 json文件里面一定不能写注释 **
