摘要：
不知大家在前端开发实践中有没有做过这样一个效果，就是页面布局中有一个顶部通栏的搜索登录框，我们的需求就是当鼠标向下滚动时，顶部通栏始终固定在顶部，并且默认顶部是透明背景，而当页面滚动时，顶部通栏的透明度随着页面卷曲的高度增加而变大，当页面滚动距离超过某一个高度时，透明度就固定不变了。顶部通栏的固定很 阅读全文
posted @ 2020-08-21 11:10
威武的大萝卜
阅读(3334)
评论(0)
推荐(0)
摘要：
本文以webpack文章的demo为例，如果未阅读上文，并且想了解完整过程请点击回到上文目前为止，我们已经使用webpack构建了一个完整的开发环境。但是在产品阶段，可能还需要对打包的文件进行额外的处理，比如说优化，压缩，缓存以及分离CSS和JS。对于复杂的项目来说，需要复杂的配置，这时候分解配置文 阅读全文
posted @ 2020-08-21 09:36
威武的大萝卜
阅读(241)
评论(0)
推荐(0)
摘要：
Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成很多丰富的功能。如果我们需要在webpack中引入插件时，首先我们需要npm/cnpm安装需要的插件(内置插件不用安装)，其次要在webpack配置文件webpack.config.js中的plugins关键字部分添加该插件的一个实 阅读全文
posted @ 2020-08-21 09:35
威武的大萝卜
阅读(1039)
评论(0)
推荐(0)
摘要：
webpack可以将不同的文件都按照模块的方式进行处理，比如js，css等都可以通过不同的loader进行打包处理。 CSS webpack为我们提供css-loader和 style-loader两个工具来处理样式表，他们二者处理的任务是不同的。css-loader使你能够使用类似@import 阅读全文
posted @ 2020-08-21 09:33
威武的大萝卜
阅读(210)
评论(0)
推荐(0)
摘要：
Babel是一个广泛使用的转码器，它可以帮你实现以下操作： 它可以帮你将（ES6、ES7...）转换为现浏览器支持的ES5，这样你就不用考虑新标准是否被浏览器识别了。 让你能使用基于JavaScript进行了拓展的语言，比如React的JSX。 1. 安装 Babel其实是几个模块化的包，其核心功能 阅读全文
posted @ 2020-08-21 09:32
威武的大萝卜
阅读(151)
评论(0)
推荐(0)
摘要：
loaders中文翻译是装载机，从字面意思看它是用来安装某些东西的，它可以调用框架以外的脚本和工具来处理各种格式的文件，比如将Scss、Less分析转换成为CSS，将ES6、ES7转换为浏览器兼容的ES5，以及react中的JSX文件转换为JS文件。 npm install --save-dev b 阅读全文
posted @ 2020-08-21 09:26
威武的大萝卜
阅读(212)
评论(0)
推荐(0)
摘要：
什么是Source Maps Source Map字面意思就是原始地图，当开发环境中的源代码经过压缩，去空格，babel编译转化后，最终可以得到适用于生产环境的项目代码，这样处理后的项目代码和源代码之间差异性很大，当打包出现问题需要我们debug的时候，我们往往都感到很头疼，因为打包后的文件都是压缩 阅读全文
posted @ 2020-08-21 09:24
威武的大萝卜
阅读(152)
评论(0)
推荐(0)
摘要：
webpack-dev-server 如果想让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，那你就需要单独安装它作为项目依赖。 npm install webpack-dev-server -g // 全局安装 npm install webpack-dev-server --save- 阅读全文
posted @ 2020-08-21 09:20
威武的大萝卜
阅读(181)
评论(0)
推荐(0)
摘要：
image.png 一. 概述 什么是webpack 模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 为什么使用webpack 现在是网络时代，在我们的 阅读全文
posted @ 2020-08-21 09:12
威武的大萝卜
阅读(324)
评论(0)
推荐(0)
浙公网安备 33010602011771号