他乡踏雪

摘要： 生成环境与开发环境打包配置 使用package.json配置npm run开启不同的打包配置 。。。webpack基本使用最后一篇博客 在上一篇博客中详细的演示了webpack开启本地服务和热更新，这个超级爽的技能你有没有发现问题呢？反正我是发现了，那就是只适合开发环境下使用，生成环境打包显然不合适 阅读全文

摘要： 第一个webpack本地服务 webpack本地服务相关的一些操作指令与应用 一、第一个webpack本地服务 需要下载安装的加载器和插件： 一定要注意先在全局安装webpack-dev-server，然后再在局部工作区间安装。然后测试代码非常简单，只需要一个html默认生成结构，css给body设 阅读全文

摘要： 抽离图片文件打包到指定路径下 压缩抽离的图片资源 配置生成html中的图片路径 一、准备测试环境 首先需要准备打包插件（这里打包文件还不是用来处理图片文件的）： 通过上面的注释，可以看到上面的打包配置还不能处理图片资源，所以在测试上面的打包插件配置是否成功的情况下暂时不要在css中出现引用图片路径的 阅读全文

摘要： webpack打包js代码与提取公共js代码分析 webpack提取公共js代码示例 一、分析 webpack默认打包js代码时，是将从入口js模块开始，将入口js模块所依赖的js以及模块逐层依赖的模块，全部以入口js模块为主体全部打包至生成的对应js文件中。即使是多个js入口依赖链模块依赖了同一个 阅读全文

摘要： html-webpack-plugin clean-webpack-plugin 一、html-webpack-plugin 由于打包时生成的css样式文件和js脚本文件会采用hash值作为文件命名的一部分，每一次调试打包结果都需要手动修改名称，这种做法就违背了webpack的自动化打包的初衷，而且 阅读全文

摘要： PostCss是什么？ PostCSS在webpack中的基本应用 一、PostCss是什么？ 如果有深入学习PostCss需求的话可以参考大漠的资料：https://www.w3cplus.com/blog/tags/516.html 大概来说postcss是一个用来处理css的系统程序，它不是c 阅读全文

摘要： webpack抽取CSS文件 CSSTreeShaking 一、webpack抽取CSS文件 抽取CSS文件的插件：mini-css-extract-plugin 详细参考：https://www.npmjs.com/package/mini-css-extract-plugin 但是前提还是需要下 阅读全文

摘要： webpack自身实现词法分析的JSTreeShaking webpack-depp-scope-plugin插件实现作用域分析的JSTreeShaking 一、webpack词法分析的JSTreeShaking示例 示例测试的文件结构： 主入口文件index.js： 依赖文件demo.js:注意依 阅读全文

摘要： 安装webpack webpack核心概念：入口、输出、加载器、插件、模块、模式 一、安装webpack 1.安装webpack之前需要安装nodejs环境，在使用nodejs环境自带的包管理工具npm进行下载，由于网络环境问题，建议安装先安装淘宝的镜像cnpm来实现下载。 由于webpack从3版 阅读全文

摘要： less的安装与基本使用 less的语法及特性 一、本地使用less的方法 Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。是一种动态样式语言，属于css预处理语言的一种。 下载后找到less.js：less.js-2.5.3\dist\less.j 阅读全文

摘要： AMD CMD ES6模块化 各个模块化规范对比理解 一、AMD 在上一篇js模块化入门与commonjs解析与应用中详细的解析了关于commonjs模块化规范，commonjs采用的用同步加载方式，这导致它并不是浏览器理想的模块化规范。因为浏览器需要到服务器加载文件，请求事件远远大于本机读取的时间 阅读全文

摘要： JS模块化的基本原理 commonjs规范 commonjs在前端模块化中的基本使用 AMD与CMD规范剖析博客链接 一、JS模块化基本原理 在JS没有提出来模块化的时候，开发JS项目比较简单，同时也比较杂乱，第一个问题就是全局变量的管理，为了解决这个问题基本上都使用了命名空间和闭包两个主流的解决方 阅读全文

摘要： 需求确认 本地开发 构建发布 代码上线 一、项目开发的整体流程 1.1项目经理（PM）提出需求； 1.2项目经理（PM/UI）构建原型与设计图； 1.3开发工程师（FE/BE）前后端分离开发； 1.4测试（QA）代码，通过发布上线； 1.5用户访问。 二、日常开发 2.1基于代码服务器code se 阅读全文

摘要： 基本应用 修饰符 为什么要在HTML中使用事件监听 Demo 一、基本应用 1.通过v-on指令绑定事件，例如： <button v-on:click="">提交</button> ； 在vue官方教程上第一个示例是直接在表达式中写入一个可执行计算代码： 2.通过methods实现事件函数绑定，例如 阅读全文

摘要： v-for渲染列表 维护状态 数组变异方法与替换数组 $set、$remove 对象属性实现列表渲染 一、v-for渲染列表 语法：v-for="item in items" 先来看示例： 1 <style> 2 *{ 3 margin: 0; 4 padding: 0; 5 list-style: 阅读全文