知识讲解运用： WebPack

webpack基本概念

webpack使用步骤

webpack的配置

webpack开发服务器

1.WebPack基本概念

问题1:以前写完的网站，文件很多，体积很大

问题2：有没有一种自动整合，压缩，剔除无用代码技术呢。

那么为什么学习WebPack呢：

因为使用WebPack打包之后的文件体积更小，运行更快，如果你想让浏览器记载资源更快，一定会用到WebPack

知识总结：

我们为啥学习WebPack

1.减少文件数量

2.缩减代码体积

3.提高浏览器打开的速度

webpack本质是，一个第三方模块包，用于分析，并打包代码：

支持所有类型文件的打包

支持less,cass => css(less和cass打包的时候，会帮助我们转化成css)

支持ES6/7/8 =>ES5（支持把ES6/7/8转化成ES5，降级处理，目的是为了兼容通用）

压缩代码，提高加载速度

2.WebPack使用步骤

问题1.webpack既然是个模块包，需要下载么？

            需要下载的

问题2.在一个文件夹里下载包需不需要有人记录呢？

            package.jiosn帮助记录

使用webpack需要准备的操作步骤：

1.初始化文件夹包环境，得到package.json文件

2.下载webpack等模块包

3.在package.json自定义命令，为打包做准备

（1）先执行yarn inint,第一项基本名字和作者栏可以填一下，其他一路回车就好，具体想知道什             么意思

          可以自己去百度查一下。执行完yarn init 之后，我们可以在文件夹里多了一个package.json             的文件，这个文件就是用来记录你当前模块下了哪些包的。

 （2）然后我们可以执行，yarn add webpack webpack-cli -D,开始下载打包工具

         下图是我init 之后，执行的第一次下包，开始报错，这个错误大概的意思就是说，我们网速             太慢请求超时，那啥也不用想，cv到网站看看是不是有人出现过这个错误，一查真的有，并           且把错误原因以及解决方法都贴出来供大家参考以及使用了

 解决这个错误的具体代码如下图：

 下载完毕之后，会得到如下文件

 我们通过Code打开文件项目，配置scripts自定义的命令，注意package.json文件里不能写注释，   而且必须有引号的全部双引号。

 知识总结：

使用webpack需要做哪些准备工作？

1.初始化文件夹包的环境，得到package.json文件

2.下载webpack资源包

3.在package.json自定义命令，为webpack打包做准备

3.WebPack基础使用：

  来个简单的小需求：

   2个js文件 —>打包成1个js文件

   分析：

    新建src下的资源

    add.js-定义求和函数并导出

    index.js-引入add模块并使用函数输出结果

    执行yarn build 自定义命令，进行打包（确保终端路径在src的父级文件夹）

    打包后默认生成dist文件夹，并且产生main.js文件，观察其中代码

（1）先建两个文件分别为src/add/add.js和src/index.js

 (2)在终端执行yarn bulid命令，开始打包，打包成功

 （3）我把打包的dist文件删除，重新写了一下这个打包过程，出现了一处报错，具体如下：

（4） 他说：字段'browser'不包含有效的别名配置，看重点：没有有效的别名配置。通过CSDN查            找，解决办法是配置文件后缀。，具体方案如下

（5）那么问题就是一目了然了，肯定是我引入文件方面的错误，原来是我没有加引入文件和后缀

         问题所在如下图：

 （6）经过修改之后：

 总结：

 webpack如何使用

默认srcc/index.js —打包入口，所有需要打包的文件都有引入到这里

只有引入到入口的文件才会参与打包

执行package.json里build命令，执行webpack打包命令

默认输出dist/main.js打包结果

(7)webpack再次打包（更新打包/重新打包）

需求：代码更新后，要怎么打包呢？

例子：

a. src下新建tool/tool.js

b. 定义数组求和函数导出

c. index.js - 引入tool模式的函数并并使用，打印结果

d.执行yarn build 自定义命令，进行打包（确保终端路径在src的父级文件夹）

数组求和文件：

 引入求和函数，并打印使用：

 使用yarn build 进行打包

 打包完成：

webpack会对文件进行极致压缩。

 小结，总结：

代码增加后，如何打包呢？

1.确保在src/index.js引入和使用

2.重新执行yarn build打包命令

修改webpack默认入口和出口

1.新建webpack.config.js(webpack默认配置文件）

2.通过entry设置入口文件路径

3.通过output对象设置出口路径，和文件名

打包具体流程：

 

做个下案例：隔行变色

问题1：打包后的文件能不能应用于网页上呢？

我们可以把打包后的文件引入到一个html里边，这样就可以运行啦

案例：webpack打包代码，jquery实现功能

需求：新建项目：yarn下载jquery，然后模块化引入到js中，编写jq代码实现隔行变色

效果如下：

具体实现步骤：

1.从0准备环境，初始化包环境，下载webpack和webpack-cli包，配置自定义命令build

2.yarn下载jquery,新建public/index.html ,准备一些标签

3.src/main.js引入jquery，编写功能代码

4.执行打包命令

5.复制public/index.html到dist/,然后引入打包后的js,运行网页观察效果