webpack介绍

老婆出轨 · 2025-3-12 11:04:42

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

entry与output

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

const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
};

复制代码

依赖图如下所示：

loader

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

css-loader 是 Webpack 中的一个加载器（loader），它允许你在 JavaScript 中直接导入 CSS 文件，并将这些 CSS 文件打包到最终的 bundle 中。这种方式与传统的通过 <link> 标签在 HTML 中引入 CSS 文件的方式不同。
实行结构如下：

如果只是单纯的在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);
});
});

复制代码

会报错如下：

起首下载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如下：

webpack会隐式插入：

但以上内容还存在题目
我们接着引入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>

复制代码

会存在以下题目

后面.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 } },
],
},
],
},
};

复制代码

如此类名将会发生变革

但是如许仍然存在题目——直接import "xxx".css将会找不到类名。
必要用这种方式导入css，

import { button } from "./index.css";

复制代码

import { button } from "./clearButton.css";

复制代码

而且以此种方式对元素举行添加。

btn1.classList.add([button]);

复制代码

el.classList.add([button]);

复制代码

另外，还能将css类名定义为全局类名，保持其原有的名称。

:global(.button) {
background: yellow;
}

复制代码

img-loader

webpack.config.js中设置如下，在 Webpack 中，type: "asset/resource" 是一种用于处理静态资源（如图片、字体等）的设置方式。如下所示：

const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
assetModuleFilename: "images/[hash][ext]",
clean: true,
},
module: {
rules: [
{
test: /\.(css)$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader", options: { modules: true } },
],
},
{
test: /.(png|jpeg|gif|svg)$/,
type: "asset/resource",
},
],
},
};

复制代码

图片生成如下：

在代码中，导入这些文件时会返回文件的 URL。

import logo from "./assets/webpack_logo.png";

复制代码

logoEl.src = logo;

复制代码

补充：

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

作用
全局定义通过资源模块（Asset Modules）处理的文件（如图片、字体、视频等）的输出路径和文件名格式。
设置位置
位于 output 设置对象中。
路径格式说明
- [hash]: 文件内容的哈希值（制止缓存题目）
- [ext]: 原始文件扩展名（如 .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/[hash][ext]",
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目录下

引入字体文件

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: "[name].bundle.js",
path: path.resolve(__dirname, "dist"),
},
}

复制代码

1. 多入口 (entry 对象)

作用：允许将代码拆分为多个独立的入口文件，每个入口生成一个独立的依赖关系图和打包结果。
适用场景：
- 多页面应用（MPA）：每个页面有独立的入口和资源。
- 按功能拆分代码：如管理背景和用户端分离。

2. 输出占位符 [name]

动态替换：[name] 会被替换为入口对象的键名（如 index 和 product）。
生成的文件：
- dist/index.bundle.js
- dist/product.bundle.js

有题目：现在还需再html中手动链接bundle.js：

Plugin有什么作用

增强webpack

HTML WebpackPlugin

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

自动生成 HTML 文件
基于模板（或默认模板）生成 HTML，自动插入 <script> 和 <link> 标签。
多入口适配
为每个入口生成独立的 HTML 文件，并精准注入对应的资源。
资源路径管理
自动处理带哈希的文件名（如 bundle.[contenthash].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 文件名。

产物如下所示：

如许还存在题目：

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/[hash][ext][query]",
},
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
}
}
}
}
};

复制代码

生成的文件：

2. 动态导入（Dynamic Imports）

使用 import() 语法动态加载模块，Webpack 会自动将其拆分为单独的 chunk，它不会在初始加载时立刻请求模块，而是延长到实际必要时才加载。其饭返回一个promise：

// 动态加载模块
button.addEventListener('click', () => {
import('./module.js').then(module => {
module.default();
});
});

复制代码

生成的文件：

自定义 chunk 名称：
使用 webpackChunkName 注释：

import(/* webpackChunkName: "my-chunk" */ './module.js');

复制代码

这段代码是 Webpack 的动态导入语法，联合了 邪术注释（Magic Comments），用于实现 代码拆分（Code Splitting）。它的核心作用是将 module.js 文件单独打包成一个独立的代码块（chunk），并赋予其一个自定义名称 my-chunk。
邪术注释：

应用场景：
在用户交互时加载特定组件：

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 支持以下几种哈希范例：

2. 设置哈希文件名

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

const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: '[name].[contenthash].js', // 入口文件使用 contenthash
chunkFilename: '[name].[contenthash].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/[name].[contenthash][ext]', // 图片文件使用 contenthash
},
},
],
},
};

复制代码

3. 生成的文件结构

4. 哈希值的稳固性

[hash]：每次构建都会变革，纵然文件内容没有变革。
[chunkhash]：只有 chunk 内容变革时才会变革。
[contenthash]：只有文件内容变革时才会变革。

保举使用 [contenthash]，因为它更精确地反映了文件内容的变革。
从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.[contenthash].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/[name].[contenthash][ext]', // 资源文件输出路径
},
},
],
},
plugins: [
// 提取 CSS 到独立文件
new MiniCssExtractPlugin({
filename: 'styles.[contenthash].css', // 输出的 CSS 文件名（带哈希）
}),
// 自动生成 HTML 并注入 CSS/JS
new HtmlWebpackPlugin({
template: './src/index.html', // HTML 模板文件
}),
],
};

复制代码

4. 项目结构示例

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 目录如下：

生成的 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 见效的条件

设置方式

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

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: '[name].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企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

webpack介绍

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块