13个你应该知道的 Webpack 优化技巧
在这篇文章中,我将从三个方面分享一些我常用的技巧:提高优化速度,压缩打包文件的大小,改善用户体验。无论是自己的日常开发,还是准备面试,都应该掌握一些关于 Webpack 的优化技巧。
阅读量: 401标签: Webpack
webpack打包时如何修改文件名
在使用webpack进行项目打包的时候,我们可通过以下方式对不同类型的资源,进行文件名或文件路径的修改,使用copy-webpack-plugin插件复制的文件,这个就是配置from和to
阅读量: 72标签: webpack
vue-cli3的title标签中出现的htmlWebpackPlugin.options.title值进行修改
ue项目中当你去index.html配置标题名,看见以下这些,可用下面去修改,vue-cli3脚手架的项目下,在根目录的vue.config.js中添加如下代码,假如没有这个文件的话,在根目录创建一个
阅读量: 228标签: webpack
精准的打包 - Webpack 的 Tree Shaking
前阵子在和朋友聊 Webpack 的时候,突然提到 Tree Shaking,但很惭愧的是我没有办法好好说明 Webpack 是如何做到 Tree Shaking 的,因此就趁这个年假的第一天抽空读 Webpack 的文件
阅读量: 248标签: Webpack
webpack打包的3种hash值区别
我们都知道,webpack有各种hash值,包括每次项目构建hash,不同入口的chunkhash、文件的内容contenthash,这么多hash,它们有什么区别呢?
阅读量: 407标签: webpack
揭开 Webpack 工作流程面纱:Tapable 模块
Webpack 工程相当庞大,但是 Webpack 本质上是一种事件流机制,通过事件流将各种插件串联起来,最终完成 webpack 的全流程,而实现事件流机制的核心是今天要讲的Tapable 模块
阅读量: 246标签: Webpack
webpack提取css成单独文件、css兼容性处理、压缩css
我们之前打包构建的样式是在js中的,因为有css-loader将样式资源整合到js中了,而样式在js中会让js体积变得非常大,下载速度变得很慢,同时呢,是先加载js才能创建style标签插入到页面中
阅读量: 275标签: webpack
90 行代码的 webpack,你确定不学吗?
在前端社区里,webpack 可以说是一个经久不衰的话题。其强大、灵活的功能曾极大地促进了前端工程化进程的发展,伴随了无数前端项目的起与落。其纷繁复杂的配置也曾让无数前端人望而却步
阅读量: 613标签: webpack
分享12个Webpack中常用的Loader
整理一些常用的loader分享给大家,方便知道在什么场景下该用什么loader。如果有大佬都懂悄悄左滑就行,不喜勿喷。style-loader用于将css编译完成的样式,挂载到页面style标签上。
阅读量: 655标签: Webpack
Webpack模块化原理图解
这时模块a,模板b中的代码都暴露在全局环境中,如果模块a中定义了一个方法del。同学b并不知道,在模块b中也定义了一个方法del。这时便造成了命名冲突的的问题。如图
阅读量: 1172标签: Webpack
你必须知道的webpack插件原理分析
在 webpack 中,专注于处理 webpack 在编译过程中的某个特定的任务的功能模块,可以称为插件。它和 loader 有以下区别:loader 是一个转换器,将 A 文件进行编译成 B 文件,比如:将 A.less 转换为 A.css,单纯的文件转换过程。webpack 自身只支持 js 和 json 这两种格式的文件
阅读量: 981标签: webpack
webpack中如何使用noParser和 parser
因为 Webpack 是以模块化的 JavaScript 文件为入口的,所以内置了对模块化 JavaScript的解析功能,支持 AMO, Cornmo nJS SystemJS ES6 parser 属性可以更细粒度地配置哪些模块语法被解析、哪些不被解析。同 noParse 配置项的区别在于
阅读量: 948标签: webpack
解决-webkit-box-orient: vertical在webpack打包后丢失问题
该方式比较合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器。但是在现在一些框架中如(Vue,react项目中使用),会发现本地正常,打包线上后,该属性丢失
阅读量: 1497标签: webpack
深入了解 webpack 模块加载原理
webpack 是一个模块打包器,在它看来,每一个文件都是一个模块。无论你开发使用的是 CommonJS 规范还是 ES6 模块规范,打包后的文件都统一使用 webpack 自定义的模块规范来管理、加载模块
阅读量: 1073标签: webpack
webpack系列之loader及简单的使用
webpack本身只能打包Javascript文件,对于其他资源例如 css,图片,或者其他的语法集比如jsx,是没有办法加载的。 这就需要对应的loader将资源转化,加载进来。
阅读量: 1148标签: webpack