注意，css样式中尽量不要使用id选择器，会降低代码的复用性，尽量不要使用!important，会降低代码的复用性，尽量减少子选择器的层级。...属性说明 alias（译：别名）通过别名将原来导入路径映射成一个新的导入路径 extensions（译：扩展）数组 导入模块时，可以省略的文件后缀名 ?...它是一个小型的web服务器，可以自动监视项目文件的变化，自动刷新浏览器，其HMR方式只替换更新的部分，而不是重载页面，大大提高了刷新效率 ?...()返回一个数组，包括对象自身的所有的可枚举属性 数组的扩展 方法方法描述 copyWithin(target，start，end)在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组...fill()fill方法使用给定值，填充一个数组,fill方法用于空数组的初始化非常方便。数组中已有的元素，会被全部抹去，如果填充的类型为对象，那么被赋值的是同一个内存地址的对象，而不是深拷贝对象。
这个上下文会包括函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是其中一个属性，会在函数执行过程中用到。而this的指向则取决于函数调用位置而非函数定义位置。...优先级： p0 当使用 new 关键字来发生构造函数调用时，会自动执行如下过程： 如果构造函数本身没有return对象或者return的不是对象类型，那么 new构造函数表达式就自动返回一个实例对象...(而不是存在于原型链中)，并且还需满足enumerable: true Object.keys()会返回一个数组，包含所有可枚举属性 Object.getOwnPropertyNames()会返回一个数组..., 所以要转化为数组才能使用数组方法 var arg = Array.prototype.slice.call(arguments) // 返回一个新函数 return function (...什么情况会阻塞渲染 js脚本同步执行 css和图片虽然是异步加载, 但js文件执行需依赖css, 所以css也会阻塞渲染 11.
虽然能够正常使用，但是，对于各个配置项，并不是很清楚。这几天利用空余时间，理一下几个 loader 和 插件的使用。...', 'url-loader'] } ] webpack loader 可以是一个数组，数组的加载方式是从右向左，如上面这个配置，loader 执行的时候，会先使用 url-loader 加载文件，...不是说 webpack 自己能加载 js 吗，为什么还需要 js 相关的 loader 呢？.../Object.entries 等全局对象的转码功能 而 babel-runtime 和 babel-polyfill 就是做这些事情的。...polyfill 和 runtime 两个模块功能几乎一样，但是实现方法不同 polyfill 会污染全局对象，但是使用简单，如果不是作为公共模块提供给其它应用，可以使用此配置。
HTML的解析，也会阻塞CSS的解析。...（2）针对CSS：使用CSS有三种方式：使用link、@import、内联样式，其中link和@import都是导入外部样式。...所以CSS一般写在headr中，让浏览器尽快发送请求去获取css样式。所以，在开发过程中，导入外部样式使用link，而不用@import。如果css少，尽可能采用内嵌样式，直接写在style标签中。...，而不是样式。...将DOM的多个读操作（或者写操作）放在一起，而不是读写操作穿插着写。这得益于浏览器的渲染队列机制。
1、v-show 和 v-if的区别，v-show 和 keep-alive 的区别 答案：v-show是 CSS display 控制显示和隐藏 v-if 是组件真正的渲染和销毁，而不是显示和隐藏 频繁切换显示状态用...，提高性能 计算属性必须有返回值，没有返回值就没有意义 watch 是一个功能： watch不需要返回值，根据某个数据变化执行xx逻辑 watch可以执行异步操作 ） computed 和 watch的使用场景...答案： Object.defineProperty,以及要想一下如何深度监听、监听数组，有何缺点 如何深度监听： 如何监听数组： 不可像以下这样做会污染全局的Array 原型： 缺点： 深度监听...to return its public URL json-loader -- 注意：由于 webpack >= v2.0.0 默认支持导入 JSON 文件。...这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。
：在内存中，造成了内存浪费，如果滥用闭包是灾难性的； 3、模块化的意义： Es6使用import、export导入和导出，可以封装代码，可读性高，逻辑分明，可以按需导入模块，避免资源的消耗和浪费； 4、...前台优化方案： 初级：去掉代码中的打印信息和注释信息；压缩js和css；使用缓存页面静态文件缓存或者CDN；图片压缩； 中级：使用负载均衡nginx、docker；静动态文件分离；查询结果缓存使用redis...； 5、WebPack和Grunt和Gulp对比 Webpack可以看做是模块打包器，把你的代码转换成合适的格式供浏览器使用； 常用webpack构建本地服务器，可以让浏览器监听你代码的修改，自动刷新现实后的结果...； Gulp/Grunt是一种能够优化前端开发的流程工具，而WebPack是一种模块化的解决方案； WebPack有4个配置选项，打包速度越快，负面作用就越大，会不利于调试，文件的执行效率也有一定的影响...； 13、深拷贝和浅拷贝 深度拷贝指的是Array和Object这样的类型，浅拷贝是只拷贝一层值，而深拷贝是遍历所有的拷贝。
根据以上总结，你会对 Webpack 有一个整体的认识，这能让你在以后使用 Webpack 的过程中快速知道应该通过配置什么去完成你想要的功能，而不是无从下手。 ...provide-plugin：从环境中提供的全局变量中加载模块，而不用导入对应的文件。...在实际开发中我们可能会需要完成如下功能： 提供 HTTP 服务而不是使用本地文件预览； 监听文件的变化并自动刷新网页，做到实时预览； 支持 Source Map，以方便调试。...注意： 1、此时可能会提示webpack-dev-server不是内部命令，解决办法为在全局再次安装一下webpack-dev-server模块，或者在package.json里的scripts里加上"...即修改或模块后，保存会自动更新，页面不用刷新呈现最新的效果。 这不是和 webpack.HotModuleReplacementPlugin （HMR） 这个插件不是一样功能吗？
import导入css的数量： loader:’style-loader!...postcss-loader’ 为了使用简便，不能每次在引入css的时候加loader，则可以在命令中实现： webpack hello.js bundle.js --module-bind 'css=...webpack 配置文件 报错： output输出的路径写成这样： 而不是这样： webpack打包完成之后，显示打包成功，但是并没有生产打包的文件和文件夹，所以这里在path中切记首先要写__dirname...数组：用数组形式写多个入口文件，则会合并成指定的一个打包之后的文件 对象：分别打包成多个文件 注意：一个chunk代表一个区块，则不同的chunk会打包成不同的文件，如果output写死成一个路径，则打包之后第二个区块会覆盖第一个区块...new App(); 有关html-loader的具体代码，参见官网templating…… 对于复杂的模板引擎，安装ejs-loader 后缀格式可以是.tpl/.ejs 当引入tpl的模板文件的时候，返回的不是一个字符串
package.json 文件，要使用里面的 engines // 要注意 require 是直接可以导入 json 文件的，并且 requrie 返回的就是 json 对象 const packageConfig...// 用来返回最终读取和导入 loader，来处理对应类型的文件 if (options.extract) { return ExtractTextPlugin.extract...// 当开启 HMR 的时候使用该插件会显示模块的相对路径 new webpack.NamedModulesPlugin(), // HMR shows correct file names in...导入 extract-text-webpack-plugin 用来抽离 css 防止 css打包压缩到 js 中 const ExtractTextPlugin = require('extract-text-webpack-plugin...') // 导入 optimize-css-assets-webpack-plugin 用来压缩单独的 css 文件 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin
'), 'src/index.js' ], entry 还可以接受 function 返回的 string,array,object 值： entry: () => '....publicPath：并不是用来输出打包路径，而是在 runtime 的时候，手动修改 src 引用路径的。常常配合 css/style/html-loader 来修改。...下面内容主要对 output 里面内容做详解解释，而 externals 会放到后面进行讲解。...alias：设置导入路径的简便写法。如果你有大量的文件依赖路径非常长的话，除了使用 modules 设置参考路径之外，还可以根据 alias 来设置路径映射的 key。...如果项目不是特别复杂，这个配置选项一般用不上。 regexp: 使用正则选项，相当于就是通过正则的 test 方法，通过路径名的检查，来决定是否剔除。
如果不命中则根据头信息向服务器发起请求，使用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使用本地资源的副本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。...2．防止重复：使用 CommonsChunkPlugin 去重和分离 chunk。3．动态导入：通过模块的内联函数调用来分离代码。常见的Webpack Loader?...：将SCSS/SASS代码转换成CSScss-loader：加载 CSS，支持模块化、压缩、文件导入等特性style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载...目录清除mini-css-extract-plugin：分离样式文件，CSS 提取为独立文件，支持按需加载 (替代extract-text-webpack-plugin)loader和plugin对比？...Loader 在 module.rules 中配置，作为模块的解析规则，类型为数组。每一项都是一个 Object，内部包含了 test(类型文件)、loader、options (参数)等属性。
以处理 SCSS 文件为例： SCSS 源代码会先交给 sass-loader 把 SCSS 转换成 CSS； 把 sass-loader 输出的 CSS 交给 css-loader 处理，找出 CSS...告诉 Webpack 返回的结果 this.callback(null, source, sourceMaps); // 当你使用 this.callback 返回内容时，该 Loader 必须返回...undefined， // 以让 Webpack 知道该 Loader 返回的结果在 this.callback 中，而不是 return 中 return; }; 其中的 this.callback...会根据 Chunk 去生成输出的文件资源，每个 Chunk 都对应一个及其以上的输出文件 // 例如在 Chunk 中包含了 CSS 模块并且使用了 ExtractTextPlugin...使用了哪些插件 在开发一个插件时可能需要根据当前配置是否使用了其它某个插件而做下一步决定，因此需要读取 Webpack 当前的插件配置情况。
() ] 7.打包样式表中的图片 在样式表css中有时候会设置背景图片和设置字体文件，一样需要loader进行处理 使用url-loader和file-loader来处理打包图片文件以及字体文件..." } 性能优化配置 使用HMR优化打包构建速度 HMR对html，css，js都有不同的配置，js，和html文件默认是不使用HMR功能的 问题：如果我们只是修改了样式文件，没有被修改过的js等文件也会因为页面的刷新而被重新加载一次...，所有的代码被重新执行一次即，这种情况往往不是我们想要的效果 解决方法：使用HMR功能来完成这个需求。...它的作用是当一个模块发生变化，只会重新打包这一个模块，而不是打包加载所有模块`，极大提升构建速度 devServer: { port: 9999, open: true, // 开启HMR功能...内联会让代码体积变大，所以在生产环境不用内联 source-map 能够提供错误代码准确信息和源代码的错误位置 cheap-module-souce-map 能够提供错误代码准确信息和源代码的错误位置只能精确的行而不是列
由于异步组件最终会被编译为一个单独的文件，所以即使多个组件中使用了同一个新特性（例如：Object.keys()），那么在每个编译后的文件中都会有一份该新特性的 polyfill 拷贝。...（指针），如果修改了对象中的属性，会影响到其他模块的使用。 ...此外，模块定义变量或函数时即便使用 let 而不是 const，在导入使用时都会变成只读，不能重新赋值，效果等同于用 const 声明。...但是相比较，更推荐下面这种写法： 然后在入口文件中导入全局样式： 获取表单控件值 通常我们可以直接使用 v-model 将表单控件与数据进行绑定，但是有时候我们也会需要在用户输入的时候获取当前值...我们可以这样： 但是，在遍历数字的时候需要注意，数字的 value 是从 1 开始，而 key 是从 0 开始： 2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。
HTML的解析，也会阻塞CSS的解析。...（2）针对CSS：使用CSS有三种方式：使用link、@import、内联样式，其中link和@import都是导入外部样式。...所以CSS一般写在headr中，让浏览器尽快发送请求去获取css样式。 所以，在开发过程中，导入外部样式使用link，而不用@import。...，可以修改类名，而不是样式。...将DOM的多个读操作（或者写操作）放在一起，而不是读写操作穿插着写。这得益于浏览器的渲染队列机制。
导入模块成员使用import关键字 3. 暴露模块成员使用export关键字 */ 推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。...如果设置为development则表示项目处于开发阶段，不会进行压缩和混淆，打包速度会快一些 如果设置为production则表示项目处于上线发布阶段，会进行压缩和混淆，打包速度会慢一些...浏览器中访问http://localhost:8080地址,查看自动打包效果 */ 注意 /* webpack-dev-server 会启动一个实时打包的http服务器 webpack-dev-server...因为当我们访问默认的 http://localhost:8080/的时候，看到的是一些文件和文件夹，想要查看我们的页面 还需要点击文件夹点击文件才能查看，那么我们希望默认就能看到一个页面，而不是看到文件夹或者目录...webpack中加载器的基本使用 打包处理css文件 /* 运行npm i style-loader css-loader -D 命令, 安装处理的css文件的loader */ 2.
*标志详细配置此功能（构建你的自定义模式） process.env.NODE_ENV 被设置为生产或开发（只在构建代码中，而不是在配置中） 有一个隐藏的 none 模式，禁用一切 import() 总是返回一个名称空间对象...sideEffects：false在package.json中受支持 使用JSONP数组而不是JSONP函数->异步支持 WIP：还没有办法将运行时移动到另一个块 webpackInclude和webpackExclude...不正确的options.dependencies配置现在会抛出错误 webpacks AST 可以直接从加载器传递给webpack以避免额外的解析 当使用超过25个出口时，出口名称变短。...webpack现在按此顺序查找.wasm，.mjs，.js和.json扩展名 现在尺寸显示为kiB，而不是统计中的kB 上下文支持资源查询 在开发模式下，output.pathinfo默认处于开启状态...解析器使用StackedSetMap（类似于LevelDB的数据结构）而不是数组 在应用插件时不再设置Compiler.options 和谐相依性因重构而改变 Dependency.getReference
，而 apply 是传入一个参数数组或类数组。...for...of遍历获取的是对象的键值, for...in获取的是对象的键名;for...in会遍历对象的整个原型链, 性能非常差不推荐使用,而for...of只遍历当前对象不会遍历原型链;对于数组的遍历...（2）针对CSS：使用CSS有三种方式：使用link、@import、内联样式，其中link和@import都是导入外部样式。...所以CSS一般写在headr中，让浏览器尽快发送请求去获取css样式。所以，在开发过程中，导入外部样式使用link，而不用@import。如果css少，尽可能采用内嵌样式，直接写在style标签中。...，而不是样式。
CSS样式或者IMG图片等内容，我们有两种方式： 1.在JS中基于ES6 Module模块规范，使用import导入，这样webpack在编译合并JS的时候，会把导入的资源文件等插入到页面的结构中（绝对不能在...需要的内容 ->Babel一套 ->CSS处理的一套 ->eslint一套 ->webpack一套 ->其它的 有sass css 处理器，最新版本有 的处理内容（项目中使用less，我们需要自己额外的安装...编译处理，最后可以预览当前开发的项目成果（在webpack中安装了webpack-dev-server插件，基于这个插件会自动创建一个WEB服务[端口号默认是3000]，webpack会帮我们自动打开浏览器...编译，把编译后的内容放到浏览器中运行，所以如果项目中使用了less，我们需要修改webpack配置项，在配置项中加入less的编译工作，这样后期预览项目，首先基于webpack把less编译为css，然后在呈现在页面中...值（当前本次循环内唯一即可） 4.只能出现一个根元素 5.给元素设置样式类用的是className而不是class 6.style中不能直接的写样式字符串，需要基于一个样式对象来遍历赋值 JSX是虚拟的
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
