随心的博客 - 博客园

2020年12月14日

摘要：一、引入依赖 const fs = require('fs') const parser = require('@babel/parser') const traverse = require('@babel/traverse').default; const path = require('pat 阅读全文

posted @ 2020-12-14 15:37 随心的博客阅读(103) 评论(0) 推荐(0)

2020年12月9日

前端JS循环操作一览

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>前端循环一览</t 阅读全文

posted @ 2020-12-09 17:29 随心的博客阅读(390) 评论(0) 推荐(0)

2020年12月7日

webpack编写第一个插件

摘要：插件就是在webpack打包运行的各个时期，增加webpack的功能 1、在项目目录下新建addFlagPlugin.js文件，内容如下 class addFlagPlugin { constructor() { } apply(complier) { complier.hooks.emit.tap 阅读全文

posted @ 2020-12-07 21:08 随心的博客阅读(92) 评论(0) 推荐(0)

编写第一个webpack loader

摘要：编写一个webpack loader,loader的作用是获取你写的源代码,根据自己的操作对源代码的字符进行自定义的处理，相当于解释器、翻译器. 1、在入口文件(webpack.config.js中的entry配置的js文件)中写如下代码 console.log('hello,vue'); 2、接下阅读全文

posted @ 2020-12-07 16:47 随心的博客阅读(153) 评论(0) 推荐(0)

2020年12月4日

webpack打包速度大幅度提升的方法

摘要：前言：我们开发中经常会遇见这样一个问题，每次webpack打包，都会重复的打包引入node_modules中的代码，都会极大的占用webpack打包的速度，我们可以这样的处理，将node_modules中这些不变的代码提前打包一次，因为node_modules中代码不会改变，所以以后直接把这个提前打阅读全文

posted @ 2020-12-04 09:20 随心的博客阅读(756) 评论(0) 推荐(0)

2020年11月26日

webpack 打包项目报 'webpack-cli/bin/config-yargs'

摘要：当前安装webpack、webpack-cli时会报错，wepback-cli版本不兼容,将webpack-cli版本改为3.3.12就可以了 yarn remove webpack-cli yarn add webpack-cli@3.3.12 阅读全文

posted @ 2020-11-26 10:39 随心的博客阅读(114) 评论(0) 推荐(0)

2020年11月13日

webpack之shimming的应用(webpack.ProvidePlugin)

摘要： webpack在引入两个依赖的包时，可能需要使用shimming，意思是处理代码上的兼容 1、在main.js中引入jquery import $ from 'jquery' import append from './append' //下面的给页面添加元素文件 append() 2、append 阅读全文

posted @ 2020-11-13 08:58 随心的博客阅读(184) 评论(0) 推荐(0)

2020年11月10日

webpack配置css代码分割和css压缩

摘要：开始，按照我的webpack分模块文章配置好后(mini-css-extract-plugin不支持代码hmr热更新，所以只在生产模式进行配置)，开始下面的配置 yarn add mini-css-extract-plugin css-minimizer-webpack-plugin 配置css分离阅读全文

posted @ 2020-11-10 10:33 随心的博客阅读(994) 评论(0) 推荐(0)

2020年11月9日

react hooks useState更新值不及时的解决方案

摘要： react hooks中useState更新值后经常会出现值更新不及时的bug，可以使用以下思路解决 import React, { Component, useState } from 'react' import ReactDom, { render } from 'react-dom' con 阅读全文

posted @ 2020-11-09 18:11 随心的博客阅读(20473) 评论(3) 推荐(1)

2020年11月5日

webpack实现code splitting,提升项目加载速度

摘要： 1、实现代码code splitting的好处 1-1、在项目中项目代码大小为1m，引入的模块为1m，总共大小为2m，都打包在main.js，初次请求项目大小为2m，如果改了项目代码中的一部分，由于都在main.js中，再次刷新，还是请求2m，请求缓慢。 1-2、使用code splitting后，阅读全文

posted @ 2020-11-05 21:39 随心的博客阅读(134) 评论(0) 推荐(0)