Webpack学习笔记

一、webpack

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

1. webpack基本使用

  1. 项目中安装:

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

  1. webpack.config.js 的作用

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

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

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

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

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

5.3 Source Map 的最佳实践


人生人山人海人来人往,自己自尊自爱自由自在。

本文来自博客园,作者:青柠i,转载请注明原文链接:https://www.cnblogs.com/fuct/p/15136334.html

posted @ 2021-08-13 10:57  青柠i  阅读(46)  评论(0编辑  收藏  举报