为了演示我们项目中可以加载图片
,我们需要在项目中使用图片,比较常见的使用图片的方式是两种:
img
元素,设置src
属性;background-image
的css属性;我们当前使用的webpack版本是webpack5:
loader
,比如raw-loader 、url-loader、file-loader;资源模块类型(asset module type),通过添加 4 种新的模块类型,来替换所有这些 loader:
比如加载图片,我们可以使用下面的方式:
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource"
}
但是,如何可以自定义文件的输出路径和文件名呢?
output: {
filename: "js/bundle.js",
path: path.resolve(__dirname, "./dist"),
assetModuleFilename: "img/[name].[hash:6][ext]"
}
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
generator: {
filename: "img/[name].[hash:6][ext]"
}
}
我们这里介绍几个最常用的placeholder:
开发中我们往往是小的图片需要转换,但是大的图片直接使用图片即可
base64
之后可以和页面一起被请求,减少不必要的请求过程;我们需要两个步骤来实现:
module.exports = {
rules: [
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset",
generator: {
filename: "img/[name].[hash:6][ext]"
},
parser: {
dataUrlCondition: {
maxSize: 100 * 1024
}
}
}
]
}
事实上,在开发中我们很少直接去接触babel,但是babel对于前端开发来说,目前是不可缺少的一部分:
那么,Babel到底是什么呢?
工具链
,主要用于旧浏览器
或者环境中将ECMAScript 2015+代码转换为向后兼容版本
的JavaScript;语法转换
、源代码转换
等;babel本身可以作为一个独立的工具(和postcss一样),不和webpack等构建工具配置来单独使用。
如果我们希望在命令行尝试使用babel,需要安装如下库:
@babel/core
:babel的核心代码,必须安装;@babel/cli
:可以让我们在命令行使用babel;npm install -D @babel/core @babel/cli
使用babel来处理我们的源代码:
npx babel src --out-dir dist
比如我们需要转换箭头函数
,那么我们就可以使用箭头函数转换相关的插件
:
npm install @babel/plugin-transform-arrow-functions -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions
查看转换后的结果:我们会发现 const 并没有转成 var
npm install @babel/plugin-transform-block-scoping -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping
,@babel/plugin-transform-arrow-functions
但是如果要转换的内容过多,一个个设置是比较麻烦的,我们可以使用预设(preset):
安装@babel/preset-env预设:
npm install -D @babel/preset-env
执行如下命令:
npx babel src --out-dir dist --presets=@babel/preset-env
在实际开发中,我们通常会在构建工具
中通过配置babel来对其进行使用
的,比如在webpack中。
那么我们就需要去安装相关的依赖:
@babel/core
,那么这里不需要再次安装;npm install babel-loader -D
我们可以设置一个规则,在加载js文件时,使用我们的babel:
module.exports = {
module: {
rules: [
{
test: /\.m?js$/,
use: {
loader: "babel-loader"
}
}
]
}
}
如果我们一个个去安装使用插件,那么需要手动来管理大量的babel插件,我们可以直接给webpack提供一个preset,webpack会根据我们的预设
来加载对应的插件列表,并且将其传递给babel。
比如常见的预设有三个:
安装preset-env:
npm install @babel/preset-env
module.exports = {
module: {
rules: [
{
test: /\.m?js$/,
use: {
loader: "babel-loader",
options: {
presets: [
["@babel/preset-env"]
]
}
}
}
]
}
}
在开发中我们会编写Vue相关的代码,webpack可以对Vue代码进行解析:
<template>
<h2>{{ title }}h2>
template>
<script>
export default {
data() {
return {
title: "我是标题"
}
}
}
script>
我们对代码打包会报错:我们需要合适的Loader来处理文件。
这个时候我们需要使用vue-loader:
npm install vue-loader -D
在webpack的模板规则中进行配置:
{
test: /\.vue$/,
loader: "vue-loader"
}
打包依然会报错,这是因为我们必须添加@vue/compiler-sfc来对template进行解析:
npm install @vue/compiler-sfc -D
另外我们需要配置对应的Vue插件:
const { VueLoaderPlugin } = require('vue-loader/dist/index')
module.exports = {
module: {},
plugins: [
new VueLoaderPlugin()
]
}
重新打包即可支持App.vue的写法
另外,我们也可以编写其他的.vue文件来编写自己的组件;
resolve用于设置模块如何被解析
:
模块依赖
,这些模块可能来自于自己编写的代码,也可能来自第三方库;require/import
语句中,找到需要引入到合适的模块代码;enhanced-resolve
来解析文件路径;webpack能解析三种文件路径:
绝对路径
相对路径
上下文目录
;模块路径
别名
的方式来替换初识模块路径,具体后面讲解alias的配置;如果是一个文件:
如果是一个文件夹:
extensions是解析到文件时自动添加扩展名
:
另一个非常好用的功能是配置别名alias:
别名
;module.exports = {
resolve: {
extensions: [".js", ".json", ".vue", ".jsx", ".ts", ".tsx"],
alias: {
utils: path.resolve(__dirname, "./src/utils")
}
},
}