Webpack学习笔记

摘要

前端项目工程化的具体解决方案，打包工具​ 通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来

一、webpack

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

1. webpack基本使用

1. 项目中安装：

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

2. 配置webpack

3. webpack.config.js 的作用

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

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" 

• 2. 定位行数暴露源码

//配置webpack.config.js devtool: "source-map" 

5.3 Source Map 的最佳实践