1. manifest

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

文件名和路径

2. HashedModuleIdsPlugin

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

3. webpack4 CacheGroup可参考的配置

  1. // 打包node_modules,排除lodash
  2. venders: {
  3. test: /node_modules\/(?!(lodash)\/)/,
  4. name: 'vendors-common',
  5. chunks: 'all'
  6. },
  7. // 只打包lodash,并命名为 vender-lodash
  8. lodash: {
  9. test: /node_modules\/lodash\//,
  10. name: 'vender-lodash'
  11. },
  12. //将多个异步加载的模块共用的部分打进utils中, reuseExistingChunk 是重用已经存在的chunk
  13. //防止多个模块中出现重复的chunk
  14. default: {
  15. minSize: 0,
  16. minChunks: 2,
  17. reuseExistingChunk: true,
  18. name: 'utils'
  19. }
  20. // 只打包异步模块中的chunk
  21. 'async-vendors': {
  22. test: /[\\/]node_modules[\\/]/,
  23. minChunks: 2,
  24. chunks: 'async',
  25. name: 'async-vendors'
  26. }
  27. // 这里定义的是在分离前被引用过两次的文件,将其一同打包到common.js中,最小为30K
  28. common: {
  29. name: "common",
  30. minChunks: 2,
  31. minSize: 30000
  32. }

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

  1. // 开发环境设置本地服务器,实现热更新
  2. devServer: {
  3. contentBase: path.resolve(__dirname, 'static'),
  4. // 提供给外部访问
  5. host: '0.0.0.0',
  6. port: 8388,
  7. // 允许开发服务器访问本地服务器的包JSON文件,防止跨域
  8. headers: {
  9. 'Access-Control-Allow-Origin': '*'
  10. },
  11. // 设置热替换
  12. hot: true,
  13. // 设置页面引入
  14. inline: true
  15. },
  16. // 文件输出配置
  17. output: {
  18. // 设置路径,防止访问本地服务器相关资源时,被开发服务器认为是相对其的路径
  19. publicPath: 'http://localhost:8188/dist/js/',
  20. },
  21. // 插件配置
  22. plugins: [
  23. // 热更新替换
  24. new webpack.HotModuleReplacementPlugin()
  25. ]

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. 结合BeautifulSoup和hackhttp的爬虫实例

    网页页数的改变 headers头不添加

  2. 提权基础-----mysql-udf提权

    1.总结关于udf提权方法 通过弱口令,爆破,网站配置文件等方式得到mysql数据库帐号密码,---还要能外连 (1).将udf.dll代码的16进制数声明给my_udf_a变量 set @my_ud ...

  3. 180611-Spring之RedisTemplate配置与使用

        logo 文章链接:https://liuyueyi.github.io/hexblog/2018/06/11/180611-Spring之RedisTemplate配置与使用/ Spring ...

  4. myeclipse tomcat部署按钮点击没反应

    进入workspace目录,删除.metadata\.plugins\org.eclipse.core.runtime\.settings\com.genuitec.eclipse.ast.deplo ...

  5. win 下通过dos命令格式化磁盘

    该命令可以解决好多问题,比如: 1.u盘作为启动后,如何恢复成正常的u盘 1.win + r ->cmd 进入dos模式 2.输入diskpart后回车,点击确定,进入diskpart命令的交互 ...

  6. mpvue笔记

    简介: mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,为小程序开发引入 Vue.js 开发体验 我觉得就像scss一样,写的时候方便,最后还是要转成css文件 搭建 ...

  7. vue watch监控对象

    1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValue) { console. ...

  8. leetcode-反转链表

      转载至:https://blog.csdn.net/fx677588/article/details/72357389 反转一个单链表.   示例: 输入: 1->2->3->4 ...

  9. spark相关脚本解析

    spark-shell/spark-submit/pyspark等关系如下: #spark-submit 逻辑: ########################################### ...

  10. python中spilt()函数和os.path.spilt()函数区别

    Python中有split()和os.path.split()两个函数: split():拆分字符串.通过指定分隔符对字符串进行切片,并返回分割后的字符串列表. os.path.split():将文件 ...