摘要: 目录 前端为什么要进行打包和构建? module chunk bundle区别 loader和plugin的区别 babel和webpack的区别 webpack如何实现懒加载 如何产出一个lib babel-polyfill babel-runtime区别 为什么proxy不能被polyfill 阅读全文
posted @ 2021-03-07 23:36 全情海洋 阅读(16904) 评论(0) 推荐(1) 编辑
摘要: module chunk bundle的区别 module 各个源码文件,webpack一切皆模块 chunk 多模块合并成的, 如entry import()异步加载 splitChunk代码分割 bundle 最终的输出文件,有可能好多个打包文件 1.优化babel-loader 尽可能少的应用 阅读全文
posted @ 2021-03-07 23:14 全情海洋 阅读(237) 评论(0) 推荐(0) 编辑
摘要: 最近新启动了个pc端的项目,项目要求兼容IE,想必各位前端都清楚,要想拿下IE这个破地,必须用上babel。 个人平时对这方面也没有过分的关注,于是乎各种网上寻找解决方案,这一找,发现有时候网络就跟个历史博物馆一样,大部分问题的解决方案基本都是过时了的。通篇看下来,基本全是推荐使用babel-pol 阅读全文
posted @ 2021-03-07 21:08 全情海洋 阅读(12587) 评论(1) 推荐(2) 编辑
摘要: 关于开启多进程 1.项目较大,打包较慢,开启多进程能提高速度 2.项目较少,打包很快,开启多进程会降低速度(进程开销) happyPack多进程打包js单线程,开启多进程打包,提高构建打包速度 在生产环境配置,开发环境配置也可以, 安装happyPack webpack.config.js cons 阅读全文
posted @ 2021-03-07 19:30 全情海洋 阅读(424) 评论(0) 推荐(0) 编辑
摘要: 为什么要使用Dll 通常来说,我们的代码都可以至少简单区分成业务代码和第三方库。如果不做处理,每次构建时都需要把所有的代码重新构建一次,耗费大量的时间。然后大部分情况下,很多第三方库的代码并不会发生变更(除非是版本升级),这时就可以用到dll:把复用性较高的第三方模块打包到动态链接库中,在不升级这些 阅读全文
posted @ 2021-03-07 16:45 全情海洋 阅读(436) 评论(0) 推荐(0) 编辑
摘要: weppack.config.js配置,该文件在根目录下的build文件夹里头 module.exports = { entry: { main: './src/index.js', }, resolve: { extensions: ['.js', '.jsx','.vue','.ts'], al 阅读全文
posted @ 2021-03-07 14:39 全情海洋 阅读(237) 评论(0) 推荐(0) 编辑
摘要: ESLint(https://eslint.bootcss.com/) 能对 JS 基本语法错误/隐患进行提前检查,使用步骤 安装loader npm install eslint-loader eslint --save-dev eslint 是语法检查的包 eslint-loader 是 esl 阅读全文
posted @ 2021-03-07 12:24 全情海洋 阅读(287) 评论(0) 推荐(0) 编辑
摘要: 解决方法: 1.由后台解决,后台在服务端添加配置,检测到404页面,直接跳转指向到 index.html 的 路径 2.由前端解决,不采用 mode:"history" 模式,采用 hash 路径;就可以解决404的问题 虽然这样会显得 url 很丑 用vue-cli脚手架搭建单页面项目 route 阅读全文
posted @ 2021-03-07 12:03 全情海洋 阅读(328) 评论(0) 推荐(0) 编辑
摘要: 目前比较主流的框架如Vue、React等,都是单页面应用的框架。一般我们在使用它们的时候,会使用官方脚手架来创建项目,所以我们不必关心单页面应用路由是如何实现的,因为脚手架中已经帮我们做好了配置。在具体项目开发中,我们只需要做相应的路由配置即可。 那么在实际项目中,手动搭建项目的前提下,我们需要如何 阅读全文
posted @ 2021-03-07 11:44 全情海洋 阅读(409) 评论(0) 推荐(0) 编辑
摘要: 当我们工作本地开发某一个需求的时候,需要将这块需求的请求地址转发到某个后端同事的本地服务器或某个服务器上,就需要用到代理。然后其他页面的请求都走测试环境的请求。那么我们该怎样拦截某个请求,并将其转发到我们想要转发的接口上呢? 这个时候就需要用到 webpack-dev-server 主要看 devS 阅读全文
posted @ 2021-03-07 10:43 全情海洋 阅读(281) 评论(0) 推荐(0) 编辑
摘要: 当我们工作本地开发某一个需求的时候,需要将这块需求的请求地址转发到某个后端同事的本地服务器或某个服务器上,就需要用到代理。然后其他页面的请求都走测试环境的请求。那么我们该怎样拦截某个请求,并将其转发到我们想要转发的接口上呢?只有开发环境需要代理, 这个时候就需要用到 webpack-dev-serv 阅读全文
posted @ 2021-03-07 10:37 全情海洋 阅读(445) 评论(0) 推荐(0) 编辑
摘要: 使用webpack打包ts文件,就需要安装 ts-loader 安装: npm i ts-loader typescript -D webpack.config.js 文件中添加解析 typescript 代码的 loader const HtmlWebpackPlugin = require('h 阅读全文
posted @ 2021-03-07 08:17 全情海洋 阅读(337) 评论(0) 推荐(0) 编辑
摘要: http-server 安装 workbox-webpack-plugin 安装 相信很多朋友都有耳闻过 PWA 这门技术, PWA 是 Progressive Web App 的英文缩写, 翻译过来就是渐进式增强WEB应用, 是Google 在2016年提出的概念,2017年落地的web技术。目的 阅读全文
posted @ 2021-03-07 00:23 全情海洋 阅读(472) 评论(0) 推荐(0) 编辑