![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 86
背太阳的牧羊人
管它什么真理无穷,进一寸有一寸的欢喜。
展开
-
webpack-dev-server原理解析及其中跨域解决方法
webpack proxy ,就是 webpack 提供的解决跨域的方案。其基本行为是接受客户端发送的请求后转发给其他的服务器,目的是为了解决在开发模式下的跨域问题。原创 2024-01-21 16:14:25 · 1669 阅读 · 0 评论 -
webpack 中,filename 和 chunkFilename 的区别
webpack 中,filename 和 chunkFilename 的区别原创 2023-11-18 16:16:05 · 629 阅读 · 0 评论 -
webpackShimming 预置依赖
为什么需要Shimming 预置依赖webpack compiler 能够识别遵循 ES2015 模块语法、CommonJS 或 AMD 规范编写的模块。然而,一些 third party(第三方库) 可能会引用一些全局依赖(例如 jQuery 中的 $);或者有些 library 也可能会创建一些需要导出的全局变量.这些 “broken modules(不符合规范的模块)” 就是 shimming(预置依赖) 发挥作用的地方。shim 另外一个极其有用的使用场景就是:希望 polyfill 扩展浏览器原创 2021-03-03 14:17:19 · 230 阅读 · 0 评论 -
webpack缓存
使用 webpack 打包模块化后的应用程序,webpack 会生成一个可部署的 /dist 目录,然后把打包后的内容放置在此目录中。只要 /dist 目录中的内容部署到 server 上,client(通常是浏览器)就能够访问此 server 的网站及其资源。而最后一步获取资源是比较耗费时间的,所以浏览器使用 缓存 的技术来降低网络流量,使网站加载速度更快。然而,如果我们在部署新版本时不更改资源的文件名,浏览器可能会认为它没有被更新,就会使用它的缓存版本。由于缓存的存在,当你需要获取新的代码时,就会显得很原创 2021-02-04 15:47:48 · 742 阅读 · 1 评论 -
webpack代码分离
代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大影响加载时间。常用的代码分离方法有三种:入口起点:使用 entry 配置手动地分离代码。防止重复:使用 Entry dependencies 或者 SplitChunksPlugin 去重和分离 chunk。动态导入:通过模块的内联函数调用来分离代码。入口起点这是迄今为止最原创 2021-02-03 17:30:40 · 381 阅读 · 0 评论 -
webpack中的开发环境
使用 source map当 webpack 打包源代码时,可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。例如,如果将三个源文件(a.js, b.js 和 c.js)打包到一个 bundle(bundle.js)中,而其中一个源文件包含一个错误,那么堆栈跟踪就会直接指向bundle.js。但我们需要知道错误来自哪个源文件中的具体位置,所以这种提示通常不会提供太多帮助。为了更容易地追踪 error 和 warning,JavaScript 提供了 source m原创 2021-01-31 14:01:26 · 187 阅读 · 0 评论 -
webpack中引入资源
引入图片资源用webpack内置的 Asset Modules 就可以轻松添加图片资源到我们的项目中,不需要再另外安装loader。webpack.config.js添加配置:// using the built-in Asset Modules of webpack to incorporate our images { test: /\.(png|svg|jpg|jpeg|gif)/i, type: 'asset/resource' },原创 2021-01-30 16:48:14 · 698 阅读 · 0 评论