码迷,mamicode.com
首页 > 其他好文 > 详细

dll

时间:2020-06-07 11:13:09      阅读:56      评论:0      收藏:0      [点我收藏+]

标签:module   try   cep   img   add   div   web   bpa   exports   

使用 dll,可以指示webpack 哪些库不参与打包,可以对某些第三方库进行单独打包,

需要一个配置文件  webpack.dll.js

const {resolve} = require(‘path‘)
const webpack = require(‘webpack‘)

module.exports = {
    entry:{
        jquery:[‘jquery‘] //最终打包生成的[name]
    },
    output:{
        filename:‘[name].js‘,
        path:resolve(__dirname,‘dll‘),
        library:‘[name]_[hash]‘ //打包的库里面向外暴露出去的内容命名
    },
    plugins:[
        new webpack.DllPlugin({ //打包生成一个manifest.json,和jQuery映射关系
            name:‘[name]_[hash]‘, //映射库的暴露的内容名称
            path:resolve(__dirname,‘dll/manifest.json‘) //输出文件路径
        })
    ],
    mode:‘production‘
}
 
当运行 webpack.dll.js 文件( npx  webpack  --config   webpack.dll.js )

可以将 jQuery 单独打包,并生成一个 manifest.json 文件,提供和 jQuery 的映射关系

技术图片

打包生成 jQuery.js 

技术图片

生成 mainfes.json

技术图片

可以直接在  index.js 中 引入 jQuery 库

技术图片

但是,webpack 配置中需要忽略 manifest 中的 库的打包,避免重复打包,需要 webpack 内置的插件  DllReferencePlugin

技术图片

webpack 构建打包后,就不会对 jQuery 打包

技术图片

在页面中使用 dll 打包的 jquery ,需要 另一个插件   add-asset-html-webpack-plugin ,

技术图片

再次构建,页面中 引入了 使用 dll 打包的 jQuery,

技术图片

 

dll

标签:module   try   cep   img   add   div   web   bpa   exports   

原文地址:https://www.cnblogs.com/shanlu0000/p/13059040.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!