一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第24天，点击查看活动详情。
webpack 中处理图片 - url-loader
在上篇文章中，我们试了一下，在css中用到一下背景图片，结果就报错了，难道webpack连图片也认不出来吗？
没有错，的确认不出来, 此时需要转换图片的 loader, 来处理图片的问题, 主要用到 url-loader 和 file-loader
注意: url-loader 中的部分功能要用到 file-loader, 要下载两个模块
-
下载依赖包
yarn add url-loader file-loader -D -
配置loader
图片转成 base64 字符串,
- 好处就是浏览器不用发请求了，直接可以读取
- 坏处就是如果图片太大，再转
base64就会让图片的体积增大 30% 左右, 得不偿失
所以需要通过 options 配置选项进行配置 limit, 可以设置一个临界值, 大于这个值会整个文件直接打包到目录中, 得到是路径,
如果小于这个值, 就会转成 base64, 节约请求的次数。
{
test: /\.(png|jpg|gif|jpeg)$/i,
use: [
{
loader: 'url-loader',
// 配置了limit, 超过8k, 不转,
// 不到8k, 转base64字符串
options: {
limit: 8 * 1024,
},
},
],
}
webpack 配置字体图标 - url-loader
字体图标和图片的配置一致。
// 处理字体图标的解析
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8 * 1024,
// 配置输出的文件名
name: '[name].[ext]',
// 配置静态资源的引用路径
publicPath: "../fonts/",
// 配置输出的文件目录
outputPath: "fonts/"
}
}
]
}
webpack 使用 babel 处理高版本的 js 语法
webpack 默认仅内置了 模块化的 兼容性处理 import export
babel 的介绍 => 用于处理高版本 js语法 的兼容性
- 安装包
yarn add -D babel-loader @babel/core @babel/preset-env
- 配置规则
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
webpack 开发服务器
每次修改代码, 都需要重新 yarn build 打包, 才能看到最新的效果, 且实际工作中, 打包 yarn build 非常费时 (30s - 60s) 之间。为什么费时?
- 构建依赖
- 读取对应的文件, 才能加载
- 用对应的 loader 进行处理
- 将处理完的内容, 写入到 dist 目录
可以起一个开发服务器, 在电脑内存中打包, 缓存一些已经打包过的内容, 只重新打包修改的文件, 最终运行加载在内存中。
webpack-dev-server自动刷新
- 下载
yarn add webpack-dev-server -D
- 配置scripts
scripts: {
"build": "webpack --config webpack.config.js",
"dev": "webpack serve --config webpack.config.js"
}
webpack-dev-server 的配置
devServer: {
port: 3000, // 端口号
open: true // 自动打开浏览器
}
source map 的说明
source map => 用于在浏览器中调错使用
生产环境遇到的问题
前端项目在投入生产(上线)环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，
提高文件的加载效率。此时就不可避免的产生了另一个问题：
对压缩混淆之后的代码除错（debug）是一件极其困难的事情
- 变量被替换成没有任何语义的名称
- 空行和注释被剔除
source map 介绍
Source Map 就是一个信息文件，里面储存着 位置信息。
也就是说: Source Map 文件中 存储着 压缩混淆后代码 对应的 转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。
开发环境的 source map
在mode: development开发环境下，webpack 默认启用了 Source Map 功能。
当程序运行出错时，可以直接在控制台提示错误行的位置，并定位到具体的源代码。但是, 默认的行数不对应, 加上如下配置即可解决行数不对应的问题。
module.exports = {
...,
mode: 'development',
// eval-source-map 开发模式下使用, 保证运行时的行数 和 源代码行数 一致
devtool: 'eval-source-map',
...
}
生产环境的 source map
在生产环境下，如果省略了 devtool 选项，则最终生成的文件中不包含 Source Map。
这能够防止原始代码通过 Source Map 的形式暴露给别有所图之人。 在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。 此时可以将devtool 的值设置为 nosources-source-map。
devtool: 'nosources-source-map'
