webpack
文章平均质量分 83
葡萄糖o_o
一个热爱前端技术的群众。
展开
-
webpack联邦模块之consumes方法
对于使用联邦模块的项目会有两个依赖,一个是远程模块,一个是共享模块。上一篇文章解释了远程模块的加载和安装并初始化共享作用域。consumes则是共享模块的解决方案,用于在运行时加载并安装依赖的共享模块。为什么叫consumes?我理解是因为共享模块的获取是在__webpack_require__.I中完成的,而consumes只是使用__webpack_require__.S中的数据来安装对应模块。所以consumes是在消费__webpack_require__.S中的数据。__webpack_req原创 2022-04-10 20:21:21 · 1264 阅读 · 0 评论 -
webpack联邦模块之remotes方法
使用联邦模块后当前项目就会有两个依赖,一个是依赖共享模块,一个是依赖远程模块。运行时webpack/runtime/consumes用于解析共享模块,运行时webpack/runtime/remotes 用于解析远程模块。这两个模块对应的方法分别是__webpack_require__.f.consumes ****和__webpack_require__.f.remotes,是的这两个方法都是关在__webpack_require__.f上的,和上一篇文章中的__webpack_require__.f.j原创 2022-04-10 16:04:34 · 2115 阅读 · 0 评论 -
webpack联邦模块之webpack运行时
webpack是如何打包ES模块的?webpack是如何构建自身的模块运行时的?__webpack_require__这是整个webpack运行时的核心。该函数被用于根据模块Id从变量__webpack_module_cache__获取模块对应导出:有,直接返回没有,去__webpack_modules__上找到模块id对应的模块,获取对应模块导出。所以可以看出来__webpack_require__方法不用管模块具体是怎么来的。该方法调用的时候,调用方需要确保该模块id对应的模块已经存在原创 2022-04-02 16:29:50 · 2113 阅读 · 0 评论 -
wbepack中output.filename和output.chunkFilename
chunkFilename的规则会作用于entry字段提供的文件。而entry字段提供的文件应该是应用的入口,并不应该被chunkFilename所影响才对,但是确实被chunkFilename影响了。这其实是我们对于webpack配置文件中的entry字段和整个应用入口文件理解不完善导致的。原创 2020-02-07 22:11:53 · 1849 阅读 · 0 评论 -
修改webpack的publicPath为动态设置以适配公司活动平台
背景:我们需要将React开发的应用部署到一个活动搭建平台上,这意味我们只需要上传源码,没有搭建服务器的环节,没有配置Nginx的环节。具体步骤就是在该平台新建一个活动,然后将自己的源码传到这个活动下,然后打开这个活动提供的地址,然后就能够看到页面。我们上传的js文件main.js会得到一个js/main.js的路径,然后将这个路径放到html的script标签的src属性上即可。main.c...原创 2020-02-05 16:53:50 · 5932 阅读 · 0 评论 -
babel6和babel7中关于polyfill和preset-env和babel-plugin-transform-runtime等总结
记录自己零散的收获,随笔。一些基础babel的作用是转换新特性为大部分浏览器能支持的代码。babel转码又分为两部分,一个是语法转换,一个是新API转换。而对于API的转换又分为两部分,一个是可私有的API,一个全局对象的实例(Array.prototype.includes之类的方法)和Object.assign之类的静态方法。我们又知道babel代码转换又依赖plugin,没有plu...原创 2019-09-11 00:07:36 · 3757 阅读 · 0 评论 -
create react app创建的项目运行test的时候不能解析webpack的alisa配置的问题
使用babel插件npm install babel-plugin-module-resolver,并在.babelrc文件中加入如下:{ "env": { "test": { "plugins": [ [ "module-resolver", { "alias": {"@": "./src"} } ] ...原创 2019-08-01 10:50:46 · 290 阅读 · 0 评论 -
webpack中实现按需加载
当页面中一个文件过大并且还不一定用到的时候,我们希望在使用到的时候才开始加载这个文件俗称按需加载。这样可以减少页面的响应时间,提高访问速度。使用webpack打包的出来的文件要实现以上的要求有两种方式,一个是webpack特有的require.ensure方法,还有一个是import方法。require.ensure(dep: array, cb: function, name?: strin...原创 2019-04-14 18:21:16 · 6317 阅读 · 2 评论 -
webpack3的CommonsChunkPlugin插件详解
webpack打出来的包在不做处理的情况下是非常大的,所有依赖都被塞进一个文件中,文件中有业务代码,有业务代码依赖的第三方库代码,还有webpack生成的运行时代码等。这样的一个文件不方便静态资源缓存,并且初始化页面的时候下载了所有的JS这是没必要的,拖慢了页面速度。所以对于webpack打包的资源文件进行分割按需加载是很重要的一件事情。webpack4都出来了为啥要写一篇关于webpack3的...原创 2019-04-25 20:53:35 · 1827 阅读 · 0 评论 -
基于webpack3.x从0开始搭建React开发环境
在开发react单页面的时候无可避免的要使用到webpack打包,今天就从零开始搭建一个react的开发环境。需要实现的功能有:使用Babel编译ES6编译.jsx文件实现热更新编译CSS预处理文件Less,CSS后处理文件PostCSS提取公共的CSS样式到一个公共的文件中压缩js,减小js文件的大小抽取公共的第三方js库,并且打包的时候第三方js文件的名称不会变,方便客户...原创 2018-05-20 22:05:35 · 927 阅读 · 0 评论