把js文件编译成dll供页面调用的方法

2023年5月27日上午9:58 • JavaScript

下面我会详细讲解如何把js文件编译成dll供页面调用的方法。步骤如下：

1. 安装webpack和webpack-dev-server

首先需要全局安装webpack和webpack-dev-server。运行以下命令：

npm install webpack -g
npm install webpack-dev-server -g

2. 创建webpack配置文件

在项目根目录下创建webpack.config.js配置文件，并添加以下内容：

const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    vendor: [
      'react',
      'react-dom'
    ]
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'dist', '[name]-manifest.json'),
      name: '[name]_[hash]'
    })
  ]
};

这里的意思是把react和react-dom打包成一个库文件，以便在页面中调用。

3. 创建npm脚本

在package.json文件中添加一个npm脚本，用来启动webpack打包：

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

运行命令：

npm run build:dll

4. 在页面中引入dll文件

打包完成后，会在dist目录下生成vendor.js和vendor-manifest.json两个文件。在页面中只需要引入vendor.js文件就可以使用react和react-dom了。代码示例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div id="root"></div>
  <script src="dist/vendor.js"></script>
  <script src="app.js"></script>
</body>
</html>

示例一

假设我们要引入lodash这个库，现在的页面中直接使用了：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

这时我们决定把lodash打包成dll文件，供页面调用。

首先在项目目录下执行以下命令安装lodash：

npm install lodash --save

接着在webpack.config.js中配置entry字段：

entry: {
  vendor: [
    'lodash'
  ]
}

再次执行：

npm run build:dll

在页面中引入：

<div id="app"></div>
<script type="text/javascript" src="/assets/vendor.dll.js"></script>
<script type="text/javascript" src="/assets/index.js"></script>

index.js文件中使用lodash：

var result = _.concat([1, 2], 3);
console.log(result); // [1, 2, 3]

示例二

假设我们要把react和react-dom打包成dll文件，供页面调用。

同样先安装：

npm install react react-dom --save

然后在webpack.config.js中配置entry和output字段：

entry: {
  vendor: [
    'react',
    'react-dom'
  ]
},
output: {
  filename: 'vendor.dll.js',
  path: path.resolve(__dirname, 'dist', 'js'),
  library: '[name]_[hash]'
}