摘要：
一、相对路径和绝对路径 相对路径 相对路径是指以当前的文件作为起点，相较于当前目录的位置而被指向并且加以引用的文件资源。 /表示当前文件所在目录的根目录 ./表示当前文件所在目录 ../表示当前文件所在目录的上一级目录 绝对路径 绝对路径是指在当前文件的电脑硬盘上真正存在的路径,必须准确，起点是系统 阅读全文
摘要：
搭建本地服务器 在没有搭建本地服务器之前，我们为了在浏览器中看到代码成果，一般是这样操作的： 执行npm run build打包命令，将编译后的文件打包到dist目录 借助于Vscode中的live server插件，打开index.html文件查看效果 但是以上这种操作会有一个弊端：那就是在我们每 阅读全文
摘要：
使用vue-loader@15版本来处理.vue文件 首先要说明一点，vue-loader的不同版本在处理.vue文件的时候其配置是不同的，所以要分开来处理。 下面是使用webpack来打包一个.vue单文件组件的配置： 安装vue2.+版本 npm i vue@2.6.12 -D 编写一个简单的. 阅读全文
摘要：
认识ESLint ESLint是一个静态JavaScript代码分析工具(static program analysis),也就是ESLint可以在代码没有运行的时候就对代码进行分析并且对模式匹配错误的代码进行报告，ESLint的目的是保证代码的一致性和避免错误，可以帮助我们在项目开发中建立统一的团 阅读全文
摘要：
认识source-map 一般情况下真实运行在浏览器上的代码是经过webpack等前端构建工具打包之后的代码，在打包的过程中会对代码做压缩和混淆丑化，所以这就会导致运行在浏览器的代码和我们在开发阶段写的源代码其实是有差异的，主要体现在以下几个方面： 源码中ES6+的语法会通过babel工具转化为ES 阅读全文
摘要：
Babel是什么 在当前的前端项目开发中，虽然我们不会直接的去接触Babel，但是Babel在整个前端工程化中起着非常重要的作用,比如： 开发中使用的ES6+语法需要Babel 开发中使用的TypeScript语法需要Babel 开发React项目时的JSX语法都需要Babel 那么Babel究竟是 阅读全文
摘要：
一、认识PostCSS工具 PostCSS是什么？ PostCSS是一个通过将JavaScript来转化css样式的工具，它可以帮助我们实现css样式的转化和适配，比如自动添加浏览器前缀来让一些css样式在不同版本的浏览器中都可以生效，比如统一原生html标签如button在不同浏览器中的样式差异等 阅读全文
摘要：
认识Plugin webpack中的两个核心内容一个是loader，另外一个就是plugin。 loader用来在webpack打包的过程中用于对特定的模块类型：比如css\less，图片，字体等资源进行转换； plugin用于将loader转化后的资源执行更加广泛和多样化的任务，比如打包体积优化、 阅读全文
摘要：
webpack中mode配置 在使用webpack打包的过程中，如果不设置mode属性，那么每次执行npm run build的时候总会抛出一个警告，用来提示我们设置mode属性： WARNING in configuration The 'mode' option has not been set 阅读全文
摘要：
一、webpack默认打包 一般来说，对于安装了webpack和webpack-cli命令行工具的项目，可以直接在根目录的终端输入webpack的命令来对项目进行打包，前面说过这种直接在终端输入webpack命令的方法会导致优先使用的是全局安装的webpack来进行打包的，如果要实现使用局部的web 阅读全文
摘要：
为什么需要webpack？ 随着前端开发变得越来越复杂，开发一个应用往往会遇到以下问题： 模块化开发是重要的前端开发思想，但是只有现代浏览器仅仅支持ESModule，并且需要在脚本script标签中声明属性type值为module；然而前端开发中有多种模块化方案可供选择，比如CommonJS和AMD 阅读全文