随笔分类 - webpack
摘要：以前天真地以为react-css-modules使用与其他插件一样，npm install安装一下就好了。 直到我新起了一个项目才知道并没有这么简单，react-css-modules使用是需要修改Webpack配置的。 如果不配置webpack，会报：Uncaught Error: "xxx" C
阅读全文
摘要：性能优化系列主要介绍在 Webpack 场景下如何通过配置、插件等手段，优化构建与运行性能，以及这些性能优化背后的核心原理，例如本文即将介绍的 Webpack5 全新的 cache 功能。 一、使用持久化缓存 经过这么多年发展，Webpack 生态在前端工程化能力方面已经发展的非常全面且强大，但大而
阅读全文
posted @ 2022-04-24 09:41
simple-love
摘要：// 安装依赖 npm install @babel/plugin-proposal-optional-chaining -S // @babel/plugin-proposal-nullish-coalescing-operator -S // 在babel.config.js中 的 plugin
阅读全文
摘要：https://www.jianshu.com/p/b07efb7a76a6 https://www.cnblogs.com/vvjiang/p/9327903.html https://v4.webpack.docschina.org/plugins/split-chunks-plugin/ 干货
阅读全文
摘要：前言 webpack加载css背景图片、img元素指向的网络图片、使用es6的import引入的图片时，需要使用url-loader或者file-loader。url-loader和file-loader可以加载任何文件。 区别url-loader可以将图片转为base64字符串，能更快的加载图片，
阅读全文
摘要：一、区别前面两节我们有提到Loader与Plugin对应的概念，先来回顾下 loader 是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中 plugin 赋予了 webpack 各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决
阅读全文
摘要：https://www.jianshu.com/p/4b0379c48a81?utm_source=desktop&utm_medium=timeline . 谈及如今欣欣向荣的前端圈，不仅有各类框架百花齐放，如Vue， React， Angular等等，就打包工具而言，发展也是如火如荼，百家争鸣；
阅读全文
摘要：概述 稍微了解行业现状的开发者都知道，现在前端“ES6即正义”，然而浏览器的支持还是进行时。所以我们会用一个神奇的工具将ES6都给转换成目前支持比较广泛的ES5语法。对，说的就是Babel。 本文不再介绍Babel是什么也不讲怎么用，这篇文章的关注点是另一个方面，也是很多人会好奇的事情，Babel的
阅读全文
摘要：问题来源 对于浏览器来说，一方面期望每次请求页面资源时，获得的都是最新的资源；一方面期望在资源没有发生变化时，能够复用缓存对象。 这个时候，使用文件名+文件哈希值的方式，就可以实现只要通过文件名，就可以区分资源是否有更新。 而webpack就内置了hash计算方法，对生成文件的可以在输出文件中添加h
阅读全文
摘要：https://github.com/jantimon/html-webpack-plugin#configuration这个插件很重要，作用一是创建HTML页面文件到你的输出目录，作用二是将webpack打包后的chunk自动引入到这个HTML中 首先安装和引入： const HtmlPlugin
阅读全文
摘要：一、path模块的引入。 直接引用。node中自带的模块 const path = require('path'); 二、path.join(path1，path2，path3.......) 作用：将路径片段使用特定的分隔符（window：\）连接起来形成路径，并规范化生成的路径。若任意一个路径片
阅读全文
摘要：安装配置步骤： 1. 装好node和npm 2. 全局安装webpack npm install -g webpack 3. 建立项目，进入项目根目录 a. 新建一个package.json的文件在项目根目录下npm init b. 添加webpack.config.js配置文件 c. 添加app文
阅读全文
摘要：通过这种方式引入的依赖库，不需要webpack处理，编译进文件中，在我们需要，使用它的时候可以通过CMD、AMD、或者window全局方式访问。 官网地址：https://webpack.js.org/configuration/externals/ 比如我们在index.html用CDN的方式引入
阅读全文
摘要：创建自己的library类库包并使用webpack4.x打包发布到npm 我们在开发过程中，可能经常要使用第三方类库，比如jquery、lodash等。我们通过npm，下载安装完之后，就可以使用了，简单方便。我们自己可以创建一个类库，然后供其他人这样安装使用吗？当然是可以的。 下面我们就来说说。 1
阅读全文
摘要：通过这种方式引入的依赖库，不需要webpack处理，编译进文件中，在我们需要，使用它的时候可以通过CMD、AMD、或者window全局方式访问。 比如我们在index.html用CDN的方式引入jquery，webpack编译打包时不处理它，却可以引用到它。 <script src="http://
阅读全文
摘要：默认方式 webpack模式模式现在已经做了一些通用性优化，适用于多数使用者。 需要注意的是：默认模式只影响按需(on-demand)加载的代码块(chunk)，因为改变初始代码块会影响声明在HTML的script标签。如果可以处理好这些（比如，从打包状态里面读取并动态生成script标签到HTML
阅读全文
摘要：webpack 4 webpack 四大核心概念： 入口(entry) // 打包入口 输出(output) : 打包后输出的位置配置 loader : loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader
阅读全文
摘要：module.exports = {// 部署应用时的基本 URLbaseUrl: process.env.NODE_ENV 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080', // build时构建文件的目录 构建时传入 --
阅读全文
摘要：发现问题 最近在使用 Webpack 打包 css 文件时，发现了一个问题，发现打包后的 z-index 值跟源文件 z-index 不一致。 如下图，左侧是源文件，右侧是打包后的文件： 即使加上 !important，经过 OptimizeCssAssetsPlugin 调用 cssProcess
阅读全文
浙公网安备 33010602011771号