Webpack,这个名字想必每个前端开发者都不会陌生。它就像一个神奇的工具箱,帮助我们处理各种前端工程化问题。今天,我们就来打开这个工具箱,深入了解 Webpack 最基本、也是最核心的功能之一:代码转换。
2024年08月25日
Webpack,这个名字想必每个前端开发者都不会陌生。它就像一个神奇的工具箱,帮助我们处理各种前端工程化问题。今天,我们就来打开这个工具箱,深入了解 Webpack 最基本、也是最核心的功能之一:代码转换。
2024年08月25日
最近用vue正在写一个项目,本来以为vue很简单,但是还是发现是有一些坑在里面,现在边写边进行总结。
首先遇到的就是页面中img中标签的图片src的加载问题,我开始以为是图片应该和组件放在一块,但是发现不行,总是报错。
./~/css-loader?sourceMap!./~/vue-loader/lib/style-rewriter.js?id=data-v-0d4c5d14!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/SkuPop.vue
2024年08月25日
rem 是 CSS3 新增的相对长度单位,是指相对于根元素 html 的 font-size 计算值的大小。
默认根元素的 font-size 都是 16px的。如果想要设置 12px 的字体大小也就是 12px/16px = 0.75rem。
2024年08月25日
现在我们每次更改src目录下文件的时候,都需要手动运行一下打包命令,这是非常不利于开发体验的,因此,我们需要改良一下,引入webpack-dev-server。
2024年08月25日
首先要安装css的loader
npm install css-loader style-loader --save-dev
然后在webpack.config.js中配置如下代码
2024年08月25日
CSS 是前端领域中进化最慢的一块。由于 ES2015/2016 的快速普及和 Babel/Webpack 等工具的迅猛发展,CSS 被远远甩在了后面,逐渐成为大型项目工程化的痛点。也变成了前端走向彻底模块化前必须解决的难题。
CSS 模块化的解决方案主要有两类。一类是彻底抛弃 CSS,使用 JS 或 JSON 来写样式。Radium,jsxstyle,react-style 属于这一类。优点是能给 CSS 提供 JS 同样强大的模块化能力;缺点是不能利用成熟的 CSS 预处理器(或后处理器) Sass/Less/PostCSS,`:hover和 `:active` 伪类处理起来复杂。另一类是依旧使用 CSS,但使用 JS 来管理样式依赖,代表是 CSS Modules。CSS Modules 能最大化地结合现有 CSS 生态和 JS 模块化能力,API 简洁到几乎零学习成本。发布时依旧编译出单独的 JS 和 CSS。它并不依赖于 React,只要使用 Webpack,可以在 Vue/Angular/jQuery 中使用。
2024年08月25日
微前端由ThoughtWorks 2016年提出,将后端微服务的理念应用于浏览器端,即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。
美团已经是一家拥有几万人规模的大型互联网公司,提升整体效率至关重要,这需要很多内部和外部的管理系统来支撑。由于这些系统之间存在大量的连通和交互诉求,因此我们希望能够按照用户和使用场景将这些系统汇总成一个或者几个综合的系统。
2024年08月25日
【编者按】本文为《Building modular javascript applications in ES6 with React, Webpack and Babel》的简译内容,讲述了作者基于ES6,使用React、Webpack、Babel构建模块化JavaScript应用的编程心得。
如果你想用React构建一个新的JavaScript应用,而且你还想实践ES6语法中的新特性,此外,你甚至想创建一些可重用组件并发布到NPM上,那么你究竟应该怎样实现这些需求?你如何将ES6代码发布到NPM,又如何在后续的项目中使用这些代码?我花了一些时间解决上面这些问题,现在我愿意与你们分享我习得的新知识。