关于 DLL 在项目中使用的流程更加完整清晰：
前期准备
-
安装依赖：
bash
npm install webpack --save-dev
1. 配置 DLLPlugin 并生成版本号
创建 DLL 配置文件
在项目根目录下新建webpack.dll.config.js文件，内容如下：
javascript
const path = require('path');
const webpack = require('webpack');
const packageJson = require('./package.json');
module.exports = {
entry: {
vendor: ['vue', 'vue-router', 'vuex']
},
output: {
path: path.resolve(__dirname, 'dll'),
filename: `[name].v${packageJson.version}.dll.js`,
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
name: '[name]_library',
path: path.resolve(__dirname, 'dll', '[name].manifest.json')
})
]
};
2. 区分开发和正式环境配置
开发环境配置
修改主 Webpack 开发配置文件，假设为webpack.dev.js：
javascript
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
hot: true
},
plugins: [
new webpack.DllReferencePlugin({
manifest: require('./dll/vendor.manifest.json')
})
]
});
正式环境配置
修改主 Webpack 正式配置文件，假设为webpack.prod.js：
javascript
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
plugins: [
new webpack.DllReferencePlugin({
manifest: require('./dll/vendor.manifest.json')
})
]
});
3. 配置构建脚本
在package.json中配置如下脚本：
json
{
"scripts": {
"build:dev": "node checkDll.js && webpack --config webpack.dev.js",
"build:prod": "node checkDll.js && webpack --config webpack.prod.js",
"force-build:dev": "webpack --config webpack.dll.config.js && webpack --config webpack.dev.js",
"force-build:prod": "webpack --config webpack.dll.config.js && webpack --config webpack.prod.js"
}
}
同时，创建一个checkDll.js脚本（使用 Node.js 编写），用于自动检查 DLL 是否需要重新构建：
javascript
const fs = require('fs');
const path = require('path');
const packageJson = require('./package.json');
const dllManifestPath = path.resolve(__dirname, 'dll', 'vendor.manifest.json');
try {
const manifest = JSON.parse(fs.readFileSync(dllManifestPath, 'utf8'));
const currentVersion = packageJson.version;
const dllVersionInManifest = manifest.version || '0.0.0';
if (currentVersion!== dllVersionInManifest) {
require('child_process').execSync('webpack --config webpack.dll.config.js', { stdio: 'inherit' });
console.log('DLL has been rebuilt due to version change.');
} else {
console.log('DLL is up to date, no rebuild needed.');
}
} catch (error) {
console.log('DLL manifest not found or corrupted, rebuilding DLL...');
require('child_process').execSync('webpack --config webpack.dll.config.js', { stdio: 'inherit' });
}
这样，开发成员可以按以下方式操作：
-
进行开发环境构建（自动检查 DLL） ：
bash
npm run build:dev
-
进行正式环境构建（自动检查 DLL） ：
bash
npm run build:prod
-
强制进行开发环境构建（无论 DLL 是否需要更新） ：
bash
npm run force-build:dev
-
强制进行正式环境构建（无论 DLL 是否需要更新） ：
bash
npm run force-build:prod
4. 将构建后的 DLL 文件提交到 Git 仓库
为了简化提交过程，编写一个commitDllAndBuild.sh脚本（以 Linux 或 macOS 为例，Windows 可使用批处理文件）：
bash
#!/bin/bash
git add webpack.dll.config.js dll/
git commit -m "Update DLL files"
git push origin <branch_name>
npm run build:prod
为脚本添加可执行权限：
bash
chmod +x commitDllAndBuild.sh
运行脚本即可完成 DLL 文件提交和正式环境构建：
bash
./commitDllAndBuild.sh
5. dist目录下的文件情况
在执行npm run build:prod（正式环境构建）或npm run build:dev（开发环境构建）后，dist目录下通常会包含以下几类文件：
- 项目的主应用代码文件：这是经过 Webpack 打包处理后的项目主要代码，可能包含 JavaScript、CSS 等文件，具体取决于项目的实际情况。
- DLL 相关文件：如果构建过程中生成了 DLL 文件，
dist目录下（或其关联的dll子目录）会有生成的 DLL 文件（如vendor.v[version].dll.js）以及对应的manifest文件（如vendor.manifest.json）。这些文件包含了项目中被提取出来的公共依赖库代码。 - HTML 文件：项目的入口 HTML 文件，通常是经过 Webpack 插件（如
html-webpack-plugin）处理后的文件，其中会包含对打包后 JavaScript 和 CSS 等文件的引用。
6. 在html中使用 DLL
一般来说，在 Webpack 构建过程中，html-webpack-plugin等插件会自动处理好 DLL 文件的引用，无需在html文件中手动添加复杂的<script>标签引用。
例如，当使用html-webpack-plugin时，它会根据 Webpack 的配置，在生成的 HTML 文件中插入合适的<script>标签来引用 DLL 文件。假设项目使用了html-webpack-plugin，并且配置了正确的 DLL 引用，生成的 HTML 文件中会有类似这样的<script>标签（具体路径根据实际配置而定）：
html
<script src="dll/vendor.v[version].dll.js"></script>
这样，在浏览器加载 HTML 页面时，会先加载 DLL 文件，然后再加载项目的主应用代码，从而利用 DLL 中预打包的公共库代码，提高应用的加载速度。
7. 维护 DLL 版本
当 DLL 依赖的库版本发生变化时，修改webpack.dll.config.js文件中的entry配置，并更新package.json中的版本号。后续执行npm run build:dev或npm run build:prod时，checkDll.js脚本会自动检测到版本变化并重新构建 DLL。
8. 后续更新与协作注意事项
-
文件清理：若项目使用
CleanWebpackPlugin，需将 DLL 文件输出目录排除，避免误删：
javascript
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
plugins: [
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['dist/*', '!dist/dll']
})
]
};
- 团队协作优化：新成员拉取项目代码后，只需运行
npm run build:dev即可开始开发。通过自动化的检查和构建机制，减少了对开发成员在 DLL 知识和手动操作方面的要求，提升了开发效率和协作体验。
