1. manifest

manifest存储了webpack的chunk相关的信息。具体为一个对象,或者包含runtime的一段代码。其中包含着一个chunkId,已经对应chunkId的相关信息,例如异步模块的

文件名和路径

2. HashedModuleIdsPlugin

将打包出来的moduleId从自增的数字换成相对的文件路径的hash值,使得moduleId在文件位置和内容不变的情况下,不会发生变化。

3. webpack4 CacheGroup可参考的配置

// 打包node_modules,排除lodash
venders: {
test: /node_modules\/(?!(lodash)\/)/,
name: 'vendors-common',
chunks: 'all'
},
// 只打包lodash,并命名为 vender-lodash
lodash: {
test: /node_modules\/lodash\//,
name: 'vender-lodash'
},
//将多个异步加载的模块共用的部分打进utils中, reuseExistingChunk 是重用已经存在的chunk
//防止多个模块中出现重复的chunk
default: {
minSize: 0,
minChunks: 2,
reuseExistingChunk: true,
name: 'utils'
}
// 只打包异步模块中的chunk
'async-vendors': {
test: /[\\/]node_modules[\\/]/,
minChunks: 2,
chunks: 'async',
name: 'async-vendors'
}
// 这里定义的是在分离前被引用过两次的文件,将其一同打包到common.js中,最小为30K
common: {
name: "common",
minChunks: 2,
minSize: 30000
}

4. webpack-dev-sever可参考的配置

// 开发环境设置本地服务器,实现热更新
devServer: {
contentBase: path.resolve(__dirname, 'static'),
// 提供给外部访问
host: '0.0.0.0',
port: 8388,
// 允许开发服务器访问本地服务器的包JSON文件,防止跨域
headers: {
'Access-Control-Allow-Origin': '*'
},
// 设置热替换
hot: true,
// 设置页面引入
inline: true
},
// 文件输出配置
output: {
// 设置路径,防止访问本地服务器相关资源时,被开发服务器认为是相对其的路径
publicPath: 'http://localhost:8188/dist/js/',
},
// 插件配置
plugins: [
// 热更新替换
new webpack.HotModuleReplacementPlugin()
]

webpack散记的更多相关文章

  1. webpack散记---代码分割 和 懒加载

    webpack methods ES 2015 Loader spec (1)webpack methods方法 require.ensure //可以动态加载依赖 []:dependencies / ...

  2. webpack散记---提取公共代码

    (1)作用: 减少代码冗余 提高加载速度 (2)来源 commonsChunkPlugin webpack.optimize.CommonsChunkPlugin (3)配置 { plugins:[ ...

  3. webpack散记--Typescript

    Typescript 1.js的超集 官网:typescriptlang.org/tslang.cn 来自:微软 安装:官方的  npm i typescript ts-loader --save-d ...

  4. webpack知识点散记

    1.今天学习webpack  ,刚开头就碰到了钉子,因为现在都是4+的版本,用以前的老命令不好使,如下例子及解决办法 不好用:  webpack3的   打包文件   webpack a.js b.j ...

  5. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  6. webpack之傻瓜式教程

    接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...

  7. 细说前端自动化打包工具--webpack

    背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...

  8. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  9. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

随机推荐

  1. VIN码识别:让VIN码采集so easy!

    近几年汽车后市场呈喷井式发展,在过去的半年,汽车后市场规模已高达万亿级,产业前景广阔,与此同时行业运营也受信息区域化.数据不统一的制约,让企业面临着效率低下.规模化运行困难的痛点. 在汽车配件市场中, ...

  2. Ubuntu卡在logo界面

    对于这个问题,我也是在最近一次偶然的机会中发现的. 我重装了了Ubuntu 18.04, 很多东西需要重新配置,  有个刚性需求就是配置shadowsocks实现***,对于从windows向linu ...

  3. Python递归算法入门

    递归是一种算法,它在编程里面有着广泛的应用: 1. 递归必须满足哪两个基本条件? 一.函数调用自身 二.设置了正确的返回条件 2. 思考一下,按照递归的特性,在编程中有没有不得不使用递归的情况? 答: ...

  4. Spring Cloud(九):配置中心(消息总线)【Finchley 版】

    Spring Cloud(九):配置中心(消息总线)[Finchley 版]  发表于 2018-04-19 |  更新于 2018-05-07 |  我们在 Spring Cloud(七):配置中心 ...

  5. CSP201609-1:最大波动

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...

  6. Django创建App报错

    在django下创建APP项目时遇到的坑 python manage.py startapp app01 报错内容如下: 解决:找到报错中的文件夹151行删除items(),)中的逗号即可 在命令行下 ...

  7. LeetCode 104——二叉树中的最大深度

    1. 题目 2. 解答 如果根节点为空,直接返回 0.如果根节点非空,递归得到其左右子树的深度,树的深度就为左右子树深度的最大值加 1. /** * Definition for a binary t ...

  8. 春招实习汇总(7个offer)

    转载出处 刚从北京到家,总算也可以歇歇了,最近一段时间真是忙于奔命的感觉,也确实体会到了找工作的艰辛,总而言之,求职之路,如人饮水,冷暖自知. 我想把这段时间找工作的体验和经历分享出来告诉大家,让大避 ...

  9. com技术学习

    百度百科概念 COM是微软公司为了计算机工业的软件生产更加符合人类的行为方式开发的一种新的软件开发技术.在COM构架下,人们可以开发出各种各样的功能专一的组件,然后将它们按照需要组合起来,构成复杂的应 ...

  10. Deeplearning——Logistics回归

    资料来源:1.博客:http://binweber.top/2017/09/12/deep_learning_1/#more——转载,修改更新 2.文章:https://www.qcloud.com/ ...