流浪のwolf

摘要： 1. css-loader 翻译css ，可以把sass / less 代码翻译成 css 代码 ； 2. imgage-loader 加载并压缩图片文件 3. source-map-loader 加载额外的map文件，方便断点调试，但体积比较大； 4. babel-loader ES6转换ES5 阅读全文

摘要： 首先，它们的共同点三者都是前端构建工具，grunt和gulp早期比较流行，现在 webpack 是主流； 区别：grunt 和 gulp 基于 任务和流 ； webpack 基于入口文件，webpack 会自动解析入口文件所需要加载的所有资源文件，然后用不同的loader翻译不同的文件，使用 plu 阅读全文

摘要： webpack 的运行流程是一个串行的流程，从启动到结束会依次执行以下步骤 ； 1. 初始化参数：在配置文件，读取并合并参数，得到最终的参数 ； 2. 开始编译：拿着上一步的参数初始化 Compiler 对象，加载所有配置的 plugin ，开始执行编译 3. 确定入口：根据配置中的 entry 找 阅读全文

摘要： 1. 社区庞大，活跃，紧跟技术的前言，不断发展迭代 ； 2. 专注处理模块化的项目，可以开箱即用 ； 3. 通过 loader 扩展，可以把所有类型的文件解析打包 ； 4. 通过plugin 扩展 ，完整好用，灵活 ； 阅读全文

摘要： webpack 是模块化的打包工具，webpack 里面所有文件都是模块 ，通过 loader 转换文件，比如 sass less 转换 css 文件使用 css-loader , 通过 plugin 注入钩子 ，最后输出由多个模块组合成的压缩文件，webpack 专注于构建模块化项目 ； 阅读全文

摘要： 为什么有的时候使用require引入组件不会报错，有的时候就会报错，需要加上default就不会报错 ？ webpack 支持 CommonJS和 ES6模块打包，当我们引用组件的时候，在 script 标签内使用的是 ES6 的语法且使用 export default 默认导出。但是，requir 阅读全文

摘要： export function tranListToTreeData(list, rootValue) { // list是最完整的数组 let arr = []; // 记录儿子 list.forEach((item) => { // 记录是否有儿子 if (item.parentId rootV 阅读全文

摘要： 组织结构是一个公司的灵魂 ，多使用树型结构 ； 页面格式： 渲染头部 ： 头部代码： <template> <el-row type="flex" justify="space-around" style="height: 40px; width: 100%" align="middle" > <! 阅读全文

摘要： 1. 打包的时候 ， 通过插件把css代码单独抽离出来使用 link 引入 2. 打包的时候 ， 通过webpack内置插件optimization 把 公共的js代码抽离出来 ps：打包之后，代码冗余，体积大 ，原因是 相同的模块 在不同的入口之间没有得到复用 ，bundle 之间比较独立 ，bu 阅读全文

摘要： 首屏加载优化是对于 SPA 来说的 ，首次加载所有的 html css js 所需的文件 ，后面就不会因为用户对页面的操作而跳转页面 ，没有跳转页面如何展示不同的内容呢 ？ 使用 Vue 的路由机制 ，实现不同内容的展示 ； SPA 的优点 ： 1. 页面切换速度快 2. 页面内容的改变，不需要重新 阅读全文