webpack 学习笔记
文章目录
什么是webpack？
- 概念：webpack 是前端项目工程化的具体解决方案。
- 主要功能：webpack 提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。
- 好处：可以让程序员把工作重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
- 注：目前Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的。
webpack 使用（问题引出）
搭建小型案例：
- 新建项目空白目录，并运行npm init -y命令，初始化包管理配置文件 package.json
- 新建src源代码目录
- 新建src -> index.html首页和src -> index.js脚本文件
- index.html文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./index.js"></script> </head> <body> <ul> <li>这是第 1 个li</li> <li>这是第 2 个li</li> <li>这是第 3 个li</li> <li>这是第 4 个li</li> <li>这是第 5 个li</li> <li>这是第 6 个li</li> <li>这是第 7 个li</li> <li>这是第 8 个li</li> <li>这是第 9 个li</li> </ul> </body> </html>- index.js文件：
// 使用ES6 导入语法 import $ from 'jquery' $(function () { $('li:odd').css('background-color', 'red') $('li:even').css('background-color', 'pink') }) - 初始化首页基本的结构
- 运行npm install jquery -s命令，安装jQuery
- 通过ES6模块化的方式导入jQuery，实现列表隔行变色效果
运行页面发现浏览器报错：Uncaught SyntaxError: Cannot use import statement outside a module
这是常见的浏览器无法很好的支持ES6高级语法所导致的，可以使用webpack来解决这类问题
webpack的安装和配置
- 安装webpack 相关的两个包：npm i webpack@5.42.1 webpack-cli@4.7.2 -D
- 在项目中配置 webpack：
- 在项目根目录中，创建名为webpack.config.js 的webpack 配置文件，并初始化如下的基本配置：
// 使用Node 中的导出语法，向外导出一个webpack 的配置对象 module.exports = { // 代表webpack 运行的模式 // 可选值有两个 development(开发阶段) 和 production(产品阶段) mode: 'development' }- 在package.json 的scripts 节点下，新增 dev脚本如下：
"scripts": { "dev": "webpack" },- 在终端中运行，启动webpack进行项目的打包构建：npm run dev. (scripts下的脚本都可以通过npm run来执行)
当我们启动项目的打包构建后，根目录下就会出现一个dist文件夹，其中包含了一个main.js 文件；main.js 就是根据我们自己写的index.js从而来进行构建的。
可以在index.html中将引入的index.js 替换成main.js，所需要的效果就能成功展示了。
在上面的情况下打包的项目是未进行压缩的版本，如果要使得项目继续压缩，可以将配置文件中的 development 改为 production。
webpack中的默认约定
- 默认的打包入口文件为：src -> index.js
- 默认的输出文件路径为：dist -> main.js
- 注意： 可以在webpack.config.js中修改打包的默认约定
// entry: '指定要处理哪个文件' entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径 output: { path: path.join(__dirname, './dist'), // 输出文化的存放路径 filename: 'first.js', // 输出文件的名称 },
使用webpack插件
通过安装和配置第三方的插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件有如下两个:
- webpack-dev-server
- 类似于node.js 阶段用到的nodemon工具
- 每当修改了源代码，webpack会自动进行项目的打包和构建
- 安装后，需要将package.json中的脚本改为 -> “dev”: “webpack serve”
- html-webpack-plugin
- webpack 中的 HTML插件（类似于一个模板引擎插件)
- 可以通过此插件自定制index.html页面的内容
- 在webpack.config.js文件中进行如下配置：
// 导入html-webpack-plugin插件，得到插件的构造函数 const HtmlPlugin = require('html-webpack-plugin'); // 创建插件的实例对象 const htmlPlugin = new HtmlPlugin({ template: './src/index.html', // 指定要复制哪个页面 filename: './index.html', // 指定复制出来的文件名和存放路径 }); // 挂载插件 plugins: [htmlPlugin], - 拓展①：通过HTML插件复制了项目根目录中的index.html页面，并且将复制的文件也被放到了内存中
- 拓展②：HTML插件在生成的index.html页面，自动注入了打包的first.js文件
webpack配置中的devServer 节点
在webpack.config.js配置文件中，可以通过devServer节点对 webpack-dev-server插件进行更多的配置，如:
devServer: {
open: true, // 首次打包成功后，自动打开浏览器
port:8080, // 定义端口号
host: '127.0.0.1', // 指定运行的主机地址
}
注意:凡是修改了webpack.config.js配置文件，或修改了package.json配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效!
webpack中的loader
提要：在webpack中一切皆模块，都可以通过ES6 的导入语法进行导入和使用
打包处理CSS文件
解决问题：当我们拥有一个CSS文件后，尝试在js文件中使用ES6语法导入，然后使用webpack进行打包，此时会报一个错误：
Module parse failed: Unexpected token (1:2)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
由错误提示可知，我们需要一个合适的loader来处理CSS文件：
- 运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理css 文件的loader
- 在 webpack.config.js 的 moudule->rules 数组中，添加如下的loader规则：
module: { // 所有第三方文件模块的匹配规则 rules: [ // 文件后缀名的匹配规则 { test: /\.css$/, use: ['style-loader', 'css-loader']} ] }, - 其中 test表示匹配的文件类型，use 表示对应要调用的loader
- 注意：
- use 数组中指定的loader顺序是固定的
- 多个loader的调用顺序是从后往前调用的
下列代码配合以上的配置的工作流程解析：
- webpack 默认只能打包处理.js结尾的文件，处理不了其它后缀的文件
- 由于代码中包含了index.css这个文件，因此 webpack 默认是无法进行处理的
- 当webpack发现某个文件处理不了的时候，会查找webpack.config.js 这个配置文件，并检查module.rules数组中，是否配置了对应的loader 加载器
- webpack 把 index.css这个文件，先转交给最后一个loader进行处理(即交给css-loader)
- 当css-loader处理完毕之后，会把处理的结果，转交给下一个loader进行处理(转交给style-loader)
- 当style-loader处理完毕之后，发现没有下一个loader了，于是就把处理的结果，转交给了webpack
- webpack 把 style-loader处理的结果，合并到/dist/first.js(配置的文件名)文件中，最终生成打包好的文件
打包处理Less文件
- 运行 npm i less-loader@10.0.1 less@4.1.1 -D 命令安装对应处理less文件的loader
- 同css对module.rules数组进行配置:
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
打包处理样式表中与url路径相关的文件
拓展知识：
图片在html文件中有两种引入方式：base64 和 路径引用。但是这两种引入方式中更推荐使用base64的引入方式。
原因：采用路径引用，当浏览器加载html文件时是不会直接加载图片的，而是需要再次通过请求的方式来获取图片；而使用base64就可以减少这种浏览器不必要的请求。
但是base64有一个很大的缺点，当一张图片转换成base64时，它所占用的存储空间会增加。
注：小图片，logo都可以转成base64进行处理，而大图片就不适合了。
问题引出：
当我们使用 import logo from ‘./images/logo.png’ 导入图片文件，然后给 html 中的 img 标签动态赋值，此时webpack 打包将会报错，可是使用如下方法解决。
- 运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 安装处理url 路径相关的loader
- 同之前，我们还需要对module.rules数组进行配置:
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, - 其中 ? 之后是 loader 的参数项：
- limit：用来指定图片的大小，单位是字节（byte）
- 只有 ≤ limit大小的图片，才会被转为 base64格式的图片
打包处理JS文件中的高级语法
webpack 只能打包处理一部分高级的JavaScript 语法。对于那些webpack 无法处理的高级js语法，需要借助于babel-loader进行打包处理。例如 webpack无法处理下面的JavaScript 代码:
function info(target){
target.info = 'Person info'
}
@info
class Person {}
console.log(Person.info)
在当前的浏览器或Node.js版本中，尚不支持装饰器，因此我们使用Babel插件@babel/plugin-proposal-decorators来将它转换为浏览器或Node.js中可识别的代码。
- 运行如下的命令安装对应的依赖包:npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
- 在webpack.config.js的module -> rules数组中，添加 loader 规则如下:
// 注意：必须使用 exclude 指定排除项；因为 node_modules 目录下的第三方包不需要打包 { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}, - 在项目根目录下，创建名为babel.config.js 的配置文件，定义Babel的配置项如下:
module.exports = { "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], // "@babel/plugin-proposal-class-properties" ] } - 参考Babel 的官网https://babeljs.io/docs/en/babel-plugin-proposal-decorators
打包发布
- 项目开发完成之后，需要使用webpack对项目进行打包发布，主要原因有以下两点:
- 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件
- 开发环境下，打包生成的文件不会进行代码压缩和性能优化
- 为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。
配置 webpack 的打包发布
在 package.json 文件的 scripts 节点下，新增 build 的命令如下；
"scripts": {
"dev": "webpack serve",
"build": "webpack --mode production"
},
–model是一个参数项，用来指定webpack的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。
注意: 通过–model指定的参数项，会覆盖webpack.config.js 中的model选项。
把图片文件统一放到 image 目录中
修改 webpack.config.js 中的配置项，如下：
{ test: /\.jpg|png|gif$/, use: {
loader: 'url-loader',
options:{
limit: 22229,
outputPath: 'image',
},
},
},
或者：
{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images'},
自动清理 dist 目录下的旧文件
为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件：
- 安装插件：npm i clean-webpack-plugin@3.0.0 -D
- 在 webpack.config,js 文件中导入插件，得到插件的构造函数后，创建插件的实例对象：
const { CleanWebpackPlugin } = require('clean-webpack-plugin') - 将实例对象挂载到 plugins 节点中：
plugins: [htmlPlugin, new CleanWebpackPlugin()],
Source Map
- 当我们的项目打包后运行，可能会遗留一些错误，此时利用浏览器进行检查，浏览器所指出的错误行号与本地代码文件的行号往往对应不上，因此为了调试、查错和修改代码的便利性，就有必要用到Source Map的一些配置。
- Source Map就是一个信息文件，里面储存着位置信息。也就是说，Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置。
- 有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。
默认Source Map的问题即解决
-
问题：开发环境下默认生成的Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。
-
解决：开发环境下，推荐在webpack.config.js中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致:
// eval-source-map仅限在"开发模式"下使用，不建议在“生产模式”下使用。 // 此选项生成的 Source Map 能够保证"运行时报错的行数"与"源代码的行数"保持一致 devtool: 'eval-source-map', -
问题：在生产环境下，有的时候我们如果只想定位报错的具体行数，且不想暴露源码。
-
解决：此时可以将 devtool 的值设置成 nosources-source-map
-
实际结果：
点开链接：
此时虽然定位到了错误位置，但是会将源码给暴露，修改devtool后，再次运行：
总结
- 开发环境下:
- 建议把 devtool的值设置为eval-source-map
- 好处:可以精准定位到具体的错误行
- 生产环境下:
- 建议关闭Source Map或将devtool的值设置为nosources-source-map
- 好处:防止源码泄露，提高网站的安全性
参考
B站黑马程序员视频教程：https://www.bilibili.com/video/BV1zq4y1p7ga?p=31&spm_id_from=pageDriver
909
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
