webpack
Sun.sir
这个作者很懒,什么都没留下…
展开
-
Webpack 性能优化(基础)
Webpack 性能优化(基础)一、跟上技术的迭代(Node,Npm,Yarn)最好更新到最新版本,因为最新版肯定是对于之前的版本做了一定的优化二、在尽可能少的模块上应用 Loader来提升webpack的打包速度三、尽可能少的使用Plugin并确保Plugin的可靠性四、合理的应用resolve配置项中的参数五、使用 DllPlugin 提高打包速度六、控制包文件大小七、thread-loader,paraller-webpack,happypack 多进程打包八、合理使用sourceM原创 2020-06-23 22:44:45 · 141 阅读 · 0 评论 -
如何编写一个Loader
比如我现在实现一个简单地字符替换的Loader,该怎么做?这是业务代码:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pVkrhUw5-1592838633564)(https://i.loli.net/2020/06/21/wVLN7SvMTUbaBAe.png)]我要把Sun替换成别的字符:为了方便使用,可以先下载个依赖npm install loader-utils --save-dev在根目录下创建loaders文件夹,里边比如创建一个replac原创 2020-06-22 23:11:01 · 468 阅读 · 0 评论 -
Webpack:PWA离线缓存
什么是 Service Worker?Service Worker 是一种 Web Worker。它本质上是一个与主浏览器线程分开运行的 JavaScript 文件,可以拦截网络请求、缓存资源或从缓存中检索资源、传递推送消息基于web worker(一个独立于JavaScript主线程的独立线程,在里面执行需要消耗大量资源的操作不会堵塞主线程)在web worker的基础上增加了离线缓存的能力本质上充当Web应用程序(服务器)与浏览器之间的代理服务器(可以拦截全站的请求,并作出相应的动作->原创 2020-06-11 21:29:30 · 718 阅读 · 0 评论 -
Webpack系列(七):css文件的代码分割
怎么对css文件进行代码分割?如果我们想让引入的css文件,在打包时,单独生成一个css文件到dist目录的话,可以这样做先下载一个插件npm install --save-dev mini-css-extract-plugin在webpack.config.js中进行配置const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = { plugins: [new MiniCssE原创 2020-06-10 20:34:28 · 366 阅读 · 0 评论 -
Webpack系列(系列六):Code Splitting 和 Webpack的关系
Code Splitting是什么?Code Splitting也就是代码分割的意思,本质上跟Webpack是没有关系的因为我们会发现,我们通过Webpack打包的js文件,都会放在一个文件当中,那么如果我的业务代码很长,一个js文件可能有2mb大小,那么都放在一个js中,用户是不是在访问页面的时候,都得每次加载这么多的资源?这就造成一个隐性问题,加载时间过长,给用户的体验感不好!!!所以就需要代码分割了,提高页面性能那么之前我们做代码分割都是手动来去做,很麻烦,但是Webpack提供的配置可以很方便原创 2020-06-09 20:43:48 · 204 阅读 · 0 评论 -
webpack(系列五):development和 production 模式的区分打包
为什么要区分打包呢?是因为如果开发环境的配置和生产环境的配置都放在一个文件里,那么配置的多,想要去切换这两种模式的打包,就显得很麻烦了,所以,建议把他们区分开来1. 首先在项目根目录下创建三个文件存放到build文件夹webpack.common.js 存放两个模式下的公共配置webpack.dev.js 存放development模式下的配置webpack.prod.js 存放production模式下的配置2.webpack.co原创 2020-06-08 23:23:59 · 1057 阅读 · 0 评论 -
webpack系列(四):搭建Vue和React
前文: 我在使用webpack的过程中,遇到一个坑,这个坑跟cnpm和npm 有关系,所以当去下载依赖的时候,记得如果用cnpm下载的话,都用cnpm下载就可以,要不然打包和运行的时候很容易会出现bug,当然也可以给node_modules文件夹删掉,重新cnpm i 或 npm i 进行全部下载 都是可以的一、先简单说下搭建React环境1. 下载依赖npm install --save-dev @babel/preset-reactnpm insstall react react-dom原创 2020-06-07 19:32:15 · 237 阅读 · 0 评论 -
Webpack(系列三):热模块更新和使用 Babel处理 ES6语法
热模块更新为什么要用热模块更新呢?比如,我做了css样式的修改,当我想要在不刷新当前页面html的前提下,让样式渲染出来,就需要用到热模块更新了,相关配置:在webpack.config.js文件中,对devServer和plugins进行配置const webpack = require('webpack') // 移入webpack 在plugins中需要用到它的热模块加载方法module.exports = { devServer:{ open:true,原创 2020-06-06 21:58:35 · 785 阅读 · 0 评论 -
Webpack(系列二):什么是loader?
什么是loader?Loser就是一个打包的方案,他知道对于某一个特定的文件,Web pack应该如何的进行打包。本身webpack 对于一些文件是不知道该如何处理的,但是loader知道,所以呢,我们想要打包其他文件格式的话,直接去配置loader可以了如何打包图片资源? 可以结合两个插件去配置图片的打包 ,file-loader 和url-loader下载插件npm install file-loader -D //对于大的图片去做处理npm install vue-loader原创 2020-06-04 21:52:11 · 620 阅读 · 0 评论 -
Webpack系列(一):初步使用Webpack
一、为什么要使用Webpack?随着前端工程越来越复杂,单独写几个文件来写业务代码,这样的方式已经无法保证项目的可维护性了,所以我们就想把不同的业务逻辑拆成模块然后去分开引入这些模块,每个模块自己做自己的事情。这样就可以保证项目地维护性和可扩展性了!但假如你有几千个模块,那你能在页面上引入几千个js文件吗?所以当项目大到这种程度的时候,我们就得借助工具来管理我们的这些模块了!而Webpack就是可以帮助我们管理复杂项目的一个工具。与Webpack类似还有很多相似的工具,比如说Gulp,Grunt,原创 2020-06-03 20:12:29 · 316 阅读 · 0 评论