业余前端的职业经历

其实吧，create-react-app 脚手架，帮我们配置好了很多东西，而且那么多的配置都隐藏起来了 也不用看见那么“心烦了”这不 我们前端去一家公司的时候，一般来说项目都比较成熟了，不需要我们去配置了，但是这个就表示你不用去了解这么配置了吗？最好还是了解下我用creact-react-app 新创建了一个项目 吧 css样式文件改成了。scss 就直接报错了好像默认不支持了 sass. 这个时候就需要我们 去解决了这个同时也给大家了一个处理问题的思路，正常来说 如果一个小白看见怎么配置

其实好很多做前端的小伙伴，提到脚手架可能会想到 vue的cli ，不过确实没错这个就是脚手架。但是昨晚在群里一个小伙伴提出了，vue-elemnt-admin,layuimin(基于layui的一个后台管理系统模板) 这个也是脚手架，我反驳到这个严格意义上 并不能算是脚手架，他的反驳是 只要能实现快速开发的架子其实都可以称为脚手架。这个我就有点疑惑了，他也列举出来 百度上的一些博文文档，有人写博客的时候 确实会叫 layuimin是脚手架。好了 让我们来复习下 什么是 脚手架。首先脚手架的含义就

也感谢一个前端同行发现的问题，之前我用webpack4.x 在ie上做了兼容性的配置后来 webpack更新到5 之后 我那个配置就不行了webpack5.x 打包之后 文件还是箭头函数 导致ie上还是不行 哪怕用babel 转 core-js 也不行两个选择1. 要不将你的版本降低到 4.x 算是一个解决方法吧2. 把箭头函数关闭掉environment: { arrowFunction: false }output: { ...

其实这个代码分割指的是 js 代码的分割 不是最终打包成一个 js文件 可以打包成多个 js文件如果不分割的话 最终所有的资源都会打包到 一个js文件中 当然图片资源可能是在外面的像css的代码分割 有单独的插件进行处理的其实最简单的 代码分割就是 开启多入口文件 配置 entry:{ main:"./src/index.js", test:"./src/test.js" }, output:{ filename:'[name].[hash:8]

看过 尤大神 直播关于讲解 vue3.0得特性的同学 肯定也看到了 tree shking 这个特性了先来讲解下 什么是 tree shking 先拿生活上的例子来说 字面意思是 摇晃树枝 因为树上可能有很多死的页面 在树枝上 我们可以通过摇晃 树 来吧树上的一些 死得树叶 给摇晃下来 占个地方 却没啥用 这个意思带到我们的代码中 就是 一些 我们定义得代码 却从来没有用到的死代码 就不要打包到 最后的文件中 这个是 tree shaking 在webpack中得意思不过要满足

热更新听着好像很高大上的样子，事实上也确实这样，至少再没学习之前是这样的首先说一下 为什么需要这个家伙，在学习的webpack的时候 我们可能体验不出来那种感觉 但是 再实际开发中 我们 可能要在 入口文件中 引入了很多 文件 如果不开启热更新的话当我们改动 其中的一个js文件的时候 引发了整个项目全部重新加载一次 那种感觉是不是太难受了记得博主当初改动了一个非常大的项目 基本上改完之后要 过快十秒页面才会刷新 想起来 都是很崩溃的瞬间...

如果代码没错误的话 应该是你把css文件从js中提起出来了，建议开发环境还是放在一起比较好 人家的热更新好像针对的是 js文件 最后到生产环境 再分离出来

如果你想把打包的文件 比如 图片文件 字体文件 css 文件 都独立存放到属于自己的目录的话比如 css/ imgs/ fonts/ 那么 开发环境 和 生产环境 文件的输出路径是不同的统一配置就是 如果只是开发的 话也可以配成 outputPath:"/imgs" 这样// 字体等一些其他的文件 { exclude:/\.(html|js|css|gif|png|jpg|scss)$/, loader:'file-loader', optio

在一个css文件中 引入了 一个图片资源body{ min-width: 1024px; background: url('./images/bg.jpg');}然后打包之后发现无法在 页面中引入 我的打包是在 dist文件夹下 生成了 一个 imgs文件夹 里面存放的图片解决方法是我是吧 outputPath:‘imgs’, 改成了 outputPath:’…/imgs’, 就可以了{ test:/\.(png|jpg|gif)$/, loader

webpack.config.js// 引入path核心库const path=require('path');// 提取cssconst MiniCssExtractPlugin=require('mini-css-extract-plugin');// 压缩cssconst OptimizeCssAssetsPlugin = require ('optimize-css-assets-webpack-plugin');// 处理html文件const HtmlWebpackPlu

兼容性问题 一直都是前端程序员比较头疼的 问题 这个意味着你要多写代码 让一些经常喜欢划水的程序员 很难受 ，也得学习 每个浏览器的规范 这个给一些不爱学习的程序员又带来 苦恼 ，这些都是因为什么呢 这么苦逼！ 可能是因为爱情吧(博主此刻正在听)有句话说的话 你想要演出一个人的真实情况,先去经历下人家经历过的！ 就像 蝙蝠侠中的那个小丑的演员 哈 演的是真的好 看完之后觉得 这个人就是小丑 现在想起来 那个面部表情还是 很难忘这个时候 可能有的童鞋说了 想要去演寡妇 难道先成为寡妇嘛 哈哈上述意

其实吧 这个eslint 不要也行 ，对代码的语法 和书写 格式 进行规范 全球这么多前端开发人员 每个人员都有一个自己的 书写代码的习惯 问题是 如果 没有一个规范的话特别是去一个新的公司 如果老员工写的代码 注释 没有注释 该换行的地方没换行 瞎写这样是不是很让人崩溃 ，该空格的地方没有空格甚至现在有的公司 再提交git的时候会进行 代码质量检测 如果 不过关 不让提交不让提交意味着今天的活 可能白干了 这其实都是再对那些 随便写代码的人的约束其实吧 开发的时候 没必要这样 每次写完代码

开发环境使用 线上环境 还有很大的优化空间// 开发环境配置 能让代码运行即可const path=require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const { CleanWebpackPlugin }=require('clean-webpack-plugin');const MiniCssExtract = require('mini-css-extract-plugin');module.

不知道为什么 我已经在全局中安装了 webpack 我想着 直接 在cmd中输入 webpack 就好了 但是不行 还是得本地安装 webpack webpack-cli 才可以解决方法npm i webpack webpack-cli -D

"devDependencies": { "html-webpack-plugin": "^4.3.0", "webpack-html-plugin": "^0.1.1" }我是包下错了 下成了 远古时期的 注意上面俩个包的区别// 其实 不需要我们配置 什么文件名字 路径什么的 plugins:[ new HtmlWebpackPlugin() ],“html-webpack-plugin”: “^4.3.0”, 才是正常的...

安装loadernpm i style-loader css-loader sass-loader node-sass -D然后就是在webpack配置文件中进行配置 webpack.config.js module:{ rules:[ {test:/\.scss$/i,use:['style-loader','css-loader','sass-loader']} ]}

众所周知 typescript 是javascript的一个超集，扩展了js的功能更加的严格的一种语法,阿里的前端开发就是采用的ts开发的ts开发项目能在开发阶段发现90%的问题 往后 ts也必将成为主流vue3.0也慢慢开始支持ts了1.好了废话不多说了 还是 直接上代码了安装依赖npm install typescript awesome-typescript-loader -D...

这个是最近我在测试webpack-dev-server给我报的错误我二话不说先直接cnpm istrip ansi -D但没什么卵用我先上网搜索了一下很多事npm丢包造成的 什么重新安装node.js 或者npm这个时候我就去国外的网站看看人家怎么解决然后就看见了一个相同的再搞webpack-dev-server的时候和我相同的问题resolve:{ ...

天天直接使用creat-react-app 也是用腻了 偶尔想试试自己动手搭建一个基于webpack的react项目毕竟 你用脚手架建立的也是基于webpack建立还是老样子废话不多说直接上代码1.在桌面新建立一个空白文件夹 webpack-react初始化项目 打开命令行 npm init -y这个时候文件夹中会出现一个package.json文件2.安装依赖npm insta...

可能没学过webpack的童鞋也知道热更新这个词这个概念和ajax有点类似 就是我们每次更改代码之后 webpack是局部刷新界面 而不是整个页面刷一下之前我们使用webpack-dev-server 我们修改代码就是整个页面刷新这次我们就来配置一下 让webpack支持热更新还是废话少说直接上代码了const webpack=require('webpack'); //引入ｗｅｂｐａｃ...

使用过vue的童鞋可能知道路由懒加载图片懒加载懒加载说的这么高大上其实就是在我们需要的时候加载不需要的时候先不要加载减轻首次加载服务器的压力和用户的体验但是vue脚手架说到底底层还是基于webpack构建的进来就来讲讲webpack中的懒加载问题创建了一个具有基础功能的webpack项目需求:我在页面上创建一个按钮当点击按钮的时候加载这个文件...

webpack中有一种优化就是抽离公共代码先举一个小例子说明一下比如:我们创建一个多页面入口的代码在webpack.config.js中entry:{ index:'./src/index.js', other:'./src/other.js'},output:{ filename:'bundle.[name].js', path:path.resolve(__dirn...

1.在讲解之前先说一个比较简单的webpack优化,我们都知道jquery是一个不依赖其他的插件的一个js函数库 但是我们webpack 解析的时候 会去寻找里面的依赖库 这个时候会给打包增减点时间我们可以让webpack 不去解析 jquery中的依赖关系 就可以 达到webpack的优化效果了module:{ noParse:/jquery/, // 不去解析jquery中的依赖关系...

很多童鞋在学习webpack之前可能都知道webpack有俩种配置情况 一种是开发环境下的配置 一种是生产环境根据生产环境和开发环境 写出不一样的代码 和请求地址举一个简单的例子 比如请求地址 如果是开发环境的话可能是我们本地的地址let url="";if(ENV==='dev'){ // 判断是否是开发环境 但是这个全局变量ENV我们在哪里定义的呢 url="http://...

有时候我们要引入bootstrap ui样式 并不引入 bootstrap.js文件 很多时候只是引入css文件这个时候 就来简单说一下1.在入口的文件引入bootstrapimport "bootstrap" 如果上面这种方式引入的话 是会报错的错 它会显示找不到路径页面上的样式并没有显示 他找到是 文件下的js文件正确引入方式是import "bootstrap/dis...

其实跨域问题一直都是我们前端同学比较头疼的东西,后端帮你解决还好,如果不帮你解决还得靠自己同时跨域也是面试必问的问题。相较于 jsonp 和cors跨域来说　　webpack是比较新的解决跨域的方法我也曾听过某个公司的技术经理说到 我们比较喜欢听到 面试者 说webpack 解决跨域 大概就是这个意思所以说啊 技术这种东西 虽然最新的 公司不用 但还看得出来 你一直在跟进最新的技术 侧...

这个插件是用来 帮我们清除 打包之后 dist 目录下的其他多余或者无用的代码因为我们之前可能生成过其他的 代码 如果不清楚的话 可能 多个代码掺杂在一起 容易把我们搞混乱了clean-webpack-plugin 插件 就是这样由来的 每次生成代码之前 先将 dist 目录 清空下面就说下 它的使用吧1.安装npm i clean-webpack-plugin -D2.引入con...

有的时候 我们修改一次代码 就npm run build 或者 npm run dev 这样可能很不舒服我们就像能不能 我们写完之后他自动帮我们打包在webpakck配置中确实有这样的功能把下面的代码加到webpack.config.js中就可以 下面是 坚挺的配置watch:true, //监控代码变化watchOptions:{ poll:100, // 每秒询问我 100次...

这个时候 如果你的webpack配置没啥问题 而且 npm run build打包后也没问题的话　就去看看的你　输出的html文件 是不是index.html网站默认寻找路径是 index.html 其他名字的html 服务器是不会找到的new HtmlWebpackPlugin({ template:'./index.html', // 模板文件 filename:'index.ht...

那是和html-webpack-plugin 发生了冲突 同时也因为 file-loader版本升级了如果你的file-loader 版本是 5.* 那就应该是了在webpack.config.js中{ test:/\.(html|htm)$/i, use:'html-withimg-loader', // 解析 html中的图片资源},{ test:/\.(pn...

css3中新增的样式可能还存在兼容性问题 这个时候就需要我们添加浏览器内核的前缀我们可以使用webpack自动帮我们添加 前缀需要安装俩个 插件cnpm i postcss-loader autoprefixer -D// 在 webpack.config.js中{ test:/\.css$/,// css-loader解析css语言　style-loader将其解析到浏览器上...

我再使用最新版webpack加载样式文件的时候 在style-loader 加载器中 配置了一下{ loader:'style-loader', options:{ insertAt:'top' }}我第一次使用的实证配置 然后就报了 上面的错误本意 是将解析后的样式 插入到 head 标签的位置 为 上 中 下 默认是 head标签的 最下面这样做 会导致 用...

很多童鞋可能都接触过 vue-cli创建的vue脚手架项目 虽然用着很方便但很多人却不知道其中怎么引入的,为什么@符号就能代表src文件 今天我就来总结下 我之前的经验 也算是复习一下在引入vue之前 我们得现有一个具有基础功能的webpack 这个我之前有讲过的先安装所需要的依赖包npm i vue // vue的框架文件vue-loader // vue的...

eslint 又叫做代码质量检测 说白了就是帮你检测代码中的问题1.还是和老样子一样直接开始走程序了首先你先配好一个基础的webpack项目 这个我在之前有讲过的 就不再重复 讲解了安装 依赖 npm i -D eslint eslint-loader2.在package.json文件中 配置 eslint 的启动命令 (加到 scripts里面)"eslint_...

之前我说了一个入门的webpack4 现在我尝试着搭建一个稍微完整点webpack项目开始之前还是显示环境的搭建 想让项目支持热更新(本地修改代码浏览器上会实时更新)1.建立一个空的文件夹 2.先初始化项目 npm init 一路回车到底 0.03.安装相关的依赖npm i -Dwebpack //webpack的核心功能包webpa...

我这里安装的是全局的webpack 在执行的时候 只需在写好的项目文件下 执行命令webpack就会压缩完成了今天说的是压缩 图片和字体等资源举个例子:在css文件中引入 图片.box{ width: 200px; height: 200px; background: #000066; transition: 0.5s; backgroun...

1.如果你是用的 extract-text-webpack-plugin 插件进行提取的话 很不幸 在webpack4中他已经不支持要想运行成功的话 有俩种方法 1.1 npm install extract-text-webpack-plugin@next 安装最新的beta版本 1.2 你也可以把你的webpack版本降低到3.* 版本2.如果你的webpa...

webpack作为当前最火的 前端项目构建工具，目前已经更新到了第四代版本，第五代也在开发中在桌面上 新建立一个 空的文件夹 就叫做webpack吧在开始之前确保你的电脑上有 最新的node.js环境1.初始化项目 （进入文件夹内部 鼠标右键打开powershell）npm init 一路回车到底2.安装依赖包npm i -D webpack //...

我们在项目中使用VUE很多时候都是使用的是cli 直接创建一个基于webpack的脚手架工具他怎么运行的 我们不关心但是 如果我想剖析下 他是怎么运行的 webpack众所周知 他是一个打包工具他的难就难在 去理解 他怎么执行的现在我就是从零开始 搭建一个可以执行 .vue文件的环境再开始之前 现在你的电脑上安装npm环境在桌面上建立一个英文名称的文件件 记住不要起名为 ...

我们使用npm安装插件的时候默认是安装最新的版本 如果我们要指定安装某一版本只需要在 插件名称后面加个 @版本号就可以了比如 我们要安装webpacknpm install webpack@2.3.2 --save-dev就会在package.json里面出现 2.3.2版本的webpack了...