webpack dll动态链接库

如果在项目中引入了第三方资源，直接对项目进行打包的话，会把第三方资源也一起打包到入口文件中，这样会使得入口文件非常大有时候还会重复打包非常的消耗性能

使用dll动态链接库可以把第三方资源和项目的入口分别打包。

使用方法：

1.首先在与webpack.config.js同级的目录下创建webpack.dll.js文件

//webpack.dll.js
const{resolve}=require('path')
const webpack =require('webpack')
module.exports={
    entry:{
       //最终打包生成的是[name]--jquery
       //['jquery']-->要打包的库是jquery
       jquery:['jquery']
    },
    output:{
        filename:'[name].js',
        path:resolve(__dirname,'dll'),
        //打包的库里面向外暴露出去的内容叫做什么名字
        library:'[name]_[hash]'
    },
    plugins:[
        // 打包生成一个manifest.json提供jquery映射关系
        new webpack.DllPlugin({
            name:'[name]_[hash]',//映射库的暴露的内容名称
            path:resolve(__dirname,'dll/manifest.json')
        })
    ],
    mode:'production',
}

2.运行命令

webpack --config webpack.dll.js

同时会生成一个文件夹

manifest.json提供jquery映射关系

3.配置webpack.config.js

const{resolve}=require('path')
const HtmlWebPackPlugin=require('html-webpack-plugin')
const webpack =require('webpack')
const AddAssetWebpackHtmlPlugin=require('add-asset-html-webpack-plugin')
module.exports={
    entry:'./src/js/index.js',
    output:{
        filename:'built.js',
        path:resolve(__dirname,'build')
    },
    plugins:[
        new HtmlWebPackPlugin({
            template:'./src/index.html'
        }),
        // 告诉webpack哪些库不参与打包，同时使用时的名称也得变
        new webpack.DllReferencePlugin({
            manifest:resolve(__dirname,'dll/manifest.json')
        }),
        // 将某个文件打包出去，并在html中自动引入该资源
        new AddAssetWebpackHtmlPlugin({
            filepath:resolve(__dirname,'dll/jquery.js')
        })
    ],
    mode:'production',
}

AddAssetWebpackHtmlPlugin插件的作用是在打包时自动将jquery文件引入到html中去

4.运行webpack命令

结果：

AddAssetWebpackHtmlPlugin插件自动将jquery引入到了html文件中去

实现了将第三方资源与入口文件分别打包的目标

5.AddAssetHtmlWebpackPlugin引入多个资源

new AddAssetHtmlWebpackPlugin([
            {filepath:resolve(__dirname,'build/react.js')},
            {filepath:resolve(__dirname,'build/reactdom.js')}
        ])