Vue3基础之Webpack
Vue3基础之Webpack
Webpack是一个模块化打包工具，可以将互相依赖的HTML、CSS、Js或是图片字体等经过一些列处理，打包成静态的前端项目
可以将项目中的所有模块打包成一个或多个包，只在需要时进行加载，支持热模块替换，可以压缩打包后的代码，在开发过程中，当发生代码变化时，可以实时更新浏览器中的模块，拥有广泛的插件生态系统
首先，在需要使用webpack的文件夹下
npm init -y 初始化
npm add webpack-cli –dev 安装到开发者环境中
使用npx webpack打包
webpack配置
在根目录下创建一个webpack.config.js文件
进行配置
const path = require(“path”);
module.exports = {
mode: “development”,
entry: “./src/index.js”,
output: {
filename: “dist.js”,
path: path.resolve(__dirname,“dist”),
}
}
mode为开发者模式
entry选择与config文件的src目录中下index.js作为入口文件
output为配置输出名字
打包css文件与图片
需要安装
npm add –dev style-loader css-loader
自动生成html文件
npm add html-webpack-plugin –dev
兼容低版本浏览器
npm add –dev babel-loader @babel/core @babel/preset-env
压缩打包之后的js代码
npm add –dev terser-webpack-plugin
无需命令自动打包
npm add –dev webpack-dev-server
还需要再package.json中添加
“scripts”: {
“start”: “webpack serve –open”
},
避免浏览器缓存js文件，我们可以给生成的文件修改文件名
配置可视化打包工具
npm add –dev webpack-bundle-analyzer
出现的文件分析图为
整体的配置文件webpack.config.js为
const path = require(“path”);
const HtmlWebpackPlugin = require(“html-webpack-plugin”);
const TerserPlugin = require(“terser-webpack-plugin”); // 修正了这里，原名为 TerserPlugon，应为 TerserPlugin
const { Static } = require(“vue”); // 这一行在这里没有被使用，可以移除
const BundleAnalyzerPlugin = require(“webpack-bundle-analyzer”); // 修正了这里，原名为 BundelAnalyzerPlugin
module.exports = {
// 指定构建模式为 development（开发模式），这会影响资源的优化和压缩等
mode: “development”,
// 指定应用的入口文件
entry: ‘./src/index.js’,
// 配置 source map，这里使用的是 inline-source-map，源代码和 source map 会在同一个文件中
devtool: “inline-source-map”,
// 输出配置
output: {
// 输出文件的名称，[name] 是占位符，代表 entry 中的名称，[contenthash] 是文件内容的哈希值
filename: ‘[name].[contenthash].js’,
// 输出文件的目录
path: path.resolve(__dirname, “dist”)
},
// 优化配置
optimization: {
// 是否启用压缩
minimize: true,
// 压缩器配置，这里使用了 TerserPlugin 来压缩 JavaScript 文件
minimizer: [new TerserPlugin()]
},
// 开发服务器配置
devServer: {
// 静态资源服务路径
static: ‘./dist’
},
// 解析配置
resolve: {
// 设置别名，这里为 ‘utils’ 设置了一个别名，指向 src/utils 目录
alias: {
utils: path.resolve(__dirname, “src/utils”)
}
},
// 模块配置
module: {
// 模块规则，用于处理不同文件类型的加载器
rules: [
// 处理 CSS 文件的规则
{
test: /css$/i,
use: [“style-loader”, “css-loader”]
},
// 处理图片文件的规则
{
test: /(png|svg|jpg|jpeg|gif)$/i,
type: “asset/resource”
},
// 处理 JavaScript 文件的规则
{
test: /js$/,
exclude: /node_modules/, // 排除 node_modules 目录
use: {
loader: “babel-loader”,
options: {
presets: ["@babel/preset-env"] // Babel 预设，用于转译 ES6+ 代码为 ES5
}
}
}
]
},
// 插件配置
plugins: [
// HtmlWebpackPlugin 插件，用于自动生成 HTML 文件
new HtmlWebpackPlugin({
title: “博客列表”
}),
// BundleAnalyzerPlugin 插件，用于分析打包后的文件大小和依赖关系
new BundleAnalyzerPlugin.BundleAnalyzerPlugin()
]
};
之后，项目就能正确运行或是部署在服务器中
Loader
sytle-loader将css文件处理之后插入到HEAD中
css-loader将css处理为webpack能处理的类型
sass-loader、less-loader将sass与less转化为css
file-loader打包图片与文字
Plugin
HtmlWebpackPlugin 自动创建html5文件，将打包之后的js注入进去
TerserPlugin，压缩js代码
BundleAnalyzerPlugin 提供可视化的文件大小与依赖的界面