欢迎光临
我的个人博客网站

Webpack学习笔记


一、webpack

前端项目工程化的具体解决方案,打包工具

1. webpack基本使用

  1. 项目中安装:

Webpack学习笔记

#使用最新版本,可以不指定版本 npm i webpack webpack-cli -D 
  1. 配置webpack

Webpack学习笔记

  1. webpack.config.js 的作用

Webpack学习笔记

  1. 自定义打包的入口和出口

Webpack学习笔记

Webpack学习笔记

2. webpack的插件

​ 通过安装和配置第三方的插件,可以拓展webpack的能力,从而让webpack用起来

更方便。最常用的webpack插件有如下两个:

Webpack学习笔记

1. webpack-dev-server

js代码保存后,自动打包

  • 1.1 安装

Webpack学习笔记

#使用最新版本: npm i webpack-dev-server  -D 
  • 1.2 配置

Webpack学习笔记

  • 1.3 打包生成的文件

ctrl + s 后,就可自动打包

Webpack学习笔记

  • 1.4 使用

实时打包后的js文件放置在内存中,在项目根路径上,因此修改index.html中js的引入路径,/表示根目录

<!-- 使用webpack-cli-server --> <script src="/build.js"></script> 
# devServer 节点

实时处理的打包插件webpack-dev-server的配置项。

包括:打包完成是否自动打开浏览器;打包所使用的主机地址;打包所使用的端口号

Webpack学习笔记

2. html-webpack-plugin

Webpack学习笔记

  • 2.1 安装

Webpack学习笔记

  • 2.2 配置,在webpack.config.js

Webpack学习笔记

  • 2.3 解惑

Webpack学习笔记

最新版html-webpack-plugin插件是在注入在head标签里,并添加defer属性,最后加载

注意:开启实时打包后,删除dist文件夹,npm run dev,依然可以运行项目

3. clean-webpack-plugin

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

Webpack学习笔记

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的调用过程

Webpack学习笔记

3.3 打包处理css文件

Webpack学习笔记

3.4 打包处理less文件

Webpack学习笔记

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

Webpack学习笔记

limit参数:判断是否转换成base64格式的图片

Webpack学习笔记

3.6 带参数的loader的另一种配置方式

Webpack学习笔记

3.7 打包处理js文件中的高级语法

Webpack学习笔记

记:2021年8月7日,webpack最新版已可以正常打包class

Webpack学习笔记

配置:

Webpack学习笔记

4.打包发布

4.1 为什么要打包发布?

Webpack学习笔记

4.2 配置 webpack 的打包发布

Webpack学习笔记

4.3 整理dist文件夹下的文件

  • JavaScript文件统一放到 js 目录中

Webpack学习笔记

  • 图片文件统一放在image目录中

Webpack学习笔记

5. Source Map

Source Map就是一个信息文件,里面储存着位置信息。也就是说,Source Map文件中存储着代码压缩混淆前后对应关系

​ 有了它,出错的时候,除错工具将直接显示原始代码而不是转换后的代码,能够极大的方便后期的调试.

5.1 webpack开发环境下的Source Map

Webpack学习笔记

默认Source Map的问题:

报错行号不一致

解决:

  • 开发环境下:

Webpack学习笔记

5.2 webpack生产环境下的Source Map

Webpack学习笔记

如何解决报错,调试问题?

    1. 只定位行数不暴露源码
//配置webpack.config.js devtool: "nosources-source-map" 

Webpack学习笔记

    1. 定位行数暴露源码
//配置webpack.config.js devtool: "source-map" 

Webpack学习笔记

5.3 Source Map 的最佳实践

Webpack学习笔记

赞(0) 打赏
未经允许不得转载:张拓的天空 » Webpack学习笔记
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏