Webpack学习笔记
一、webpack
前端项目工程化的具体解决方案,打包工具
1. webpack
基本使用
- 项目中安装:
#使用最新版本,可以不指定版本
npm i webpack webpack-cli -D
- 配置webpack
- webpack.config.js 的作用
- 自定义打包的入口和出口
2. webpack
的插件
通过安装和配置第三方的插件,可以拓展webpack的能力,从而让webpack用起来
更方便。最常用的webpack插件有如下两个:
1. webpack-dev-server
js代码保存后,自动打包
- 1.1 安装
#使用最新版本:
npm i webpack-dev-server -D
- 1.2 配置
- 1.3 打包生成的文件
ctrl
+s
后,就可自动打包
- 1.4 使用
实时打包后的js文件放置在内存中,在项目根路径上,因此修改index.html中js的引入路径,
/
表示根目录
<!-- 使用webpack-cli-server -->
<script src="/build.js"></script>
# devServer 节点
实时处理的打包插件
webpack-dev-server
的配置项。包括:打包完成是否自动打开浏览器;打包所使用的主机地址;打包所使用的端口号
2. html-webpack-plugin
- 2.1 安装
- 2.2 配置,在webpack.config.js
- 2.3 解惑
最新版html-webpack-plugin
插件是在注入在head
标签里,并添加defer
属性,最后加载
注意:开启实时打包后,删除
dist
文件夹,npm run dev
,依然可以运行项目
3. clean-webpack-plugin
自动清理dist目录下的旧文件
3. webpack中的loader
3.1 loader概述
在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块。其他
非.js后缀名结尾的模块,webpack 默认处理不了,需要调用loader加载器才可
以正常打包,否则会报错!
loader 加载器的作用:协助webpack打包处理特定的文件模块。比如:
css-loader
可以打包处理.css相关的文件less-loader
可以打包处理.less相关的文件babel-loader
可以打包处理webpack无法处理的高级JS语法
3.2 loader的调用过程
3.3 打包处理css
文件
3.4 打包处理less
文件
3.5 打包处理样式表中与url路径相关的文件
limit参数:判断是否转换成base64格式的图片
3.6 带参数的loader的另一种配置方式
3.7 打包处理js文件中的高级语法
记:2021年8月7日,webpack最新版已可以正常打包class
配置:
4.打包发布
4.1 为什么要打包发布?
4.2 配置 webpack 的打包发布
4.3 整理dist文件夹下的文件
- JavaScript文件统一放到 js 目录中
- 图片文件统一放在image目录中
5. Source Map
Source Map就是一个信息文件,里面储存着位置信息。也就是说,Source Map文件中存储着代码压缩混淆前后的对应关系。
有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码,能够极大的方便后期的调试.
5.1 webpack开发环境下的Source Map
默认Source Map的问题:
报错行号不一致
解决:
- 开发环境下:
5.2 webpack生产环境下的Source Map
如何解决报错,调试问题?
-
- 只定位行数不暴露源码
//配置webpack.config.js
devtool: "nosources-source-map"
-
- 定位行数暴露源码
//配置webpack.config.js
devtool: "source-map"