主要是我看到今天要介绍的技术后已经震惊的开始说胡话乱编故事了。 那么好，让我们快点进入正题吧，让我们先从生活中的小孔成像讲起。 一、 生活中的小孔相机 你看到下面这张图片时，看到了什么？ ?...这就是生活中的小孔成像，当窗户开的很大时，我们看到的只是模糊的影子，就像上图一样。但如果把窗户关的很小，甚至用窗帘来遮挡使得只露一个洞，墙上的倒影就会变为这样： ?...把倒影颠倒过来，和真实的窗外场景做下对比，你会看到惊人的相似： ? 这就是我在29. 小孔相机中阐述过的小孔成像的生活中的实例，你可以再次阅读这篇文章，了解细节。...三、偶发式的反小孔相机 如果说生活中这种偶发式的小孔相机已经让你感觉很神奇了的话，那么偶发式的“反小孔”相机会更加让你震惊。下面这个场景中，(a)图的窗户构成了一个相机，(c)图是墙上的像。...但经常我们会发现由于信噪比不够，获得的投影比较模糊。但如果在输入视频中仔细搜索，我们会发现更好的参考帧。比如下图中，我们可以用a - b得到d，d中有较为模糊的投影 ? ?
4、 工作是否有助于个人生活的提升，并非取决于外在条件，而是在于我们的工作态度，以及面对挑战时我们能汲取何种体验与感受。...5、 对职业的热爱与奉献，不见得就是“工作狂”——这个词只适用于在眼中除了工作，没有其他目标及责任的人。工作狂只看得见工作上的挑战，只愿学习与工作相关的技能，而且无法从其他活动中得到心流。...11、 希腊文的“idiot”（英语中是“白痴、傻瓜”的意思）一词，原意是“独居的人”，可见在他们的观念中，人若是断绝社群的互动，心智上便会陷入低能。...15、 还有一项发现出乎我们的意料：家人的关系越亲近，家庭的争端就越多。 一旦家庭真正出现问题时，父母与子女却会为了避免争吵而相互回避。 物极必反，爱的越多，恨的越多；平平淡淡，反而无爱无恨。...一般而言，生长于大家庭的子女，较有机会发展技能、面对挑战，也较能体验到生活中的心流。 靠自身素质与相互理解，省去不必要的争吵或争辩，专注于解决问题及个人追求。
大数据大发现 Gartner最近发布的商业智能与分析平台魔力象限中，Qlik和Tableau这两家力压老牌巨头如SAS、SAP、IBM等，几乎独占魔力象限领导者的宝座。...很荣幸，在上月31号举办的首届中国（杭州）工业大数据产业发展高峰论坛上，钱塘数据有幸和Qlik面对面，Qlik首席顾问王波也在场为500多位与会业内伙伴们作了《大数据大发现》演讲。...而在互联网、大数据时代，谁能够跟随潮流，并且能够激活更多的用户，谁就是投资者眼中的香饽饽。...而SAS、SAP、IBM等的数据分析平台，都是企业级的高级分析平台，他们的变量多达几百上千，非普通人可以玩转的，其使用者通常局限于个别数据科学家手中，因而在今天时髦的人人都是数据分析师——商业智能与分析平台的领导者魔力象限中...，必然找不到自己的位置。
-- jQuery代码容器 --> 然后，我们npm run dev看一下，会发现页面中已经有jQuery代码所生成的文字，说明我们引入jQuery...你可以在每一个需要jQuery的页面这样引入。但是这样会很麻烦，我们如果通过这样的方式引入了jQuery，但是整个项目中却并没有写一行jQuery代码，那么webpack也是会把它打包进去的。...，使全局都可以使用jQuery new webpack.ProvidePlugin({ $:"jquery" }) 这样就可以了，但是别忘了把main.js中通过import引入的jQuery...会发现也同样出现了jQuery生成的文字。 ...-- vue容器 --> {{message}} 然后我们试一下npm run dev，页面打开之后我们发现没有hello vue，f12看下控制台
因为list.html是一个空页面，不包含id为container的元素。因此，并不会加载jquery。再次执行webpack，打开list.html会发现页面没有再插入script标签。...那么很快就会发现第二个问题：1.detail.js中也包含了jquery。这样的话，多个文件的共同部分只是拆分，而没有合并。 当使用config配置文件时，则很好解决上面的问题。...}) ] }; 为了让文章紧凑一点，配置文件中相同的地方没有再列出来了，下同。.../css/list.css"); 然后运行一遍webpack，会发现没有任何改变，list.css依然是打包进了list.js中。...上面修改配置，不过是将loader的使用规则放到了配置中，并没有其他变化。
NPM 安装 jQuery，项目根目录下运行以下代码 npm install jquery --save webpack配置 在项目根目录下的build目录下找到webpack.base.conf.js...文件，在开头使用以下代码引入webpack，因为该文件默认没有引用， var webpack = require('webpack') 然后在module.exports中添加一段代码， // 原有代码...main.js里导入jQuery import 'jquery' 在Vue组件里使用 $ or jQuery 写了操作dom的代码 接着启动项目 npm run dev 但是编译却报错了： http...eslint 检查 机智的朋友肯定想到跟eslint有关，没错，这时候需要做的下一步就是要修改根目录下.eslintrc.js文件了，在改文件的module.exports中，为env添加一个键值对 jquery...，console.log($('选择器')) ，你会发现成功使用jQuery获取到了DOM。
image 运行npm init -y初始化项目，使用npm管理项目中的依赖包 创建项目基本的目录结构 使用npm i jquery -s安装jquery类库 创建main.js并书写隔行变色的代码逻辑...image 在项目根目录中创建webpack.config.js 由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在webpack.config.js中配置这两个路径...来进行打包，发现报错，此时需要借助于package.json文件中的指令，来进行运行webpack-dev-server命令，在scripts节点下新增"dev": "webpack-dev-server..."指令，发现可以进行实时打包，但是dist目录下并没有生成bundle.js文件，这是因为webpack-dev-server将打包好的文件放在了内存中 把bundle.js放在内存中的好处是：由于需要实时打包编译...，所以放在内存中速度会非常快 这个时候访问webpack-dev-server启动的http://localhost:8080/网站，发现是一个文件夹的面板，需要点击到src目录下，才能打开我们的index
"webpack": "^4.42.1", "webpack-cli": "^3.3.11"} 在入口文件引用和打印jQuery： import $ from 'jquery'console.log...然后我在dependencies下安装依赖： "dependencies": { "html-webpack-plugin": "^4.0.3", "jquery": "^3.4.1", "webpack...这两种情况，如果都没有引用jQuery的情况下，也都不会把jQuery打包。...接着我在node_modules把follow-redirects、debugs、ms都删了，把axios里面的package.js的dependencies给删了，然后执行npm install,发现没有下载...其实发布的包如果没有必要，很少会默认帮你下载，比如bootstrap，依赖jQuery，怕你原本就下载了引起冲突，也不会在dependencies里面安装jQuery而是： "peerDependencies
⑤ 运行 npm install jquery –S 命令，安装 jQuery ⑥ 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果 运行：发现语法错误，颜色也没有改变，因为上面 index.js...在项目中配置 webpack ① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置： [在这里插入图片描述] [在这里插入图片描述] ②...在 package.json 的 scripts 节点下，新增 dev 脚本如下： [在这里插入图片描述] ③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建 [...是没有兼容性的，所以在 index.html 导入 mian.js 替换掉之前的 index.js [在这里插入图片描述] 运行： [在这里插入图片描述] 5....main.js 可以查看到 index.js 和 jquery.js 这两个文件的内容 [在这里插入图片描述] [在这里插入图片描述]
其中chunkFilename中包含以下的文件生成规则： [id] 会被对应块的id替换. [name] 会被对应块的name替换（或者被id替换，如果这个块没有name）....有没有发现打包的时间已经被大大缩短，并且也只产生了两个隐藏文件。...是不是发现打包的时间进一步缩短了。...这里发现直接定位到了app.js，并且报出了在第二行出错，点击去看其中的报错如下： ? 发现问题定位一目了然。...node 版本5.0以上，babel-core版本6以上需要如此配置 这是一个 Webpack 支持，但文档里完全没有提到的特性 （应该马上就会加上）。
运行npm install jquery -s命令，安装jQuery 通过ES6模块化的方式导入jQuery，实现列表隔行变色的效果 <!...', 'red') $('li:even').css('background-Color', 'pink') }) 将js文件导入index.html之后，发现没有效果，这时我们就需要webpack...webpack中的默认约定 大家可能有个疑问，就是打包的时候为什么会打包index.js这个文件，它是怎么寻找的路径等问题。 在webpack4和5的版本中，有如下的默认约定，找不到就会报错。...这种打包实际上时虚拟打包，并不是每次保存打包之后将main.js进行了修改，当我们修改代码保存自动打包之后，我们发现页面UI并没有变化，那是因为main.js实际上没有修改，访问自动打包修改后的页面需要访问本地...8080端口 在这个http服务器内才能访问到修改后的内容，我们前面说了修改后的js并没有保存到main.js中，那它保存到哪里去了？
--生产依赖: 就是比如我们的javascript使用了jquery,而我们最终的程序也需要这个包(最终程序正常运行需要的)。这个包就在package.json下的dependencies中。...采用（2.1~2.3三种方式） 2.1 全局安装 npm install jquery 或者 npm install jquery -g 安装完成后，会发现在package.json中并不存在这个包的依赖...执行该条指令后产生的后续效果为： (1)会把jquery包安装到node_modules目录中 (2)会在package.json的dependencies属性下添加jquery (3)之后运行npm...执行该条指令后产生的后续效果为： (1)会把jquery包安装到node_modules目录中 (2)会在package.json的devDependencies属性下添加jquery (3)之后运行npm.../node_modules 下（运行 npm 命令时所在的目录），如果没有node_modules目录，会在当前执行npm命令的目录下生成node_modules目录。
，这种方式有没有让你回想到 maven 的 maven install 命令，这种奇怪的熟悉感~ 等 jquery 包安装完成后，我们就可以在 node_modules 目录下查看到刚刚安装的包 然后在项目中进行引用...浏览器查看 JS 运行正常 以上方式也是传统的引包方式，跟 webpack 仍是没有半点关系。...以三个问题收尾，我们来说下一个插件 html-webpack-plugin 2）html-webpack-plugin 我们上面通过访问 webpack server 给定的 URL 地址，发现不能直接访问到我们的...image-20210828235635349 我们发现会生成冗余的文件，并没有把旧文件删除，这难道每次打包都要进行手动删除吗？当然不是！...3）所遇问题 ① 问题 1：实际运行报错的行数 与 源代码的行数 不匹配 那么要解决这个问题也很简单，就需要在 webpack.config.js 中添加以下配置： 配置完查看结果，至此我们可以发现
然而，一些第三方的库(library)可能会引用一些全局依赖（例如 jQuery 中的 $）。这些库也可能创建一些需要被导出的全局变量。...image.png 发现即使在入口 index 引入 jquery，但是 ui 找不到该变量，这还是因为模块引入变量的作用范围是模块内，正确的用法是哪里使用，就在哪里引用（虽然webpack 底层只会对相同模块加载一次...可是对一些老的三方库，并没有引用 jquery，怎么办呢，他们默认 jquery 是全局变量可以直接引用。 要解决这个问题，我们把 jquery 作为我们应用程序中的一个全局变量就可以了。...使用 ProvidePlugin 后，能够在通过 webpack 编译的每个模块中，通过访问一个变量来获取到 package 包。...如果 webpack 知道这个变量在某个模块中被使用了，那么 webpack 将在最终 bundle 中引入我们给定的 package。
，重新进行项目的打包 命令没有结束，会一直监听源代码有没有变化，每当保存源代码，都会自动打包 注意：这里又会出现问题，自动打包后，vscode，右键打开 index.html 文件会发现，没有变化。..."; /*导入jquery，用$符号接*/ //导入样式，在webpack中，一切都是模块 import "....//即先调用css-loader，再调用style-loader，前面没有loader后给会webpack，webpack把style-loader处理的结果，合并到/dist/mymain.js中，生成最终打包好的文件...通过 myindex.js 导入图片 import $ from "jquery"; /*导入jquery，用$符号接*/ //导入样式，在webpack中，一切都是模块 import "....会覆盖webpack.config.js中的model选项 } 执行 npm run dev 命令后，会发现生成的 js 文件、图片文件（只有 base64 格式的图片会生成）和 index.html
，如此沉重jQuery在不那么复杂的 SPA 中完全可以予以摒除；最兴奋的是户界面完全可以用嵌套的组件树来描述，再也不用写重复代码or拷贝(如果撸好组件封装)，生活原来可以如此美好，这是我不得不欢喜非常...痛并幸福着，生活就是这样。...等一套组合，以及所经历的姿势变换历程；这 Vue 的使用确立了前端之路新的里程碑；而 Gulp，Webpack 的学习更使得对工具有了新的认识——只有你想不到，没有做不到。...此一篇絮叨，是对过去 Vue + Webpack 组件化开发实践的一些总结和分享。...上述言论，还有些补充；对于 vue 入门，这是一件非常容易的事儿；但到现实协作中开发，诸多东西都是挺需要探讨一番的；譬如使用 vue-resource 来替代 JQuery-Ajax；再比如 vue 虽然为组件
第3点我想稍微论述一下，如果看过我之前写的《如何写一个webpack插件（一）》，会发现，webpack会将文件内容存在compilation这个大的object里面，方便各种插件，loader间的调用...否则超过大小限制的图片无法生成到目标文件夹中 处理js，将es6或更高级的代码转成es5的代码。...下面让我来介绍一下在使用过程中的一些优化点。...，而且，它将构建的内容放入内在中，能够获得更快的构建编译性能，因此是官方非常推荐的一种构建方式。...使用module.noParse针对单独的react.min.js这类没有依赖的模块，速度会更快。
2.优化第二步--三方类库分离 2.1 单个三方类库分离 2.1.1 第一步：修改入口文件 抽离的第一步是修改入口文件，把我JQuery加入到入口文件中: config/webpack.entry.js...优化插件，并进行相关配置，如下： new webpack.optimize.CommonsChunkPlugin({ //name对应入口文件中的名字，我们起的是jquery name:...配置完成后，我们先删掉以前打包的dist目录，然后用webpack再次打包，你会发现jquery被抽离了出来，并且我们的entry.js文件变的很小。 ? ?...修改代码如下： new webpack.optimize.CommonsChunkPlugin({ //name对应入口文件中的名字，我们起的是jQuery name:['jquery'...2.2.4 打包 webpack 配置完成后，我们先删掉以前打包的dist目录，然后用webpack再次打包，你会发现jquery、vue被抽离了出来。 ? ?
，比如加到 6 然后你可以在代码中改变按钮的文字，随便改点东西，会发现，页面刷新后，数字重新变为 0 这显然不是我们想要的，想要的是，能不能把页面的状态保存了，也就是更改了代码后，页面还是保存了数字为...webpack.HotModuleReplacementPlugin() ], 完事之后，继续更上边的操作，点击按钮，数字增加，然后更改内容，发现还是没有保存状态。。。...其原理就是把网页依赖的基础模块抽离出来打包到 dll 文件中，当需要导入的模块存在于某个 dll 中时，这个模块不再被打包，而是去 dll 中获取。 安装 jquery，并在入口文件引入。.../build/webpack.dll.config.js", 运行 npm run build:dll 你会发现多了一个 dll 文件夹，里边有 dll.js 文件，这样我们就把我们的 jquery 这些已经单独打包了...需要再安装一个依赖 npm i add-asset-html-webpack-plugin 它会将我们打包后的 dll.js 文件注入到我们生成的 index.html 中.在 webpack.base.config.js
云服务器
ICP备案
云直播
腾讯会议
实时音视频
