19、webpack dllPlugin

webpack dllPlugin动态链接库文件，当三方链接库文件存在时，访问链接库文件，否则把三方库打包到文件中，以react作为三方链接库为例

操作步骤：

• 1、安装react：

yarn add react react-dom

• 2、新建dll配置文件

参考下面 build/webpack.react.config.js

• 3、配置package.json命令，运行命令生成dll文件和manifest.json

"build:react": "webpack --config ./build/webpack.react.config"

• 4、更改index.html模板加入dll引入

<script src="./_dll_react.js"></script>

• 5、webpack.prod.config.js加入引入dll配置

plugins: [
  // 引入dll
  new webpack.DllReferencePlugin({
    manifest: path.resolve(__dirname, '../dist', 'manifest.json')
   })
]

完整配置

build/webpack.base.config.js

// 开发和生成模式共同的配置
let path = require('path');
// path.resolve 相对路径转成绝对路径
// console.log(path.resolve('dist'));
// 以当前目录
// console.log(__dirname);

// html-webpack-plugins 插件
let HtmlWebpackPlugins = require('html-webpack-plugin');
//
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
//
let webpack = require('webpack');

// webpack相关配置
module.exports = {
    // 入口,表示从哪里开始打包
    entry: {
        home: './src/index.js'
    }, 
    // 表示出口(输出后文件相关配置)
    output: {   
        // 打包后的文件名 多入口根据入口名称生成
        filename: 'build.js',  
        // 输出后的路径(必须是一个绝对路径)
        path: path.resolve(__dirname, '../dist')
    },
    // 插件配置
    plugins: [
        new HtmlWebpackPlugins({
            // 模板位置
            template: 'index.html',
            // 文件名
            filename: 'index.html'
        }),
        // 抽离css为单独文件
        new MiniCssExtractPlugin({
            filename: 'main.css'
        })
    ],
    //
    resolve: {
        // 解析三方库文件
        //modules: [ path.resolve('node_modules') ],
        // 扩展名
        extensions: ['.js', '.css', '.json', '.vue'],
        // 定义路径别名
        alias: {
            '@': path.resolve('src')
        }
    },
    module: {
        // loader
        rules: [
            {
                test: /\.css$/, //匹配css文件
                use: [ MiniCssExtractPlugin.loader, 'css-loader']
            },
            {
                test: /\.less$/, //匹配less文件
                use: [ MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            },
            {
                test: /\.js$/, //匹配js文件
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env',
                            '@babel/preset-react'
                        ]
                    }
                }
            }
        ]
     }
}

build/webpack.dev.config.js

// dev模式的配置
const merge = require('webpack-merge');
// const { smart } = require('webpack-merge');
// 基础配置
let base = require('./webpack.base.config');
//
let webpack = require('webpack');

// 合并基础配置扩展开发模式配置
module.exports = merge(base, {
    mode: 'development',
    devtool: 'source-map',
    //
    devServer: {
        // 端口，默认8080
        port: '8099',
        // 进度条
        progress: true,
        // 启动后访问目录，默认是项目根目录，这个设置到打包后目录
        contentBase: './dist'
    },
    plugins: [
        // 环境区分
        new webpack.DefinePlugin({
            DEV: JSON.stringify('development')
        })
    ]
})

build/webpack.prod.config.js

// 生产模式的配置
const { smart } = require('webpack-merge');
// 基础配置
let base = require('./webpack.base.config');
//
let webpack = require('webpack');
//
let path = require('path');
// 合并基础配置扩展生产模式配置
module.exports = smart(base, {
    //
    mode: 'production',
    // 
    plugins: [
        // 环境区分
        new webpack.DefinePlugin({
            DEV: JSON.stringify('production')
        }),
        // 引入dll
        new webpack.DllReferencePlugin({
            manifest: path.resolve(__dirname, '../dist', 'manifest.json')
        })
    ]
})

build/webpack.react.config.js

/**
 * react dll配置
 */
let path = require('path');
let webpack = require('webpack');
// webpack相关配置
module.exports = {
    mode: 'development',
    // 入口,表示从哪里开始打包
    entry: {
        react: ['react', 'react-dom']
    }, 
    // 表示出口(输出后文件相关配置)
    output: {   
        // 打包后的文件名 多入口根据入口名称生成
        filename: '_dll_[name].js',
        // 输出后的路径(必须是一个绝对路径)
        path: path.resolve(__dirname, '../dist'),
        library: '_dll_[name]', // 变量名
        // libraryTarget: 'var' // 默认var、commonjs、umd
    },
    // 插件
    plugins: [
        new webpack.DllPlugin({
            // 要和library一致
            name: '_dll_[name]', 
            // 清单文件
            path: path.resolve(__dirname, '../dist', 'manifest.json')
        })
    ]
}

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>页面</title>
</head>
<body>
    <div id="root">这是一个div</div>
    <!-- 引入dll-->
    <script src="./_dll_react.js"></script>
</body>
</html>

src/index.js

import React from 'react'
import { render } from "react-dom";
// 渲染节点
render(<h1>react渲染的节点</h1>, window.root)