![](https://img-blog.csdnimg.cn/20191206134811989.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端晋级--webpack
webpack学习笔记,硬货满满
guocongcong-cc
归纳总结,记录职业生涯
展开
-
webpack4打包优化之可视化分析
能否对打包结果进行优化是webpack掌握水平的终极体现,要优化我们就要做到有的放矢,明确优化的目标,本篇博文介绍下怎么能够可视化的去分析当前打包的各项数据指标。1.控制台信息如上图给句chunks列表信息我们能够看到打包之后生成的打包文件信息,包括大小以及总的时间,但是这个太粗,我们在优化中更想知道每一个文件用时情况。而且最好能把每次打包结果分析数据保存以便与最后的样本分析以证明优化效果对...原创 2019-12-18 15:18:10 · 797 阅读 · 0 评论 -
webpack4自定义loader清除或替换js中的字符串
再开发过程中难免有时需要对所有的js文件中的某些字符串进行统一处理,l利用webpack提供的自定义loader可以在打包时统一处理webpack.config.js中配置rules:[ { test: /\.js$/, //loader: 'happypack/loader?id=happybabel', loader:...原创 2019-12-18 11:46:34 · 2960 阅读 · 0 评论 -
webpack4 extract-text-webpack-plugin踩坑
extract-text-webpack-plugin是webpack中提取分离css的。如果不去分离css的内容都被打包到bundle.js里面了。无论修改了js部分的代码,css模块也会被重新打包,被当成css模块也有内容修改,或者只修改了css模块,js模块是没有变化的,但是他们都是在一个bundle中,所以都会被认为有修改。悲剧的是webpack4 直接安装extract-text-...原创 2019-12-17 14:49:48 · 1998 阅读 · 0 评论 -
webpack4中使用postcss-loader实现自动补全css前缀和兼容下一代css样式
css样式在多浏览器兼容处理上需要开发人员在开发中去hack,很多属性需要添加属性的即私有前缀,作用是为了兼容老版本的写法。例如:比较新版本的浏览器都支持直接写:border-radius。fiirefox: -moz-border-radius: 50px 50px;ie: -ms-border-radius: 50px 50px;chrome safari : -webkit-...原创 2019-12-17 14:23:03 · 417 阅读 · 0 评论 -
用scc-loader实现模块化css编程
css模块化在项目中越来越被重视,前段时间应项目组成员要求,实现一个css模块化的demo参考,今日将其分享出来众所周知css语言是不具备模块画的能力,但是借助webpack的css-loader来实现,其核心就是css-loader的modules属性新建a.css文件::global .border-red{ border:1px solid red;};*{ padding:...原创 2019-12-16 15:43:41 · 139 阅读 · 0 评论 -
webpack在前端工程化中的作用总结
使用webpack已经三年多的时间了,本篇文章就webpack在前端工程化中的作用结合之前项目体会做以简单总结。webpack对开发过程中的环境构建任何项目中基本上都是包含以下三个重要的环境:开发环境,测试环境,生产环境。在没有使用webpack之前,对于前端开发人会员几乎没有一个全面成手的工具能够快速实现开发,测试,生产环境的搭建和切换,就我自己而言,在webpack之前使用过gulp,由采...原创 2019-12-16 14:41:53 · 710 阅读 · 0 评论 -
webpack4 手写配置文件模板
上传一个基于webpack4的手写配置文件模板该模板包含js的所有处理babel, ts, html ,img,雪碧图等webpack.config.js{ "name": "1-1code", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo...原创 2019-12-13 17:40:40 · 188 阅读 · 0 评论 -
webpack4 js loader 配置踩坑记
webpack升到4之后的版本有很多地方与之前不同,新项目中使用,或旧的项目升级有诸多坑点,本篇博文就webpack4与3的不同之处整理说明webpack4安装webpack4的安装与3有明显不同之处,全局安装webpack 同时必须安装webpack-cli...原创 2019-12-13 17:30:34 · 1234 阅读 · 0 评论 -
屌丝晋级webpcak 第五节插件的使用
本篇博文开始介绍webpack中插件的使用方法。1.首先介绍项目总最常用的几个插件为了便于读者理解和记忆,我们会结合项目实际应用场景提出问题,看这些插件到底在项目中是用来干什么的,实际也是项目中的优化之路。1.热启动管理 HotModuleReplacementPlugin不论你使用那种前端开发工具IDE(vs code,webpack,hbulider),都面临一个问题,总不能每次编辑完...原创 2019-12-09 11:17:48 · 95 阅读 · 0 评论 -
屌丝晋级webpack第4节css和html中图片处理
本片笔记我将总结整理webpack中对图片的加载处理,前端加载图片的地方无外乎两个:1.html中src的引用。2.css样式中图片的url其对应在webpack中是以两个loader去处理的,html-withinHtml-loder和url-loader本节源码依然用上篇文章中源码“demo-5”1.css中图片url-loder的应用1.安装 url-loader:cnpm insta...原创 2019-12-07 19:56:24 · 179 阅读 · 0 评论 -
屌丝晋级webpack之第三节 热启动 webpack-dev-server使用
今天我们开始webpack的一些高级用法,首先从热启动webpack-dev-server的使用开始默认使用我们上节的demo-5源码工程1.安装webpack-dev-server命令:cnpm install webpack-dev-server -g3.3种运行webpack-dev-server的方式1.webpack-dev-server --prot 8888 //命令方式...原创 2019-12-07 18:06:33 · 720 阅读 · 1 评论 -
屌丝晋级之webpack第二节用 webpack.config.js配置文件打包
本篇博文我打算对webpack.config.js文件中最简单的配置进行说明和使用。经过前两篇的博文学习,我已经学会了在不用配置文件的情况下,如何用webpack打包js css文件,但是在实际项目中最为前端工程最重要的配置文件webpack是核心。1.手写webpack.config.js文件新建项目工程demo-5 初始化包 npm init ,创建src目录 将上篇微博中的a.js,b...原创 2019-12-07 15:17:43 · 629 阅读 · 0 评论 -
屌丝晋级之webpack第一节原生使用指南
本篇博文开始对webpack原生用法(没有webpack.config.js)做一个介绍1.安装webpack最新的webpack版本已经4.41.2,以下安装默认都是最新版本,我会将最新版本与老版本的坑一并介绍。npm install webpack -g由于webpack3之后执行webpack命令是需要在安装webpack-cli所以npm install webpack-cli...原创 2019-12-06 17:56:17 · 236 阅读 · 0 评论 -
webpack之npm基础
webpack基础之npmnpm简介npm 是Node 的模块管理器,功能极其强大。 它是Node 获得成功的重要原因之一。 正因为有了npm,我们只要一行命令,就能安装别人写好的模块。只要安装了node就不用再独自安装,全名:node packge manage node包管理器。用init命令生成第一个模块包的概念是建立在“packge.json”上用node创建的包必须...原创 2019-12-06 16:28:51 · 647 阅读 · 0 评论 -
webpack对前端的重要性
开博典礼原创 2019-12-06 14:39:22 · 670 阅读 · 0 评论