![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 62
小球学前端
没有什么是不可能的,努力吧!
展开
-
【零基础学习Webpack】source-map---常用打包模式
source-map配置在devtool选项中,与mode同级1、source-map打包后,会生成js文件对应的.map文件,并且在js文件末尾会添加# sourceMappingURL=index.bundle.js.map2、hidden-source-map打包后,会生成js文件对应的.map文件,但在js文件末不会添加与之对应的.map文件3、inline-source-map打包后,不会生成js文件对应的.map文件,会在js文件末尾追加映射信息:可以定位到錯誤的位置。//#原创 2021-10-26 10:11:21 · 540 阅读 · 0 评论 -
【零基础学习Webpack】webpack不同环境打包
Webpack区分环境打包1、通过环境变量区分webpack --env.productionwebpack.config.js中判断env打包命令:webpack --env=productionmodule.exports = (env, argv) => { if(env.production){ //生产环境的配置 }else{ //开发环境的配置 }}2、通过不同的配置文件区分cnpm install webpack-merge -D创原创 2021-10-22 16:45:13 · 1084 阅读 · 0 评论 -
【零基础学习Webpack】资源模块,webpack-dev-serve代理配置
1、webpack打包前清除上次打包文件安装: cnpm install clean-webpack-plugin -D配置文件中插件引入: const { CleanWebpackPlugin } = require('clean-webpack-plugin')插件配置:plugins: [ ..... // 打包之前,先删除历史文件 new CleanWebpackPlugin() .....]2、资源模块资源模块是一种模块类型,它允许使用资源文件,无需配置额外的loa原创 2021-10-22 11:26:25 · 236 阅读 · 0 评论 -
【零基础学习Webpack】webpack打包JS、图片
通过上一篇博文【零基础学习Webpack】webpack简介,打包css、html我们已经了解了webpack如何打包css以及html,接下来我们一起来了解webpack如何打包编译js1、Webpack编译JS默认情况下,webpack可以识别JS并进行打包,这里所说的打包JS,其目的如下:目的:将ES6+转成ES5,从而保证,JS在低版本浏览器的兼容性。安装:cnpm install babel-loader @babel/core @babel/preset-env -Dbabel-l原创 2021-10-21 17:55:42 · 217 阅读 · 0 评论 -
【零基础学习Webpack】webpack简介,打包css、html
Webpack1、功能将多个文件合并打包,减少http的请求次数,从而提高效率对代码进行编译,确保浏览器兼容性对代码进行压缩,减少文件体积,提高加载速度检测代码格式,确保代码质量提供热更新服务,提高开发效率针对不同环境,提供不同的打包策略2、发展历史2012年3月10号,Webpack诞生。2014年2月-Webpack1;2016年12月-Webpack2;2017年6月-Webpack3;2018年2月-Webpack4;2020年10月-Webpack53、核心概念入口:原创 2021-10-20 17:21:06 · 234 阅读 · 0 评论 -
vue-elementui-admin 动态路由渲染
vue-elementui-admin 动态路由渲染在官网下载vue-elementui-admin,进行二次开发,实现动态路由渲染,用户登录后,通过接口从服务端获取权限列表,然后渲染到侧边栏。注意:此次二次开发未涉及角色(role)删选,需要角色删选权限的可以绕行1、router.js(@/router/router.js)定义constantRouterMap:放置所有权限都需要的路由表,例如登录页等。// router.jsimport Router from 'vue-router';原创 2021-05-12 16:24:03 · 3360 阅读 · 1 评论 -
大前端基础【3-2笔记】webpack优化
优化线上环境注重运行效率,开发环境注重开发效率。针对这个问题,webpack4推出了模式(mode)的用法。webpack建议我们为不同的工作环境创建不同的配置。1、不同环境下的配置1、配置文件根据环境不同导出不同的配置1、定义主要的config: const config = { mode: 'none', entry: './src/main.js', output: { filename: 'bundle.js', path: path.joi原创 2021-04-21 11:26:04 · 320 阅读 · 0 评论 -
大前端【3-2笔记】webpack中的原生HMR
HMR准备工作在下边1、HMRHot-Module-Replace:模块热替换,模块热更新。是webpack中最强大的功能之一,极大程度的提高了开发者的工作效率。热替换只将修改的模块实时替换至应用中。2、开启HMRHMR已经集成到了webpack-dev-serve中。webpack.config.js中配置:const webpack = require("webpack")devServer: { hot: true}; //插件 plugins:[ new webp原创 2021-04-11 20:08:07 · 171 阅读 · 1 评论 -
大前端基础【3-2笔记】webpack
webpackESModules存在环境兼容性问题模块文件过多,网络请求频繁所有的前端资源都需要模块化所以说我们需要一个前端模块打包(Module bundler)工具帮我们实现以下功能:新特性代码编译模块化JavaScript代码支持不同类型的资源模块注意:打包工具解决的是前端整体的模块化,并不单指JavaScript模块化。主流前端模块打包器webpack,在打包的过程中可通过loader(模块加载器)进行编译转换,也可按照需求进行代码拆分。1、初体验1、安装yarn a原创 2021-04-09 11:36:17 · 141 阅读 · 0 评论 -
大前端~vue组件间通信方式
组件间通信方式父组件给子组件传值子组件给父组件传值不相关组件传值1、父组件给子组件传值//父组件<template> <div id='app'> <child title="我是父组件传递的title"/> </div></template><script>import child from './child'export default { components: { c原创 2020-09-20 13:57:00 · 178 阅读 · 0 评论 -
大前端【3-2】Vue模板编译的过程
模板编译的主要目的是将模板template转化为渲染函数render抽象语法树:AST,使用对象的形式描述树形的代码结构模板编译是将模板字符串首先转化为AST对象,然后优化AST对象,优化的过程是在标记静态根节点,然后吧优化号的AST对象转化为字符串形式的代码,最终把字符串形式代码通过newFunction转化为匿名函数,这个匿名函数就是最终生成的函数render函数,模板编译就是啊模板字符串转化为渲染函数。入口函数,compileToFunctions(template.....)1、check原创 2020-09-09 23:39:52 · 484 阅读 · 0 评论 -
大前端【3-1-3笔记】Virtual DOM 的实现原理
Virtual DOM 的实现原理了解什么是虚拟DOM以及虚拟DOM的作用Snabbdom的基本使用Snabbdom的源码解析一、虚拟DOM1、什么是虚拟DOMVirtual DOM (虚拟DOM),是由普通的JS对象来描述DOM对象,因为不是真实的DOM对象,所以叫虚拟DOM2、为什么使用虚拟DOM手动操作 DOM 比较麻烦,还需要考虑浏览器兼容性问题,虽然有 jQuery 等库简化 DOM 操作,但是随着项目的复杂 DOM 操作复杂提升为了简化 DOM 的复杂操作于是出现了各种原创 2020-08-18 22:54:37 · 238 阅读 · 0 评论 -
大前端【3-1-2笔记】响应式原理
一、回顾1、数据响应式数据模型仅仅是普通的JavaScript对象,当我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率2、双向绑定数据改变,视图改变;视图改变,数据改变;可以使用v-model在表单元素上创建双向数据绑定3、数据驱动数据驱动是vue最独特的特性之一,开发过程中只需要关注数据本身,不需要关心数据如何渲染到视图。二、响应式原理当我们吧一个普通的JS对象传入vue实例作为data选项,vue将遍历此对象所有的属性,并使用Object.defineProp原创 2020-08-18 22:53:06 · 254 阅读 · 0 评论 -
大前端【3-1-1笔记】手写Vue Router
1、Hash模式与History模式二者的存在表现形式和原理上的区别1、表现形式的区别Hash:https://api.aibianxian.net/igameh5/#/detail/213?token=123,链接中带有#号History: https://api.aibianxian.net/igameh5/detail/213/1232、原理区别Hash:基于锚点,以及onHashChange事件,通过锚点的值作为路由地址,当地址发生变化后,触发onHashChange事件,然后根据路径决原创 2020-08-02 16:01:05 · 282 阅读 · 0 评论 -
大前端【2-2练习】模块化开发
模块化开发作业1、Webpack 的构建流程主要有哪些环节?如果可以请尽可能详尽的描述 Webpack 打包的整个过程。项目中要有文件:webpack.config.js,它是运行在nodeJs中的一个文件,需要根据commonJs规范来编写代码,文件导出一个对象,我们根据导出的对象完成一系列配置。构建流程webpack启动的时候,会加载entry配置的入口文件,递归解析entry依赖的所有module,按照module.rules的规则进行匹配转化,对Module进行转换后,再解析出当前Modul原创 2020-07-29 13:30:48 · 416 阅读 · 0 评论 -
大前端【2-2笔记】模块化开发
大前端【2-2笔记】模块化开发一、模块化概述模块化是一种思想。模块化是主流的代码组织方式,通过把复杂代码按照功能的不同划分为不同的模块,单独进行维护的方式提高开发效率,降低维护成本。二、模块化演变过程Stage1-文件划分方式将每个功能及状态数据单独存放到不同的文件中,约定每个文件都是独立的模块,使用的时候就是将模块引入到页面中,一个script标签对应一个模块,然后再代码中直接调用全局成员(变量或函数)缺点:污染全局作用域命名冲突Stage2-命名空间方式每个模块只暴露一个全局对象原创 2020-07-27 22:56:26 · 923 阅读 · 0 评论