前端工程化与webpack

前端工程化与webpack

（一）前端工程化

1、前端开发：

 2、前端工程化：

3、 前端工程化的解决方案（eg：webpack）：

 4、webpack：

（二）安装和配置webpack

1、安装webpack：在项目中安装webpack，执行命令npm Install webpack@5.42.1 webpack-cli@4.7.2 -D。

其他：

-D语法表示：

 补充-S和-D语法：

 

注意：可在（网址）npmjs.com中进入官网，进行查找是否为-S还是-D。

2、配置和使用webpack：

配置和使用webpack的理论：

实现配置和使用webpack的步骤如下：

（三）webpack的基本使用

1、案例：创建列表隔行变色项目

 ①新建了一个全英文的空白目录，即change-rows-color文件夹作为根目录，双击进入文件夹中，首先单击地址栏，输入cmd，在cmd中输入npm init -y命令，即出现package.json文件,即完成了初始化包管理配置文件package.json。

 ②创建src源代码目录：

 ③右击change-rows-color文件夹，用Visual Studio Code打开，进入软件中，创建index.html和index.js。

 ④初始化首页基本的结构：即创建9个<li>

 ⑤运行npm install jquery -S或者npm i jquery -S命令，即完成下载jquery。

分析-S（=--save）也可省略：

 ⑥通过ES6模块化的方式导入jQuery，实现列表隔行变色。

 ⑦报错：出现了语法问题（SyntaxError），没能实现功能，原因是ES6导入语法为高级语言，有浏览器兼容问题，跑不起来，此语句不能执行，可以想想webpack能否解决。

⑧安装配置使用webpack。

⑨改引用main.js，因为之前的index.js中有兼容性问题，dist->main.js为系统自动生成的解决兼容性问题。

最终成功解决了问题实现了隔行变色的功能如下图：

2、 压缩：

首先修改值：

 之后，再次执行一次使用命令npm run dev。

3、webpack.config.js中的module选值（development和production）问题：

4、webpack的entry和output：

①默认的webpack的entry和output：

 ②修改webpack的entry（把index.js修改为index1.js）：

 ③修改webpack的output（把main.js修改为bundle.js）：

5、webpack的插件

每次使用修改源代码都得重新执行npm run dev，非常麻烦，解决办法如下：安装配置webpack的插件webpack-dev-server，会实现每次修改源代码可以直接ctrl+S，直接运行。

 （1）安装配置使用webpack-dev-server插件

①安装webpack-dev-server插件：运行npm install webpack-dev-server@3.11.2 -D。

②配置webpack-dev-server插件：

③若想要停止打包（即上图终端）：在cmd中继续两次ctrl+c。

④注意：运行浏览器看结果，必须用如下的地址localhost:8080/src，即终端中npm run dev中的地址+src：——————但是浏览器中出现的结果为之前的，还是不对，此插件没有把bundle.js放到物理磁盘中，放在内存（暂存了，可以频繁读写，速度快）中了，

 所以，若想看实际最近的运行结果，应如下：

 再访问localhost:8080/src，即终端中npm run dev中的地址+src。

 （2）安装配置使用webpack-dev-server插件

进入localhost:8080，出现结果如下，若想看运行结果，还得+src，如何解决呢：

 解决办法如下：把index.html复制一份到根目录下，即可达成进入localhost:8080，就会出现运行结果。

①安装html-webpack-plugin插件：运行npm install html-webpack-plugin@5.3.2 -D。

②配置html-webpack-plugin插件：

配置html-webpack-plugin插件的理论：

配置html-webpack-plugin插件的实际操作，都在webpack.config.js中写，如下：

重新打包一下，即：npm run dev

注意：虽然index.html已复制一份到根目录，但是是存放的内存中的，是虚拟存在的，肉眼看不到的。

以上，即可达成进入localhost:8080，就会出现运行结果。

注意：进入localhost:8080，看到的运行结果是虚拟的index.html，不是磁盘上的index.html，是不一样的。

（3）html-webpack-plugin插件的特性：

注意：显示浏览器运行结果（内存上的index.html）。

6、不想配置webpack还想体会到webpack的好处：

在浏览器中搜索vue-cli，出现VUE CUI工具。

7、了解devServer节点

 8、webpack中的loader(加载器):

(1)loader：

(2)不建议在index.html中引入脚本，可在index.js中导入.css文件。

 (3)打包处理.css文件：

理论：

 实操：

 (4)总结打包处理.css文件的步骤：

 (5)打包处理less文件：

①创建index.less文件

 ②在index.js中引用index.less

 ③打包处理less文件：

(6)另：扩展：base64

把图片转成base64形式，防止发生小图片的网络请求。

缺点：体积会变大，eg：12KB的图片，转成base64形式可能会变成15KB的。

所以，不建议把大图片转成base64的形式，可以把小图片和小logo转成base64的形式。

(7)打包处理样式表中与url路径相关的文件：

理论：

实操案例：处理图片文件的loader

① 

 ②运行报错： 

③

④处理图片文件的loader

(7)用babel-loader打包处理js文件中的高级语法：

实操：

①（上图中代码写在index.js中，另起头开始写）上图中代码会出现问题，采用babel-loader解决，如下：

 注意：上图不需自己敲，可以查找bable的官方，进行复制。

 9、配置webpack的打包发布

最后会形成一个dist文件夹。

优化：

①把JavaScript文件统一生成到js目录中： 

②把图片都放到image文件夹中：

 ③自动删除dist旧文件：其中2,3步在webpack.config.js中编写。

10、Sourse Map

①在开发阶段，解决问题如下：

②在生产阶段，解决问题如下：

理论：

 实操：

③总结：

注意：只要修改webpack配置文件就要重新打包，即在cmd中继续两次ctrl+c。

11、webpack中的@

注意：

@直接从根目录（外）直接找到目标文件（里），推荐使用@

../是从目标文件（里）往外查找

但，用之前要配置一下@，如下：