开发过程中,我们经常需要引入大量第三方库,这些库并不需要随时修改或调试,我们可以使用DllPlugin和DllReferencePlugin单独构建它们。 具体使用如下:

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
vendor: [
'axios',
'vue-i18n',
'vue-router',
'vuex'
]
},
output: {
path: path.resolve(__dirname, '../static/'),
filename: '[name].dll.js',
library: '[name]_library'
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, 'build', '[name]-manifest.json'),
name: '[name]_library'
})
]
}

执行webpack命令,build目录下即可生成 dll.js 文件和对应的 manifest 文件,使用 DLLReferencePlugin 引入:

plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./build/vendor-manifest.json')
})
]

【webpack】使用DllPlugin拆分模块的更多相关文章

  1. Webpack 开发工具与模块热替换

    Webpack 开发工具与模块热替换 ​⚠️ 注意: 永远不要在生产环境中使用这些工具,永远不要. devtool 当 JavaScript 异常抛出时,你常会想知道这个错误发生在哪个文件的哪一行.然 ...

  2. webpack对多个模块依赖进行打包

    [ webpack3.0.0刚刚出来  所以文章是跟着低版本 教程 操作熟悉  结果好多对不上喔] 七:webpack对多个模块依赖进行打包 通过一刚开始我们了解到 webpack支持commonJS ...

  3. webpack实践——DLLPlugin 和 DLLReferencePlugin的使用

    DLLPlugin 和 DLLReferencePlugin的使用 DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles,同时还大大提升了构建的速度. 1 ...

  4. Webpack 入门指南 - 2.模块

    这一次我们谈谈模块问题. 通常我们希望这个项目可以分为多个独立的模块,比如,上一次提高的 hello 函数,如果我们定义为一个模块,其它模块引用之后,直接调用就好了.在前端怎么使用模块呢?这可说来话长 ...

  5. [webpack]--webpack 如何解析代码模块路径

    前言 webpack是如何解析代码模块路径 webpack 中有一个很关键的模块 enhanced-resolve 就是处理依赖模块路径的解析的,这个模块可以说是 Node.js 那一套模块路径解析的 ...

  6. webpack前言:前端模块系统的演进

    前端开发和其他开发工作的主要区别,首先是前端是基于多语言.多层次的编码和组织工作,其次前端产品的交付是基于浏览器,这些资源是通过增量加载的方式运行到浏览器端,如何在开发环境组织好这些碎片化的代码和资源 ...

  7. webpack整合 vue-router 路由,模块嵌套,整合Mint UI,MUI

    webpack整合 vue-router 结构 各个文件内容,一共八个文件, 还有src components 目录 Login.vue <template> <div> &l ...

  8. webpack 导出、导入模块(及路径)

    参考:https://blog.csdn.net/xyphf/article/details/83411552 (下面的代码亲测有效) 注:导入的模块的方法,只有两种方法  import 和 requ ...

  9. webpack对于引入的模块无法智能代码提示

    前端模块太多了,模块里的方法比较难记住,所以我们一般靠的都是IDE的代码提示. 但是有时候我们会发现对于引入的模块没有代码提示,我也安装了模块呀,为什么没有代码提示? 主要是package.json的 ...

随机推荐

  1. python基础面试常见题

    1.为什么学习Python? Python是目前市面上,我个人认为是最简洁.最优雅.最有前途.最全能的编程语言,没有之一. 2.通过什么途径学习的Python? 通过自学,包括网上查看一些视频,购买一 ...

  2. django 前端 js让一段文本中包含的网址可以被访问

    这个功能还是挺刚需的,下面说说实现过程,用到了正则表达式. 1.原本的html部分代码: <h4 id="softadd">链接: https://pan.baidu. ...

  3. 2050 Programming Competition (CCPC)

    Pro&Sol 链接: https://pan.baidu.com/s/17Tt3EPKEQivP2-3OHkYD2A 提取码: wbnu 复制这段内容后打开百度网盘手机App,操作更方便哦 ...

  4. Linux提取不匹配字符串的行和列(awk函数)

    如下图所示,想把含有‘-nan’字符串的行提取出来 则用到awk函数,命令行如下: awk '{if($3!="-nan"){print $3}}' CHB_vs_ITU.weir ...

  5. 牛客网 2018年东北农业大学春季校赛 L题 wyh的天鹅

    链接:https://www.nowcoder.com/acm/contest/93/L来源:牛客网 时间限制:C/C++ 3秒,其他语言6秒空间限制:C/C++ 262144K,其他语言524288 ...

  6. windows server 2012 流媒体服务器搭建(直播与点播)

    IIS Live Smooth Streaming(实时平滑流式处理)是微软下一代流媒体解决方案.该技术是在IIS web中集成媒体传输平台IIS media services,实现利用标准 HTTP ...

  7. Luogu P1251 餐巾计划问题

    题目链接 \(Click\) \(Here\) 看到其他人都是用费用流写的,我只能表示:动什么脑子?暴力就完事了! 嗯,这个题应该是一个相当显然的上下界最小费用可行流模型,所以跑就完事了. \(s - ...

  8. (栈)leetcode856 Score of Parentheses

    Given a balanced parentheses string S, compute the score of the string based on the following rule: ...

  9. day13-(事务&mvc&反射补充)

    回顾: jsp: java服务器页面 jsp的脚本 jsp的注释 html注释 java注释 jsp注释 <%-- --%> jsp的指令 page:声明页面一些属性 重要的属性: imp ...

  10. 20165232 2017-2018-2《Java程序设计》结对编程一 第一周总结

    20165232 2017-2018-2<Java程序设计>结对编程一 第一周总结 结对对象 20165219王彦博 20165232何彦达 需求分析 实现一个程序,要求: 1 支持整数运 ...