vue2.0——第一天(工程化和webpack）

目录

1、webpack的学习目标

2、前端工程化

2.1小白眼中的前端开发vs实际的前端开发

2.2什么是前端工程化

2.3前端工程化的解决方案

3、webpack的基本使用

3.1什么是webpack

3.2创建列表隔行换色项目

3.3在项目中安装webpack

3.4在项目中配置webpack

3.4.1  mode可选值的应用场景

3.4.2webpack 解决兼容性问题的流程

3.4.3webpack中的默认约定 

3.4.4自定义打包的入口与出口

4、webpack中的插件

4.1webpack-dev-server插件（实现自动更新）

4.2html-webpack-plugin插件（将src指定目录下的bundle.js复制一个到根目录）

4.3devServer插件（执行npm run dev后自动打开（内存的）浏览器）

5、webpack中的loader

5.1loader概述​编辑

5.2loader的调用过程​编辑

5.3打包处理css文件​编辑

5.4打包处理less文件

5.5打包处理样式表中与url路径相关的文件

5.6打包处理 js中的高级语法 

5.6.1安装babel-loader相关的包

5.6.2配置abel-loader

6、打包发布

6.1配置webpack的打包发布​编辑

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

6.3把图片文件统一生成到image目录中

6.4自动清理dist目录下的旧文件

7、Source Map

7.1什么是Source Map

7.2解决默认Source Map的问题

7.3webpack 生产环境下的Source Map

7.3.1只定位行数不暴露源码

7.3.2定位行数且暴露源码

7.4Source Map的最佳实践​编辑

8、拓展

8.1webpack开箱即用​编辑

8.2@目录配置

8.3vue-detools调试工具的安装

---

1、webpack的学习目标

2、前端工程化

2.1小白眼中的前端开发vs实际的前端开发

2.2什么是前端工程化

• 前端工程化指的是:在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化标准化。
• 企业中的 Vue项目和 React项目，都是基于工程化的方式进行开发的。
• 好处:前端开发自成体系，有一套标准的开发方案和流程。

2.3前端工程化的解决方案

3、webpack的基本使用

3.1什么是webpack

3.2创建列表隔行换色项目

针对js代码出现的兼容性问题，可以用以下的webpack来解决（初步体会webpack作用）

会在后续进行解决......

3.3在项目中安装webpack

安装命令：npm install webpack@5.42.1 webpack-cli@4.7.2 --save-dev

-S:安装包到"dependencies"，在开发和上线阶段都要用到

-D:安装包到 "devDependencies"，只在开发阶段用到

运行命令后，成功安装webpack到package.json中的devDependencise中

3.4在项目中配置webpack

1、创建 webpack.config.js配置文件

 2、在package.json的scripts节点下，新增dev脚本如下:

scripts里边的东西可以被运行

 3、npm run dev

3.4.1  mode可选值的应用场景

执行npm run dev命令的时候，读取项目根目录下的webpack.config.js文件，拿到文件中向外导出的配置选项。

3.4.2webpack 解决兼容性问题的流程

执行npm run dev命令之后会出现一个dist文件，dist中的main.js就是webpack对index.js处理后的结果，只需在index.html中导出即可解决兼容性的问题

3.4.3webpack中的默认约定 

3.4.4自定义打包的入口与出口

4、webpack中的插件

如果更改了index.html中的内容，需要重新运行npm run dev命令才可以看到效果，比较麻烦，应该如何解决？？？webpack-dev-server插件来解决，它可以监听项目的变化

安装插件命令：npm install webpack-dev-server@3.11.2 -D

配置：3个步骤·

4.1webpack-dev-server插件（实现自动更新）

安装：

配置：（注意: webpack-dev-server 会启动一个实时打包的http服务器）

webpack-dev-server使项目运行地址改变：

虽然，安装了插件，修改之后可以进行自动更新，但是更新的内容看不到，原因是该插件导致项目运行的位置发生改变，不能在通过file....访问

进入根目录http://localhost:8080/之后需要点一下src才会加载sjf.js文件

4.2html-webpack-plugin插件（将src指定目录下的bundle.js复制一个到根目录）

插件作用：

安装：

配置：（在文件：package-lock.json中）

运行内存和物理磁盘的区分：

我们所看到的页面是内存中的（是从src中复制到内存根目录http://localhost:8080/的），并不是物理磁盘file:///D:/%E7%A0%94%E7%A9%B6%E7%94%9F/%E5%89%8D%E7%AB%AF%E7%BB%83%E4%B9%A0/07vue2.0Tovue3.0/day1/code/change-rows-color/src/index.html中的页面

4.3devServer插件（执行npm run dev后自动打开（内存的）浏览器）

5、webpack中的loader

5.1loader概述

5.2loader的调用过程

5.3打包处理css文件

5.4打包处理less文件

5.5打包处理样式表中与url路径相关的文件

图片的大小>limit后的数不会被转成base64格式，小于等于的会被转成base64格式

base64图片优点类似与精灵图，可以防止页面多次加载小图标，造成资源浪费。防止发生一些不必要的小图片的网络请求。

通过以上处理url的loader文件中的limit可以把小于设定字节的图片转成base64格式。

5.6打包处理 js中的高级语法 

5.6.1安装babel-loader相关的包

5.6.2配置abel-loader

6、打包发布

开发时运行命令npm run dev，生成的文件在内存中

发布时运行命令npm run build，生成的文件在磁盘上

6.1配置webpack的打包发布

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

6.3把图片文件统一生成到image目录中

6.4自动清理dist目录下的旧文件

 搜索插件怎么用：clean-webpack-plugin - npm

参照文档使用第三方包或者插件：

7、Source Map

因为两个文件不是对应的，如果开发阶段出错，报错会显示错误的位置的行号（是生成文件的行号（放在内存中的那个），而不是源代码行号），行号对应不上，调试修改非常不方便，不能通过错误提示定位到源文件出错的位置。

7.1什么是Source Map

具体就是存储着源代码和打包生成的bundle.js中的对应信息

7.2解决默认Source Map的问题

7.3webpack 生产环境下的Source Map

7.3.1只定位行数不暴露源码

首推方法：既可以看到错误位于源码的第几行，可以自己去源码中进行修改，但是点击却不能跳转到源码，保护代码，提高安全性。（修改bug和安全性双管齐下）

7.3.2定位行数且暴露源码

坚决不推荐使用

7.4Source Map的最佳实践

8、拓展

8.1webpack开箱即用

8.2@目录配置

8.3vue-detools调试工具的安装

插件下载地址：Vue Devtools_6.1.4_chrome扩展插件下载_极简插件