本文详细介绍了webpack的使用，包括webpack的基本概念、环境准备、实操步骤、打包图标字体文件的方法，以及解决兼容问题的方案。内容涵盖设置入口出口、使用html-webpack-plugin插件、配置css与less加载器、处理图片资源、降级js语法等，还提到了webpack-dev-server在开发过程中的自动更新功能。
webpack是什么？
webpack本质是一个第三方的模块包，用于分析，并打包代码。
支持所有类型的文件包
支持less/sass转换成css
支持ES6/7/8降级为ES5；(为什么降级？是为了更好的兼容)
压缩代码，提高加载速度
webpack模块包下载时由package.json来承载
webpack打包时环境准备:
初始化包环境：yarn init
下载依赖包:yarn add webpack webpack-cli -D (解析:-D的意思是把包的版本记录到开发环境里面)
配置package.json(自定义命令)
"scripts":{
"build":"webpack"
}
实操：
1，新建一个文件夹(day1-webpack)-再建一个文件夹(01-webpack基础篇)
环境准备好啦就可以开始下载webpack的包
webpack打包的基本使用：
打包案例一：先建两个文件夹和两个js文件，add.js导出，index.js导入，yarn build打包，自动生成dist文件夹，main.js文件
修改webpack打包的入口和出口：
https://webpack.docschina.org/concepts/#entry
下载jquery文件:yarn add jquery;
创建一个public文件夹+index.html文件：
最后将创建好的index.html文件引入在main.js文件中，给它们创建联系。
运行index.html有两种方法：1，手动运行，将index.html放入dist中；2，用插件来运行indext.html文件。重点来说说用插件运行html文件
下载html插件：yarn add html-webpack-plugin -D
下载css-loader,style-loader加载器：
css-loader：用来处理css文件,像js解析
style-loader：把 CSS 插入到 DOM 中
首先在src中创建css文件夹并且还有index.css文件
再到main.js文件中引入index.css文件：import './css/index.css'
下载加载器：yarn add css-loader style-loader -D
再到webpack.config.js中进行配置，上面有辅助文档有配置文件，搜索：css-loader
配置结束就可以yarn build打包，在dist文件夹中的index.html进行网页的访问
下载less加载器：
less提供了可编程的css，可以提高css代码的可维护性和可读性；
- 定义变量并多次使用
- mixins（一个样式中包含另一个样式）
- @import （可以将样式拆分到不同的文件中，形成组件）
首先在src中创建less文件夹并且还有index.less文件
再到main.js中引入index.less文件:import './less/index.less' //照顾less
下载less加载器：yarn add less less-loader -D
再到webpack.config.js中进行配置，上面有辅助文档有配置文件，搜索：less-loader
配置结束就可以yarn build打包，在dist文件夹中的index.html进行网页的访问
打包图片：
首先在src里面创建一个叫assets的文件夹，里面放需要的图片
再到index.less中设置body图片：
再到main.js中去引入图片
解析上图中新单词：
document.body 代表的当前文档的body对象
document.documentElement 代表的是当前的完整文档
appendchild在指定元素节点的最后一个子节点之后添加节点。基本语法 appendChild（node）;参数: node是必须要追加的节点
createElement ()创建多个元素
最后到webpack.config.js中进行配置：上面有辅助文档有配置文件，搜索：资源模块
一切准备就绪，就可以yarn build的运行啦
提问：
为什么两张图片的地址不一样？
因为：跟webpack.config.js中的type：asset设置有关
如果设置的是asset模式，以8KB大小区分图片文件
小于8KB的，把图片文件转换成base64，打包进js里
大于8KB的，直接把图片文件输出到dist下
图片转成base64打包进js中的好处和坏处是什么啦？
好处：减少浏览器的发送请求次数，读取图片速度
坏处：图片过大，转base64占空间会多30%左右
注：打包图片不需要下载，因为已经有下载包啦：webpack5就是下载包
打包图标字体文件：
首先在src-assets里面创建一个叫fonts的文件夹，里面放需要的图表文字+.css文件
放完文件后需要在main.js中引入：
最后到webpack.config.js中进行配置:上面有辅助文档有配置文件，搜索：资源模块
配置成功就可以yarn build打包
兼容问题解决方案：
webpack对js语法降级
babel官网插件：http://www.babeljs.cn (一个javascript编译器，把高版本js语法降级处理输出兼容的低版本语法)
babel loader:上面辅助文档有,在搜索栏输入babel loader即可
babel loader此 package 允许你使用 Babel 和 webpack 转译 JavaScript 文件(可以让webpack转译打包js代码，loader是个加载器)
步骤：
1，在src/main.js-定义箭头函数，并打印箭头函数(千万不要调用，为了让webpack打包函数，看降级效果)
解析：什么叫箭头函数？ES6新增了使用箭头语法定义语法函数表达式的能力
箭头函数用法：
箭头函数适合嵌入函数；
箭头函数如果只有一个参数，可以省略括号；(箭头函数也可以省略花括号，但这样会改变函数的行为，使用花括号就跟常规函数一样，可以在函数体内写入多条语句，如果不带花括号，那么就说明箭头后面只有一条语句，且隐式返回这条语句的值)
箭头函数如果有多个参数，中间用逗号隔开；
如果没有参数，则圆括号必须加上；
箭头函数不能用arguments、super和target，也不能用作构造函数，箭头函数也没有prototype属性
2，下载加载器：yarn add babel-loader @babel/core @babel/preset-env -D
3,配置到webpack.config.js上：
打包结果：
前面都是如何下载加载器和应用，每次一边写代码就需要从新打包，这样太麻烦。如何才可以解决这个问题啦？那就是webpack-dev-server模块
下载模板包：yarn add webpack-dev-server -D
自定义webpack 开发服务器启动命令server-在package.json里
启动当前工程里面的webpack开发服务器：yarn serve
重新撰写代码，它会自动更新打包
启动时遇到如下问题：
解决方案是：
1，在package.json文件里面添加如下代码：
2，在webpack.config.js中添加如下代码：
修改端口，需要在webpack.config.js中添加如下代码：
module.exports = { //...
devServer: {
port: 8080, //修改端口的重点，如：port: 3000，
},
};
添加完之后记得重启，yarn serve
如上有错误请及时反馈，谢谢预览！
扫一扫
619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
