![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
_双眸
GitHub:https://github.com/BothEyes1993
【所有demo地址】
1
2
展开
-
package和package-lock区别;dependencies和devDependencies区别
package和package-lockpackage.json: 主要用来定义项目中需要依赖的包package-lock.json: 在 npm install时候生成一份文件,用以记录当前状态下实际安装的各个npm package的具体来源和版本号。’^’ : 放在版本号之前,表示向后兼容依赖,说白了就是在大版本号不变的情况下,下载最新版的包项目中引入的包版本号之前经常会加^号,每次...原创 2018-12-19 16:04:16 · 1287 阅读 · 0 评论 -
webpack4下import()模块按需加载,打包按需切割模块,减少包体积,加快首页请求速度
一:背景因为项目功能越加越多,打包后的体积越来越大,导致首页展示的时候速度比较慢,因为要等压缩的js的包加载完毕。首页展示的时候只需要对应的js,并不需要全部的js模块,所以这里就可以用按需加载,这里webpack4官方文档提供了模块按需切割加载,配合es6的按需加载import()方法,可以做到减少首页包体积,加快首页的请求速度,只有其他模块,只有当需要的时候才会加载对应js。这里参考一些...原创 2019-05-16 01:12:49 · 2121 阅读 · 0 评论 -
js转typescript,npm切换镜像
js转typescriptnpm i dtsmake -gnpm i tern --save-devdtsmake -s fileame.jsnpm切换镜像切换为官网:npm config set registry https://registry.npmjs.org切换为淘宝镜像npm config set registry https://registry.npm.taobao...原创 2019-04-30 14:35:07 · 652 阅读 · 0 评论 -
使用模块化工具打包自己开发的JS库(webpack/rollup)对比总结
打包JS库demo项目地址:https://github.com/BothEyes1993/bes-jstools背景最近有个需求,需要为小程序写一个SDK,监控小程序的后台接口调用和页面报错(类似fundebug)听起来高大上的SDK,其实就是一个JS文件,类似平时开发中我们引入的第三方库:const moment = require('moment');moment().format...原创 2019-04-30 14:04:43 · 918 阅读 · 0 评论 -
vue-quill-editor 富文本集成quill-image-extend-module插件实例,以及UglifyJsPlugin打包抱错问题处理
官网vue-quill-editorToolbar Module - Quillvue-quill-image-upload图片支持上传服务器并调整大小1.在 package.json 中加入 “quill-image-extend-module”: “^1.1.2” 依赖2.在编辑器组件中引入以下代码<template> <div class="in-edit...原创 2019-03-29 18:48:49 · 1278 阅读 · 0 评论 -
webpack build后生成的app、vendor、manifest三者有何职能不同?
贴一下之前vue脚手架的webpack3配置:app.js是入口js,vendor则是通过提取公共模块插件来提取的代码块(webpack本身带的模块化代码部分),而manifest则是在vendor的基础上,再抽取出要经常变动的部分,比如关于异步加载js模块部分的内容。从截图上看也看出,vendor的文件大小最大,因为其包含了vue整一个框架的代码,以及webpack的模块化代码。至于...原创 2018-12-17 23:04:06 · 1661 阅读 · 0 评论 -
browserslist 目标浏览器配置表
为什么需要:根据提供的目标浏览器的环境来,智能添加css前缀,js的polyfill垫片,来兼容旧版本浏览器,而不是一股脑的添加。避免不必要的兼容代码,以提高代码的编译质量。共享使用browserslist的组件们:组件名功能Autoprefixerpostcss添加css前缀组件bable-preset-env编译预设环境 智能添加polyfill垫片代码...原创 2018-12-20 18:27:07 · 3203 阅读 · 2 评论 -
vscode调试webpack的启动和打包部署过程,nodejs调试
launch.json{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node",...原创 2019-10-01 12:26:31 · 1004 阅读 · 0 评论