webpack系列
文章平均质量分 71
时清云
自强不息,厚德载物;日拱一卒,功不唐捐;海纳百川,有容乃大。这世上没有最强的人,只有想变强的人,做一个简单真实的自己。
展开
-
webpack之node path.resolve()的解析
作用:path.resolve()方法将一系列路径或路径段解析为绝对路径。语法:path.resolve([from ...], to)说明:将参数 to 位置的字符解析到一个绝对路径里。参数说明from 源路径to 将被解析到绝对路径的字符串用法:var path = require('path');var webpack = require('webpack');var...原创 2018-12-11 23:03:22 · 918 阅读 · 1 评论 -
gulp的总结
关于gulp这个打包工具我以前用的很少,最近在项目中才去逐渐去掌握它,相比于目前比较火的webpack,我想原理都是相同的。万法同源。 其实它主要有四个属性,只要掌握这四个属性就行了。 第一个:src gulp.src(); 例如:gulp.src(‘client/templates/*.js’) .pipe(jade()) .pipe(minify()) .pipe(g...原创 2018-02-11 11:50:59 · 288 阅读 · 0 评论 -
前端工程化解决方案
前端工程化是将软件工程相关的方法和思想应用到前端开发中,从而提升前端开发效率、提高产品质量、降低开发难度、减少公司成本的方法和工具。前端工程化贯穿整个前端项目各个阶段,包括代码规范、流程规范、分支管理、程序开发、前后端联调、自动化测试、应用构建、系统部署和监控、运维等。前端工程化是前端开发的趋势,它可以提高开发效率、降低成本、提高代码质量。然而,在实施前端工程化时需要根据项目实际情况进行定制化选型,合理选择工具和框架。优化和测试是工程化中不可忽视的部分,它们对于提升应用性能和稳定性至关重要。转载 2023-08-25 17:16:13 · 107 阅读 · 0 评论 -
关于webpack中proxy的总结
今天有人问我关于webpack中proxy相关的问题,于是我想着把proxy好好总结一下,分享给更多的人。本文大纲:1、用途首先声明一下:proxy只用于开发阶段,说白了就是用于本地开发调试。在开发阶段中,由于浏览器同源策略的原因,当本地访问后端就会出现跨域请求的问题,所以在webpack中配置一个开发服务器webpack-dev-server(后面简称devServer服务器),在devServer服务器中配置proxy,相当于浏览器发出请求时,会先到本地服务器devServer,然后devSe原创 2021-08-20 17:28:24 · 5727 阅读 · 0 评论 -
webpack中的style-resources-loader加载全局css变量
我们在项目中经常会遇到这种场景,抽离了一些公用的样式,并且还会定义一些变量,比如:variables , mixins , function,之前都是在每个样式文件中手动的@import导入。style-resources-loader的作用就是避免重复在每个样式文件中@import导入,在各个css 文件中能够直接使用 变量和公共的样式。例如我们抽离了这样一个scss文件作为公用的样式。common.scss内容如下:$themeColor: #3472FC; //主题色$hoverColor:原创 2021-02-09 16:33:53 · 2883 阅读 · 0 评论 -
treeShaking和sideEffects详解
什么是treeShaking?treeShaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。treeShaking有什么用?至于说有什么用呢?它的作用就是将程序中没有用到的代码在打包编译的时候都删除掉,这样能减少打包后包的体积大小,减少程序执行的时长和传统DCE(Dead Code Elimination)有什么区别?传统DCE是消除不可能执行的代码,而treeShaking虽然也是DCE新的实现方式,但是它是通过消除没有用到的代码来达到目转载 2021-01-26 22:07:09 · 674 阅读 · 0 评论 -
非常详细的解答了5个webpack疑问
原创 卤代烃 卤蛋实验室 2020-10-28链接:https://mp.weixin.qq.com/s/BHSihethgh_zH0K1J3qwnA1.webpack 中,module,chunk 和 bundle 的区别是什么?说实话我刚开始看 webpack 文档的时候,对这 3 个名词云里雾里的,感觉他们都在说打包文件,但是一会儿 chunk 一会儿 bundle 的,逐渐就迷失在细节里了,所以我们要跳出来,从宏观的角度来看这几个名词。webpack 官网对 chunk 和 bundle转载 2021-01-21 15:41:23 · 357 阅读 · 0 评论 -
webpack报错:Invalid options object. PostCSS Loader has been initialized using an options object that d
在做webpack配置css兼容的时候出现了postcss-loader插件不兼容问题配置代码如下:出现的错误原因是postcss-loader这个版本不支持在webpack。config。js文件中这么写解决办法:在项目根目录下新建一个postcss.config.js文件配置如下:webpack.config.js文件配置如下:把options选项注释掉。...转载 2020-12-31 23:35:37 · 9792 阅读 · 5 评论 -
webpack系列教程一之初识webpack
最近在详细的学习webpack,准备进行一系列的总结。教程一是先简单的认识一下webpack。webpack简介1.1 webpack 是什么webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。在webpack看来,前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bun原创 2020-12-15 21:54:22 · 144 阅读 · 0 评论