webpack踩坑
文章平均质量分 56
衣乌安、
愿每天合上笔记本盖子的刹那,都有着剑客收剑入鞘的骄傲。。。
展开
-
webpack devtool浅析
首先我们需要知道source map是什么?顾名思义资源映射,它做的就是维护打包处理后的代码与源代码之间的映射关系,只有映射的精确性则取决于webpack的配置项devtool,其决定了项目打包时是否以及如何生成source map,而生成的source map不同决定了构建产物的体积和构建以及重新构建的速度的不同。具体配置项可选值可参考webpack文档这里不一一列举。首先可以看一下webpack的源码,对应处理逻辑仅有20行:https://github.com/webpack/webpack/bl原创 2021-05-18 21:17:59 · 995 阅读 · 0 评论 -
提高渲染速度,怎么让资源预加载?
为什么需要预加载?浏览器同时发出并发请求数是有限制的,受最大tcp连接数限制,单个tcp连接,在同一时间只能处理一个http请求(只的是http/1.1,http2支持多路复用),请求一般像Chrome为6个,因此资源获取的时机以及优先级便尤为重要。Link 标签 rel=“preload”该属性可以指明哪些资源是在页面加载完成后即刻需要的。对于这种即刻需要的资源,你可能希望在页面加载的生命周期的早期阶段就开始获取,在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用,.原创 2020-08-28 21:18:51 · 829 阅读 · 0 评论 -
webpack 开启gzip压缩
Webpack 配置const CompressionWebpackPlugin = require('compression-webpack-plugin');{ plugins: [ new CompressionWebpackPlugin({ // options }) ]}Nginx 配置 #开启和关闭gzip模式 gzip on|off; #gizp压缩起点,文件大于1k才.原创 2020-08-17 19:26:23 · 7893 阅读 · 0 评论 -
vscode 中智能化自动提示webpack配置项
vscode 中智能化自动提示webpack配置项在这里,我想跟你分享我在编写 Webpack 配置文件时用过的一个小技巧,因为Webpack 的配置项比较多,而且很多选项都支持不同类型的配置方式。如果你刚刚接触 Webpack 的配置,这些配置选项一定会让你感到头大。如果开发工具能够为Webpack 配置文件提供智能提示的话,这种痛苦就会减小很多,配置起来,效率和准确度也会大大提高。我们知道, VSCode 对于代码的自动提示是根据成员的类型推断出来的,换句话说,如果 VSCode 知道当前变量的类型原创 2020-07-01 21:24:21 · 3598 阅读 · 0 评论 -
你的组件库还不支持按需加载吗?
很多的团队都会根据自己团队的技术风格或应用场景建立自己的组件库,然鹅随着组件的增加,组件库的体积也变得越来越大,如果一个很小的项目,仅仅想使用某个组件库中一两个组件,而这个组件库十分庞大却不支持按需加载,其结果就是打包后发现引入组件库的体积甚至比项目本身的代码还要大N倍。那么如何让组件库支持按需加载呢?以React项目为例,首先从打包后的包来分析,可能在没有支持按需加载时类似这样:.├── dist| ├── index.js| ├── style.css| ├── ...|.原创 2020-05-28 20:10:23 · 2065 阅读 · 0 评论 -
webpack4 HMR 热替换实践
模块热替换(Hot Module Replacement 或 HMR)。它允许在运行时更新各种模块,而无需进行完全整个浏览器页面刷新官方文档https://www.webpackjs.com/guides/hot-module-replacement/基本配置webpack.config.dev.jsconst path = require('path');const ...原创 2019-12-12 21:38:15 · 381 阅读 · 0 评论 -
react、webpack升级记录
webpack配置json-loader(webpack4 内置)devServer.progress - 只用于命令行工具(CLI)官方升级信息:https://www.webpackjs.com/guides/migrating/webpack.optimize.CommonsChunkPlugin插件变动webpack.optimize.CommonsChunkPl...原创 2019-12-05 17:24:53 · 2859 阅读 · 0 评论 -
wenpack4配置json-loader报错
问题起因在于我初次使用了webpack4搭建项目,在配置loader时习惯性的配置了json-loader,而导致项目运行一直报错。。。官方文档上指出:webpack >= v2.0.0 默认支持导入 JSON 文件ERROR in ./node_modules/uiw-iconfont/fonts/w-icon.jsonModule parse failed: Unexpec...原创 2019-08-12 15:58:15 · 2027 阅读 · 0 评论 -
webpack手动搭建简单react项目
(简单流程,仅供参考,一切以实际需求为准)环境准备node、npm、webpack4+npm基本使用命令项目创建创建目录初始化首先创建项目文件夹并进入,使用npm init初始化,然后一溜回车就好,执行完后项目文件夹中会多一个package.json文件。这是项目的核心文件,包含包依赖管理和脚本任务。$ mkdir webpack-react $ cd webpack-rea...原创 2019-02-28 14:26:03 · 704 阅读 · 0 评论 -
Plugin/Preset files are not allowed to export objects, only functions.
原因:babel版本冲突,6和7版本改动较大,存在兼容问题解决办法:将babel版本全部升级为7,或者将版本全部降到6升级到7:"@babel/core": "^7.0.0-beta.40","@babel/cli": "^7.0.0-beta.40","babel-loader": "^8.0.0-beta.0","babel-plugin-lodash&原创 2019-02-28 17:16:24 · 12721 阅读 · 0 评论 -
webpack中使用mock虚拟接口模拟数据
在实际开发中往往会有前后端进度不同的情况,前端同学在开发或者开发完成后后端同学没能提供接口,这时就需要前端同学自己模拟数据来测试前端功能了webpack-api-mockerwebpack-api-mocker是一个webpack-dev-server 中间件,可以为REST API创建模拟。当您尝试在没有实际REST API服务器的情况下测试应用程序时,它会很有用。安装npm ins...原创 2019-02-12 19:34:42 · 2946 阅读 · 2 评论 -
webpack4 超详细配置
核心概念 入口它应该是一个.js 文件,人们会在这个文件中包含.scss 或.css 文件,这样做可能会导致很多意外的错误。有时候你可能会看到一个入口包含了几个.js 文件。虽然有时候你可以这么做,但它通常会增加更多的复杂性。 输出这是 build/ 或 dist/ 或任意名称的文件夹,用于存放最终的.js 文件。 加载器它们主要用来编译或转换你的代码,例如 postcss...转载 2019-01-14 13:19:44 · 1455 阅读 · 3 评论 -
yarn 常用命令
初始化新项目yarn init添加依赖包yarn add [package]yarn add [package]@[version]yarn add [package]@[tag]将依赖项添加到不同依赖项类别 分别添加到 devDependencies、peerDependencies 和 optionalDependencies:yarn add [packag...原创 2018-12-28 20:03:40 · 352 阅读 · 0 评论 -
package.json 配置理解
一、初步理解1. npm安装package.json时 直接转到当前项目目录下用命令npm install 或npm install --save-dev安装即可,自动将package.json中的模块安装到node-modules文件夹下2. package.json 中添加中文注释会编译出错3. 每个项目的根目录下面,一般都有一个package.json文件,定义了这个项目所需要...转载 2019-01-06 20:40:07 · 538 阅读 · 5 评论 -
webpack4 启动项目 Cannot find module 'webpack-cli/bin/config-yargs'
原因:没有安装webpack-cli要安装最新版本或特定版本,请运行以下命令之一:npm install --save-dev webpacknpm install --save-dev webpack@<version>如果你使用 webpack 4+ 版本,你还需要安装 CLI。npm install --save-dev webpack-cli...原创 2019-01-07 11:00:02 · 1570 阅读 · 0 评论 -
webpack 报错TypeError: $export is not a function
一般解决方式的话: 通过修改webpack配置文件,去除babel-loader对node-modules的编译即在配置loader时利用include或者exclude,控制处理范围,以免处理node-modules...原创 2019-01-07 19:38:13 · 4729 阅读 · 0 评论 -
configuration.resolve.extensions[0] should not be empty
webpack 升级后,extensions 数组中不能使用空字符串,需要使用* 代替。 resolve: { extensions: ['*', '.js', '.jsx', '.json'], }原创 2019-01-07 20:33:58 · 1277 阅读 · 0 评论 -
浏览器报错。 Hot Module Replacement is disabled.
plugins: [ new webpack.HotModuleReplacementPlugin(),plugins 中加上 webpack.HotModuleReplacementPlugin原创 2019-01-07 20:45:16 · 640 阅读 · 0 评论 -
webpack 之 resolve
Resolvewebpack在启动后会从配置的入口模块触发找出所有依赖的模块,Resolve配置webpack如何寻找模块对应的文件。webpack内置JavaScript模块化语法解析功能,默认会采用模块化标准里约定好的规则去寻找,但你可以根据自己的需要修改默认的规则。1. aliasresolve.alias配置项通过别名来把原来导入路径映射成一个新的导入路径。如下://we...转载 2019-01-18 14:57:13 · 440 阅读 · 0 评论 -
webpack 之 entry vendor
为什么要使用vendor属性?一般情况下,使用此属性的目的是为了方便开发调试,或者是部署到服务器时提高应用的访问速度。在webpack 的打包此文件过程中通常会根据文件的内容计算出一个hash值,并将该值加到文件名中,并配置一个长达一年的缓存控制。之所以这么做,是因为vendor.js中的内容基本上很少更新,当我们根据业务需求修改相关逻辑代码并重新生成入口文件时(比如app.js),vendo...转载 2019-01-18 17:05:35 · 1918 阅读 · 0 评论 -
非全局安装webpack调用相对路径下webpack报错:不是内部或外部命令,也不是可运行的程序或批处理文件。
初学webpack踩坑之路开始。。。。看官方文档时是上面说不推荐webpack全局安装,因此乖乖的采用了非全局安装(即安装于项目之中)至于原因: 不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败。BUT。。。。当采用非全局安装通过路径调用webpack时,第一个坑就出现了。。。路径名不是内部或...原创 2018-06-17 18:22:12 · 2165 阅读 · 0 评论