# 三.dllPlugin
DLLPlugin 是 webpack 官方提供的一个插件，是用来分离代码的
# 1.安装
package.json
{
"name": "3.dllPlugin",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server",
"build": "npm run build:api && webpack",
"build:api": "webpack --config webpack.config.react.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/preset-env": "^7.4.2",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"jquery": "^3.3.1",
"moment": "^2.24.0",
"react": "^16.8.5",
"react-dom": "^16.8.5"
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
# 2.文件
public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>dllPlugin</title>
</head>
<body>
<div id="root"></div>
<script src="/_dll_react.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
src/index.js
import React from "react"
import { render } from "react-dom"
render(<h1>jsx</h1>, window.root)
1
2
3
2
3
src/test.js
module.exports = "123"
1
# 3.配置
webpack.config.react.js
let path = require("path")
let webpack = require("webpack")
module.exports = {
mode: "development",
entry: {
// test: "./src/test.js"
react: ["react", "react-dom"], // 这个例子我们打包 react react-dom 作为公共类库
},
output: {
// filename: "[name].js",
filename: "_dll_[name].js",
path: path.resolve(__dirname, "dist"),
// library: "ab",
library: "_dll_[name]", // 打包后对外暴露的类库名称
// libraryTarget: "var" //commonjs umd
},
plugins: [
new webpack.DllPlugin({
name: "_dll_[name]",
path: path.resolve(__dirname, "dist", "manifest.json"), // 使用 DLLPlugin 在打包的时候生成一个 manifest 文件
})
}),
],
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
webpack.config.js
let path = require("path")
let HtmlWebpackPlugin = require("html-webpack-plugin")
let webpack = require("webpack")
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
},
devServer: {
port: 3000,
open: true,
contentBase: "./dist",
},
plugins: [
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, "dist", "manifest.json"),
// 指定需要用到的 manifest 文件，
// webpack 会根据这个 manifest 文件的信息，分析出哪些模块无需打包，直接从另外的文件暴露出来的内容中获取
}),
new webpack.IgnorePlugin(/\.\/locale/, /moment/),
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
],
module: {
noParse: /jquery/, //不去解析jquery中的依赖库
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
include: path.resolve("src"),
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
},
},
},
],
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
# 4.运行
打包 react 和 react-dom
npm run build:api
1
打包业务代码
npm run build
1
运行
npm run dev
1
页面显示 jsx，react 和 react-dom 没有打包