目录
4.1webpack-dev-server插件(实现自动更新)
4.2html-webpack-plugin插件(将src指定目录下的bundle.js复制一个到根目录)
4.3devServer插件(执行npm run dev后自动打开(内存的)浏览器)
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定位行数且暴露源码
坚决不推荐使用