SQL-Serverwebpack介绍 - Powered by Discuz! Archiver

老婆出轨 发表于 2025-3-12 11:04:42

webpack介绍

entry与output

入口是 Webpack 开始构建依赖图的出发点，Webpack 会从入口文件开始，递归地分析项目标依赖图。输出指定 Webpack 打包后的文件存放位置和文件名。
const path = require("path");

module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
};
依赖图如下所示：
https://i-blog.csdnimg.cn/direct/d87c2e61271f45bd858163ba67f73905.png
loader

Webpack 支持使用 loader 对文件举行预处理。这允许你bundle JavaScript 之外的任何静态资源。
css-loader与style-loader

css-loader 是 Webpack 中的一个加载器（loader），它允许你在 JavaScript 中直接导入 CSS 文件，并将这些 CSS 文件打包到最终的 bundle 中。这种方式与传统的通过 <link> 标签在 HTML 中引入 CSS 文件的方式不同。
实行结构如下：
https://i-blog.csdnimg.cn/direct/cc8a8507b52845cb9cefdee1eed79396.png
如果只是单纯的在index.js中引入style.css：
#header {
color: blue;
}

.button {
background-color: yellow;
}
import _ from "lodash";
import "./style.css";

document.getElementById("button1").addEventListener("click", function () {
const el = document.getElementById("header");
el.innerHTML = "Hey i have updated the code !";

const listItems = ["Apple", "orange", "Banana"];
const ul = document.getElementById("shoppingList");
_.forEach(listItems, function (item) {
const tempEl = document.createElement("li");
tempEl.innerHTML = item;
ul.appendChild(tempEl);
});
});
会报错如下：
https://i-blog.csdnimg.cn/direct/e4a3f6319b1a477f9ca1834e3df25baa.png
起首下载npm install --save-dev css-loader style-loader，而且在webpack.config.js中举行设置:
const path = require("path");

module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
   {
   test: /\.css$/,
   use: ["css-loader"， "style-loader"],
   },
],
},
};
module 是一个关键设置项，用于定义如那边理项目中不同范例的模块（如 JavaScript、CSS、图片、字体等），其中rules可以设置多种资源的loader，test匹配文件名，use调用对应loader。
为了匹配文件名使用正则表达式，其中/正表示则表达式的开始和结束符号，\. 表示匹配字符 .（因为 . 在正则中有特别含义，所以必要用 \ 转义），css表示匹配字符串 css，$表示匹配字符串的末端。）
成功bundle如下：
https://i-blog.csdnimg.cn/direct/c2f0650a141c422dbe7bd90f3d97a162.png
webpack会隐式插入：
https://i-blog.csdnimg.cn/direct/234626daed6548fa8ed5a4a7f041589a.png
但以上内容还存在题目
我们接着引入clearButton.js与clearButton.css，如下：
import "./clearButton.css";

const el = document.createElement("button");
el.innerHTML = "Clear";
el.classList.add("button");
el.onclick = function () {
alert("Clear clicked");
};

document.body.appendChild(el);
.button {
background-color: red;
}
index.js与index.html如下：
import _ from "lodash";
import "./style.css";
import "./clearButton";

document.getElementById("button1").addEventListener("click", function () {
console.log("-----------");
const el = document.getElementById("header");
el.innerHTML = "Hey i have updated the code !";

const listItems = ["Apple", "orange", "Banana"];
const ul = document.getElementById("shoppingList");
_.forEach(listItems, function (item) {
const tempEl = document.createElement("li");
tempEl.innerHTML = item;
ul.appendChild(tempEl);
});
});
<!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>
</head>
<body>
<h1 id="header">Hey this is my first webpack application !!</h1>
<ul id="shoppingList"></ul>
<button id="button1" class="button">Click me</button>
</body>
<script src="/dist/bundle.js"></script>
</html>
会存在以下题目
https://i-blog.csdnimg.cn/direct/d1376629c4054772a9956f780ac56ac8.pnghttps://i-blog.csdnimg.cn/direct/787e725745e94a49a322d440c1b61aa7.png
后面.button覆盖了前面的！
要解决这个题目修改webpack.config.js, 在 css-loader 中启用了 modules: true，这会将 CSS 文件中的类名局部化。如下：
const path = require("path");

module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
module: {
rules: [
   {
   test: /\.css$/,
   use: [
      { loader: "style-loader" },
      { loader: "css-loader", options: { modules: true } },
   ],
   },
],
},
};
如此类名将会发生变革
https://i-blog.csdnimg.cn/direct/130d50858f944aa080fe7a8ef6363f91.png但是如许仍然存在题目——直接import "xxx".css将会找不到类名。
必要用这种方式导入css，
import { button } from "./index.css";
import { button } from "./clearButton.css";
而且以此种方式对元素举行添加。
btn1.classList.add();
el.classList.add();
另外，还能将css类名定义为全局类名，保持其原有的名称。
:global(.button) {
background: yellow;
}
img-loader

webpack.config.js中设置如下，在 Webpack 中，type: "asset/resource" 是一种用于处理静态资源（如图片、字体等）的设置方式。如下所示：
https://i-blog.csdnimg.cn/direct/88535a8607084e999a7c2f8da0b8f6a8.png
const path = require("path");

module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
assetModuleFilename: "images/",
clean: true,
},
module: {
rules: [
   {
   test: /\.(css)$/,
   use: [
      { loader: "style-loader" },
      { loader: "css-loader", options: { modules: true } },
   ],
   },
   {
   test: /.(png|jpeg|gif|svg)$/,
   type: "asset/resource",
   },
],
},
};
图片生成如下：
https://i-blog.csdnimg.cn/direct/11f52cb99aa04d5fbb8eaaf0b87eb9ca.png
在代码中，导入这些文件时会返回文件的 URL。
import logo from "./assets/webpack_logo.png";
logoEl.src = logo;
https://i-blog.csdnimg.cn/direct/9b78a79c1c3c4dffbddf79171a5a6a96.png
补充：

1.assetModuleFilename：资源文件输出路径

[*] 作用
全局定义通过资源模块（Asset Modules）处理的文件（如图片、字体、视频等）的输出路径和文件名格式。
[*] 设置位置
位于 output 设置对象中。
[*] 路径格式说明

[*] : 文件内容的哈希值（制止缓存题目）
[*] : 原始文件扩展名（如 .png）

2.clean：清算输出目录

[*] 作用
在每次构建前自动清算 output.path 目录（默认是 dist），删除旧文件，制止残留文件干扰。
[*] 设置位置
直接作为顶级设置项。
font-loader

webpack.config.js设置如下：
const path = require("path");

module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
assetModuleFilename: "images/",
clean: true,
},
module: {
rules: [
   {
   test: /\.(css)$/,
   use: [
      { loader: "style-loader" },
      { loader: "css-loader", options: { modules: true } },
   ],
   },
   {
   test: /.(png|jpeg|gif|svg)$/,
   type: "asset/resource",
   },
   {
   test: /.(ttf|woff|woff2)$/,
   type: "asset/resource",
   },
],
},
};
其中字体文件可以放置于asset/font目录下
https://i-blog.csdnimg.cn/direct/ec8655e3de604f1ab43244b2819770c0.png
引入字体文件
import "./assets/fonts/Redressed-Regular.ttf";
如许就可以使用该字体了
.header {
text-decoration: underline;
color: blue;
font-family: 'Redressed', cursive;
} 其余loader可在官网查看！
plugin

multiple entry

在 Webpack 中，多入口允许你定义多个入口文件，Webpack 会分别处理这些入口，并为每个入口生成独立的打包文件。
module.exports = {
entry: {
index: "./src/index.js",
product: "./src/products.js",
},
output: {
filename: ".bundle.js",
path: path.resolve(__dirname, "dist"),
},
} 1. 多入口 (entry 对象)

[*] 作用：允许将代码拆分为多个独立的入口文件，每个入口生成一个独立的依赖关系图和打包结果。
[*] 适用场景：

[*] 多页面应用（MPA）：每个页面有独立的入口和资源。
[*] 按功能拆分代码：如管理背景和用户端分离。

2. 输出占位符

[*] 动态替换：会被替换为入口对象的键名（如 index 和 product）。
[*] 生成的文件：

[*] dist/index.bundle.js
[*] dist/product.bundle.js

https://i-blog.csdnimg.cn/direct/c964b5de864946a1a34e0996d797412e.png
有题目：现在还需再html中手动链接bundle.js：
https://i-blog.csdnimg.cn/direct/171307665d8647a192f32df43794e571.png
https://i-blog.csdnimg.cn/direct/addd213385c245d6b6ae9ad298d1f555.png
Plugin有什么作用

增强webpack
https://i-blog.csdnimg.cn/direct/930397650a9d4f7b8977cc8e23b5c845.png
HTML WebpackPlugin

HtmlWebpackPlugin 是 Webpack 生态中一个核心插件，用于自动化生成 HTML 文件并自动注入打包后的 JavaScript/CSS 资源路径。
核心功能

[*] 自动生成 HTML 文件
基于模板（或默认模板）生成 HTML，自动插入 <script> 和 <link> 标签。
[*] 多入口适配
为每个入口生成独立的 HTML 文件，并精准注入对应的资源。
[*] 资源路径管理
自动处理带哈希的文件名（如 bundle..js），制止缓存题目。
[*] HTML 优化
支持压缩 HTML、移除注释、排序属性等优化操纵。
根本用法

先下载插件
npm install --save-dev html-webpack-plugin 引入插件
const htmlWebpackPlugin = require("html-webpack-plugin");

基本设置

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
new HtmlWebpackPlugin()
]
}; 高级设置

多页面应用
module.exports = {
entry: {
index: './src/index.js',
product: './src/product.js'
},
plugins: [
// 首页
new HtmlWebpackPlugin({
   template: './src/index.html',
   filename: 'index.html',
   chunks: ['index']// 只注入 index 入口的 JS
}),
// 商品页
new HtmlWebpackPlugin({
   template: './src/product.html',
   filename: 'product.html',
   chunks: ['product']// 只注入 product 入口的 JS
})
]
};

[*]template: 用于指定生成 HTML 文件的模板
[*]chunks: 用于控制哪些 chunk 会被注入到生成的 HTML 文件中。
[*]filename: 指定生成的 HTML 文件名。
产物如下所示：
https://i-blog.csdnimg.cn/direct/64ec3c4c454e4007b3a3c29ab0547d93.png
如许还存在题目：
https://i-blog.csdnimg.cn/direct/f83515b46ca7443aa61d33462d4d2129.pnghttps://i-blog.csdnimg.cn/direct/2c27f5a2cc954f1799d0ccb1e3c55075.png
css和其他资源文件都不在生成的dist中。我们固然可以手动的移动这些文件到dist目录下，但是我们也可以设置服务器热更新。
起首安装
npm i --save-dev webpack-dev-server 举行设置
const path = require("path");

module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
// 确保资源文件路径正确（可选）
assetModuleFilename: "assets/",
},
module: {
rules: [
   // 处理 CSS 文件
   {
   test: /\.css$/,
   use: ["style-loader", "css-loader"], // 顺序从右到左执行
   },
   // 处理图片、字体等资源文件
   {
   test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf|otf)$/,
   type: "asset/resource", // Webpack 5+ 原生资源模块
   // 或使用 file-loader（Webpack 4）
   // use: "file-loader",
   },
],
},
// 配置开发服务器（热更新）
devServer: {
static: {
   directory: path.join(__dirname, "dist"), // 服务 dist 目录
},
hot: true, // 启用热更新
open: true, // 自动打开浏览器
},
}; 在node脚本中举行设置
"scripts": {
"build": "webpack --config webpack.config.js --mode development",
"dev": "webpack serve --mode development --open"
}, 代码拆分

1. 提取公共代码（SplitChunksPlugin）

module.exports = {
optimization: {
splitChunks: {
   chunks: 'all', // 提取所有类型的 chunk（包括异步和同步）
   minSize: 20000, // 文件大于 20KB 才提取
   cacheGroups: {
   vendors: {
      test: /[\\/]node_modules[\\/]/, // 提取 node_modules 中的代码
      name: 'vendors', // 输出文件名
      priority: 10 // 优先级
   },
   default: {
      minChunks: 2, // 至少被引用 2 次才提取
      name: 'common',
      priority: 5
   }
   }
}
}
}; 生成的文件：
https://i-blog.csdnimg.cn/direct/2904d224d7d1418fb5fd0438e2ee539e.png
2. 动态导入（Dynamic Imports）

使用 import() 语法动态加载模块，Webpack 会自动将其拆分为单独的 chunk，它不会在初始加载时立刻请求模块，而是延长到实际必要时才加载。其饭返回一个promise：
// 动态加载模块
button.addEventListener('click', () => {
import('./module.js').then(module => {
module.default();
});
}); 生成的文件：https://i-blog.csdnimg.cn/direct/a3a53c46f4594272b82b90899a7c351b.png
自定义 chunk 名称：
使用 webpackChunkName 注释：
import(/* webpackChunkName: "my-chunk" */ './module.js'); 这段代码是 Webpack 的动态导入语法，联合了邪术注释（Magic Comments），用于实现代码拆分（Code Splitting）。它的核心作用是将 module.js 文件单独打包成一个独立的代码块（chunk），并赋予其一个自定义名称 my-chunk。
邪术注释：
https://i-blog.csdnimg.cn/direct/304fe952c01b450191796a3c56e1906a.png
应用场景：
在用户交互时加载特定组件：
button.addEventListener('click', () => {
import('./Modal.js').then(module => {
const Modal = module.default;
Modal.show();
});
}); 路由懒加载：
在单页面应用（SPA）中，按需加载路由组件：
const Home = () => import(/* webpackChunkName: "home" */ './Home.vue');
const About = () => import(/* webpackChunkName: "about" */ './About.vue'); 为bundle添加hash

在 Webpack 中，为打包后的文件（如 JavaScript、CSS、图片等）添加哈希值（Hash）是一种常见的优化策略。
1. 哈希范例

Webpack 支持以下几种哈希范例：
https://i-blog.csdnimg.cn/direct/628c4195f56c428f91ecab23496868cc.png
2. 设置哈希文件名

在 webpack.config.js 中，通过 output.filename 和 output.chunkFilename 设置哈希文件名。

const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
filename: '..js', // 入口文件使用 contenthash
chunkFilename: '..js', // 动态导入的 chunk 使用 contenthash
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
   {
   test: /\.css$/,
   use: ['style-loader', 'css-loader'],
   },
   {
   test: /\.(png|jpg|jpeg|gif|svg)$/,
   type: 'asset/resource',
   generator: {
      filename: 'assets/.', // 图片文件使用 contenthash
   },
   },
],
},
}; 3. 生成的文件结构

https://i-blog.csdnimg.cn/direct/661f4c8cf1f542c5b576e8695cb16977.png
4. 哈希值的稳固性

[*] ：每次构建都会变革，纵然文件内容没有变革。
[*] ：只有 chunk 内容变革时才会变革。
[*] ：只有文件内容变革时才会变革。
保举使用，因为它更精确地反映了文件内容的变革。
从js中提取css

将CSS从JavaScript中提取出来并单独作为CSS文件，可以对浏览器加载HTML带来以下利益：

[*] 缓存和性能改善：

[*] 当HTML、CSS和JavaScript分离时，浏览器可以缓存CSS文件，从而在访问其他页面时减少加载时间，进步性能。

[*] 渲染速度提拔：

[*] CSS文件是渲染阻塞资源，浏览器必须下载并解析CSS后才能渲染页面。
[*] 通过提取关键CSS（critical CSS）并内联到HTML头部，可以减少初始渲染时间，特别是在网络条件较差的情况下3。

1. 核心思绪

[*] 提取 CSS：将 CSS 从 JavaScript 中分离，生成独立的 .css 文件。
[*] 自动注入：在 HTML 中自动插入 <link> 标签引用生成的 CSS 文件。
2. 安装依赖

npm install --save-dev mini-css-extract-plugin html-webpack-plugin 3. 设置 Webpack

在 webpack.config.js 中设置以下内容：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle..js',
path: path.resolve(__dirname, 'dist'),
clean: true, // 自动清理 dist 目录
},
module: {
rules: [
   // 处理 CSS 文件
   {
   test: /\.css$/,
   use: [
      MiniCssExtractPlugin.loader, // 提取 CSS 到独立文件
      'css-loader', // 解析 CSS 语法
   ],
   },
   // 处理图片、字体等资源文件（可选）
   {
   test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|eot|ttf|otf)$/,
   type: 'asset/resource', // Webpack 5+ 原生资源模块
   generator: {
      filename: 'assets/.', // 资源文件输出路径
   },
   },
],
},
plugins: [
// 提取 CSS 到独立文件
new MiniCssExtractPlugin({
   filename: 'styles..css', // 输出的 CSS 文件名（带哈希）
}),
// 自动生成 HTML 并注入 CSS/JS
new HtmlWebpackPlugin({
   template: './src/index.html', // HTML 模板文件
}),
],
}; 4. 项目结构示例

https://i-blog.csdnimg.cn/direct/5301fcc48d294c26bd70abd6de514ca8.png
src/index.js

import './styles.css'; // 导入 CSS 文件 src/styles.css

body {
background: #f0f0f0;
font-family: Arial;
} src/index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>

</head>
<body>
<div id="root"></div>
</body>
</html> 5. 构建结果

运行 npm run build 后，生成的 dist 目录如下：
https://i-blog.csdnimg.cn/direct/6e1785d7cd44473080067bf39c7e14ff.png
生成的 dist/index.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
<link href="styles.5a6b7c8d.css" rel="stylesheet"> 
</head>
<body>
<div id="root"></div>
<script src="bundle.3f9a8b7e.js"></script> 
</body>
</html> Shimming

Webpack Shimming 是一种在 Webpack 中处理全局依赖或模块兼容性题目标技能。它的核心作用是为代码提供缺失的依赖项，大概修改模块的举动，使其可以或许在 Webpack 构建的情况中正常运行。
为什么必要 Shimming？

[*] 处理全局变量：某些库依赖全局变量（如 jQuery 的 $），但 Webpack 默认不会将这些变量暴露给模块。
[*] 兼容旧代码：一些老旧的库可能不符合模块化规范（如 CommonJS、ES Module），必要手动处理。
[*] 提供缺失的依赖：某些模块可能依赖特定的全局变量或模块，但这些依赖在 Webpack 中不存在。
Shimming 的实现方式

Webpack 提供了多种方式来实现 Shimming：
1. 使用 ProvidePlugin

ProvidePlugin 是 Webpack 内置的插件，用于自动加载模块，并将其注入到每个模块中。
示例：自动加载 jQuery
假设项目中使用了 jQuery，但不想在每个模块中手动 import $ from 'jquery'，可以通过 ProvidePlugin 自动注入 $ 和 jQuery。
const webpack = require('webpack');

module.exports = {
plugins: [
new webpack.ProvidePlugin({
   $: 'jquery', // 当模块中使用 $ 时，自动加载 jquery
   jQuery: 'jquery', // 当模块中使用 jQuery 时，自动加载 jquery
}),
],
}; 效果

[*] 在任何模块中使用 $ 或 jQuery 时，Webpack 会自动引入 jquery 模块。
[*] 例如：
// 不需要手动 import $ from 'jquery';
$(document).ready(() => {
console.log('jQuery is ready!');
}); 2.使用 externals

externals 是 Webpack 的一个设置选项，用于将某些依赖项排除在打包之外。它的核心作用是告诉 Webpack：“这些依赖项不必要打包到最终的输出文件中，因为它们已经在运行情况中存在了。”
1) 使用 CDN 加载库

在 HTML 中引入 jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My App</title>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html> 在 Webpack 中设置 externals
module.exports = {
externals: {
jquery: 'jQuery', // 将 jquery 映射为全局变量 jQuery
},
}; 在代码中使用 jQuery
import $ from 'jquery'; // 从全局变量中获取 jQuery

$(document).ready(() => {
console.log('jQuery is ready!');
}); 效果

[*] Webpack 不会将 jQuery 打包到 bundle.js 中。
[*] 代码中通过 import $ from 'jquery' 获取全局变量 jQuery。
2) 排除第三方库

module.exports = {
externals: {
react: 'React', // 排除 React
'react-dom': 'ReactDOM', // 排除 ReactDOM
lodash: '_', // 排除 Lodash
},
}; 3.resolve.alias

resolve.alias 是 Webpack 的一个设置选项，用于为模块路径创建别名（Alias）。它的核心作用是简化模块的导入路径，制止在代码中编写冗长的相对路径，同时也可以解决模块路径辩论的题目。
基本设置
在 webpack.config.js 中设置 resolve.alias：
const path = require('path');

module.exports = {
resolve: {
alias: {
   '@': path.resolve(__dirname, 'src'), // 将 @ 映射为 src 目录
   components: path.resolve(__dirname, 'src/components'), // 将 components 映射为 src/components 目录
},
},
}; 效果

[*] 在代码中可以使用别名代替完整路径：
import MyComponent from '@/components/MyComponent'; // 相当于 src/components/MyComponent
import Button from 'components/Button'; // 相当于 src/components/Button 常见使用场景
1. 简化路径
将常用的目录映射为简短的别名：
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
components: path.resolve(__dirname, 'src/components'),
utils: path.resolve(__dirname, 'src/utils'),
},
} 2. 解决模块辩论

如果项目中安装了多个版本的库（如 lodash 和 lodash-es），可以通过别名指定使用哪个版本：
resolve: {
alias: {
lodash: path.resolve(__dirname, 'node_modules/lodash-es'), // 强制使用 lodash-es
},
} 3. 替换模块

如果某个模块必要替换为自定义实现，可以通过别名指定：
resolve: {
alias: {
'original-module': path.resolve(__dirname, 'src/custom-module'), // 替换为自定义模块
},
} 联合 TypeScript 使用
如果项目使用 TypeScript，必要在 tsconfig.json 中设置路径映射，以确保 TypeScript 可以或许正确解析别名。
tsconfig.json 设置

{
"compilerOptions": {
"baseUrl": ".", // 基础路径
"paths": {
   "@/*": ["src/*"], // 将 @ 映射为 src 目录
   "components/*": ["src/components/*"] // 将 components 映射为 src/components 目录
}
}
} Webpack 设置

{
"compilerOptions": {
"baseUrl": ".", // 基础路径
"paths": {
   "@/*": ["src/*"], // 将 @ 映射为 src 目录
   "components/*": ["src/components/*"] // 将 components 映射为 src/components 目录
}
}
} Tree shaking

Tree shaking（摇树优化）是前端构建工具（如 Webpack、Rollup）中的一种优化技能，用于在打包时移除未被使用的代码（Dead Code），好比不消。它的名字泉源于“摇晃一棵树，让枯叶（无用代码）落下”的比喻。

Tree shaking 见效的条件

https://i-blog.csdnimg.cn/direct/a9aec3b8961e41cfa4a9d7c39b98e48e.png
设置方式

1. 设置生产模式
// webpack.config.js
module.exports = {
mode: 'production', // 生产模式自动启用 Tree shaking 和代码压缩
}; 2. 标志无副作用的模块

在 package.json 中声明：
{
"sideEffects": false // 所有文件均无副作用（默认值）
} Tree shaking 的局限性

[*] 动态导入无法优化
动态导入（如 import('module')）的代码可能无法被静态分析。
[*] 第三方库的兼容性
未使用 ES6 模块的库（如 Lodash）需配合插件（如 babel-plugin-lodash）或按需引入。
[*] 副作用代码需手动标志
未正确标志副作用的代码可能被误删，导致运行时错误。
Production vs Development Build

https://i-blog.csdnimg.cn/direct/a249994aa87a4509ab8dca0292162cc3.png
webpack设置文件拆分

在大型项目中，Webpack 设置文件可能会变得非常复杂和冗长。为了提拔可维护性和灵活性，通常会将 Webpack 设置文件拆分为多个文件，分别用于不同的情况（如开发情况、生产情况）。
webpack-merge：用于归并多个设置文件。

webpack.common.js（公共设置）

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
entry: './src/index.js',
output: {
filename: '.bundle.js',
path: path.resolve(__dirname, '../dist'),
},
module: {
rules: [
   {
   test: /\.css$/,
   use: ['style-loader', 'css-loader'],
   },
   {
   test: /\.(png|jpg|jpeg|gif|svg)$/,
   type: 'asset/resource',
   },
],
},
plugins: [
new HtmlWebpackPlugin({
   template: './src/index.html',
}),
],
}; webpack.dev.js（开发情况设置）

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
static: './dist',
hot: true,
},
}); webpack.prod.js（生产情况设置）

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
optimization: {
splitChunks: {
   chunks: 'all',
},
},
});

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

页: [1]

IT评测·应用市场-qidao123.com技术社区's Archiver

webpack介绍