在 src 目录下面 新建一个 webpack.config.js 文件
按照图示 设置 需要打包的文件 ，配置打包后输出到哪个文件及路径
配置完成以后，直接在终端 输入 webpack 就会实现自动打包，小伙伴赶紧动手试一下
如果说 我们想要 我们一修改文件，不用我们手动打包，就想让我们 修改的文件生效
1、可以在 package.json 文件中配置 dev: webpack-dev-server
2、然后在终端里面 执行 npm run dev
会打开一个端口，我们可以直接访问这个端口（默认是8080端口），访问我们的文件
3、修改以后只要我们修改就会自动进行编译
注意：使用 wabpack-dev-server 以后需要在我们的html 文件中修改，引入的打包文件路径
3.1 这是我为使用 webapck-dev-server 的时候 引入 bundle.js 路径
3.2 这是使用 webapck-dev-server 的时候 引入 bundle.js 路径
因为使用 webpack-dev-server 帮助我们生成的 bundle.js 并没有存放到实际的 物理磁盘中，而是直接 托管到了 电脑的内存中，所以在项目目录中 // 根本找不到 bundle.js 这个文件，虽然看不到，但是我们可以认为 打包好的文件 是和 dist src node_modules 平级，有一个看不见的 文件bundle.js，这样做的原因就是 （页面渲染块）
4、如果我们还想 在配置完 webapck-dev-server 的时候，执行npm run dev 自动打开 端口连接
可以做如下配置
还可以 给 dev 配置 --hot 这样的话 我们进行文件修改，就会在上次打包好的文件上 打上我们本次修改的补丁，就不用每次都生成一个完整的 打包文件，从而运行会更快
ps: 还可以通过运行命令 npm install html-webpack-plugin -D 把 html文件也放到 内存中去
安装好 html-webpack-plugin 这个插件以后，需要在webpack配置文件中 作如下修改：
二、webpack 打包处理 css类型文件 的步骤方法
1、在 main.js 中 用import 导入 css 文件路径 我这边的路劲是 import "./src/css/index.css"
2、导入以后，因为 webpack 不能处理非 JS 类型的文件，所以 需要用 npm i style-loader css-loader -D
3、去webpack 配置文件中，新增一个module 属性
并且调用处理的规则是 从右往左 处理，也就是说 先调用 css-loader 去处理匹配到的 css文件
4、对应的 处理 less 文件，安装 less-loader，不过安装前得先 使用命令 npm i less -D 安装 less,如果不安装less 直接安装会有警告：
然后定义匹配规则
因为 less 也是样式，所以先用 less-loader 处理完以后，必须在调用 'style-loader','css-loader'
5、对应处理sass 文件，也需要先 使用 npm i node-sass -D 安装 node-sass，然后再安装 npm i sass-loader -D
对应的咋去匹配 sass 的 rules：
6、处理 css 文件中的 url 地址：
webpack 默认是无法处理 css 中的url 地址的
此时我们需要安装 处理url的 loader ，使用命令 npm i url-loader file-loader -D，安装成功以后，去配置文件配置rules
更进一步可以 配置 打包图片后的相关参数：
limit: 设置一个是否将图片打包成 base64 位的临界值
name: 可以设置 原来的图片经过打包以后，还是保持和原来的名字一样，为了防止重名还可以在图片名字前面加上 哈希值
7、配置处理 字体文件的 lodaer
