开发过程中,我们经常需要引入大量第三方库,这些库并不需要随时修改或调试,我们可以使用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. 洛谷P3975 弦论

    题意:求一个串的字典序第k小的子串/本质不同第k小的子串. 解:一开始我的想法是在后缀树上找,但是不知道后缀树上的边对应的是哪些字符... 然而可以不用fail树转移,用转移边转移即可. 先建一个后缀 ...

  2. Vue学习(4)

    昨天内容回顾 1.{{}}模板语法.插值.简单运算2.指令系统 v-if 真正销毁重建 v-show 更改css的display,用于重复切换出现 v-bind 绑定属性 : v-on 绑定事件 @ ...

  3. PHP中empty,is_null,isset的区别

    有时候分不清这几个的区别,特此记录,以备不时之需 isset 判断变量是否已存在 empty 判断变量是否为空或为0 is_null 判断变量是否为NULL 变量 empty is_null isse ...

  4. JS模块化开发(四)——构建工具gulp

    gulp.js——基于流的自动化构建工具 步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: ...

  5. RecyclerView不调用onCreateViewHolder和onBindViewHolder的解决方法

    在把RecyclerView和Fragment合并使用时,没有任何数据显示在RecyclerView上.挨个查看log输出,发现是Adapter未调用onCreateViewHolder和onBind ...

  6. (线性回归)Liner Regression简单应用

    警告:本文为小白入门学习笔记 数据连接: http://openclassroom.stanford.edu/MainFolder/DocumentPage.php?course=DeepLearni ...

  7. Error[Pe020]: identifier "FILE" is undefined

    Error[Pe020]: identifier "FILE" is undefined 需要添加头文件:#include <stdio.h>

  8. 数据库工具类 JdbcUtils

    什么时候自己创建工具类 如果一个功能经常用到 我们建议把这个功能做成工具类 创建JdbcUtils包含三个方法 1: 把几个字符串 定义为常量 2:得到数据库连接getConnection(); 3 ...

  9. jenkins-ant-jmeter

    jenkins下通过ant执行jmeter脚本 先下个ant 解压开来 在到jenkins中设置:系统管理-全局工具配置-ant安装-新增ant,填上name和ant-home 将jmeter的ant ...

  10. Shiro中session超时页面跳转的处理

    问题描述 shiro在管理session后,在session超时会进行跳转,这里有两种情况需要考虑,一种是ajax方式的请求超时,一种页面跳转请求的超时. 本文从这两个方面分别考虑并处理. ajax请 ...