Webpack 4.x 中如何将 jQuery 打包成 Dll 文件？-JavaScript中文网-JavaScript教程资源分享门户

Webpack 4 在处理大型项目时十分强大，它可以使你快速地构建现代化的 Web 应用程序。然而，当项目的体积变得越来越大时，Webpack 可能会变得不太灵活和缓慢。如果你想使项目构建速度更快，你可以考虑将一些共享库打包成 Dll 文件。在本文中，我们将讨论如何将 jQuery 打包成 Dll 文件。

什么是 Dll 文件？

Dll 是动态链接库的缩写，它是一种包含代码和数据的文件，这些代码和数据可以由多个程序共享。通常情况下，我们将一些常用的库打包成 Dll 文件，可以在多个项目中重复使用，减少打包时间和文件大小。

如何将 jQuery 打包成 Dll 文件？

我们首先需要安装 webpack 和 webpack-cli：

npm install webpack webpack-cli --save-dev

然后安装 webpack.DllPlugin 和 AddAssetHtmlWebpackPlugin：

npm install webpack.DllPlugin add-asset-html-webpack-plugin --save-dev

现在我们开始配置 webpack。首先，我们在项目根目录下创建一个名为 webpack.config.dll.js 的文件，这个配置文件将负责打包 jQuery：

// javascriptcn.com 代码示例
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: {
    jquery: ['jquery'],
  },
  output: {
    path: path.resolve(__dirname, 'dll'),
    filename: '[name].dll.js',
    library: '[name]',
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.DllPlugin({
      path: path.resolve(__dirname, 'dll/[name].manifest.json'),
      name: '[name]',
      context: process.cwd(),
    }),
  ],
};

这里使用了 CleanWebpackPlugin 来清理上一次打包的文件，使用了 webpack.DllPlugin 来生成 manifest.json 文件，并在 output 中使用 [name].dll.js 作为输出文件名，此处 [name] 为对应的 entry 名称，因此对应 jquery 库将会输出到 dll/jquery.dll.js 文件中。

接下来我们需要在 package.json 中添加一条打包的命令：

{
  "scripts": {
    "build:dll": "webpack --config=webpack.config.dll.js"
  }
}

现在我们可以运行 npm run build:dll 来打包 jquery 库了。这个打包过程只需要进行一次，以后每次打包我们都可以直接使用之前打包好的 Dll 文件。

接下来，我们需要在 main webpack 配置文件中引入 Dll 文件：

// javascriptcn.com 代码示例
const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: {
    app: './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[hash:8].js',
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.DllReferencePlugin({
      context: process.cwd(),
      manifest: require('./dll/jquery.manifest.json'),
    }),
    new AddAssetHtmlWebpackPlugin({
      filepath: path.resolve(__dirname, 'dll/jquery.dll.js'),
    }),
  ],
};

这里使用了 webpack.DllReferencePlugin 来引用 Dll 文件，使用 AddAssetHtmlWebpackPlugin 来将 Dll 文件添加到页面中。

现在我们可以使用 jQuery 了，在入口文件中添加以下代码：

import $ from 'jquery';

$('body').text('Hello World!');

最后，我们运行 npm run build 就可以打包我们的应用程序了。

总结

本文介绍了如何将 jQuery 打包成 Dll 文件，并在 main webpack 配置文件中引入 Dll 文件，可以提高项目的打包速度和减少打包体积。同时，我们在示例代码中还演示了如何使用 jQuery。

希望本文对于你学习 Webpack 和优化项目构建有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64f9d37ef6b2d6eab3131f0c