- 作者：老汪软件技巧
- 发表时间：2024-10-01 15:02
- 浏览量：
图片文件
需要先在项目中使用图片，比较常见的使用图片的方式是两种：
在webpack5之前，加载这些资源需要使用一些loader，比如raw-loader、url-loader、file-loader
在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader
资源模块类型
资源模块类型是指用于处理非 JavaScript 文件（例如 CSS、图像、字体等）的一种机制
常见的资源模块类型包括以下几种：
asset/inline：
asset/source：
asset：
javascript/auto：
javascript/esm：
上面主要介绍了四种处理图片的类型，打包图片时也可以加自定义设置：
图片大小设置JS文件
开发中，想要使用ES6+的语法，想要使用TypeScript，开发React项目，这些文件的处理它们都是离不开Babel的
事实上，在开发中我们很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分，学习Babel对于我们理解代码从编写到线上的转变过程至关重要
Babel是一个工具链，主要用于旧浏览器或者环境中将ES6+``代码转换为向后兼容版本的JavaScript，包括语法转换、源代码转换等
命令行使用
babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用
如果希望在命令行尝试使用babel，需要完成如下操作：
npx babel src --out-dir dist：使用babel来处理源代码
拓展功能需要用到插件：
babel-loader
在实际开发中，通常会在构建工具中配置babel来对其进行使用的，比如在webpack中
babel-preset
如果一个个去安装使用插件，需要手动来管理大量的babel插件，可以直接给webpack提供一个preset，webpack 会根据预设来加载对应的插件列表，并且将其传递给babel
Vue文件vue-loader@vue/compiler-sfcplugin
上面打包vue我们引入了个新的知识插件，接下来学习plugin相关内容
Webpack的另一个核心是Plugin，官方有这样一段对Plugin的描述：
CleanWebpackPlugin
前面练习的过程中，每次修改了一些配置，重新打包时都需要手动删除dist文件夹，可以借助于一个插件来帮助完成就是 CleanWebpackPlugin
HtmlWebpackPlugin
我们的HTML文件是编写在根目录下的，最终打包的build文件夹中是没有index.html文件，但在进行项目部署的时，必然是需要有对应的入口文件index.html，所以也需要对index.html进行打包处理
配置wk.config.js并打包
// ./public/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,user-scalable=no"
/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %>title>
head>
<body>
<noscript>
<strong>
We're sorry but <%= webpackConfig.name %> doesn't work properly without
JavaScript enabled. Please enable it to continue.
strong>
noscript>
<div id="app">div>
body>
html>
// wk.config.js
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
filename: "index.js",
path: path.resolve(__dirname, "build"),
},
plugins: [
new VueLoaderPlugin(),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: "haahha",
template: "./public/index.html",
filename: "main.html",
minify: {
collapseWhitespace: true, // 移除空白
removeComments: true, // 移除注释
removeAttributeQuotes: true, // 移除属性的引号
},
}),
],
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset",
generator: {
filename: "image/[name].[hash:8][ext]",
},
parser: {
dataUrlCondition: {
maxSize: 100 * 1024, // 这时使用的图片没有超过这个值他就不会被打包成文件，而是转base64使用
},
},
},
{
test: /\.m?js$/,
use: [
{
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
},
},
],
},
{
test: /\.vue$/,
loader: "vue-loader",
},
],
},
};
我们配置完打包发现还是报错，因为在模块中还使用到一个BASE_URL的常量，要用到下面的插件
DefinePlugin
在模块中还使用到一个BASE_URL的常量，但是我们并没有设置过这个常量值，所以会出现没有定义的错误，这个时候可以使用DefinePlugin插件
