- 博客(24)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 webpack进阶篇（二十）：提取页面公共资源
说明玩转webpack课程学习笔记。基础库分离思路：将 react、react-dom 基础包通过 cdn 引⼊，不打⼊ bundle 中⽅法：使⽤ html-webpack-externals-plugin安装插件npm i html-webpack-externals-plugin -D1、不分离基础包2、分离基础包分离之后业务代码js体积少了。1、配置const HtmlWebpackExternalsPlugin = require('html-webp
2020-06-30 21:28:19
1911
原创 webpack进阶篇（十九）：使⽤ source map
说明玩转webpack课程学习笔记。推荐阅读阮一峰的网络日志-JavaScript Source Map 详解什么是 source mapSource map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。使⽤ source map1、作⽤：通过 source map 定位到源代码2、开发环境开启，线上环境关闭线上排查问题的时候可以将 sourcemap 上传到错误监控系统source map 关键字source map: 产
2020-06-28 21:07:31
428
原创 webpack进阶篇（十八）：多页面打包
说明玩转webpack课程学习笔记。多页面打包(MPA)概念每⼀次⻚⾯跳转的时候，后台服务器都会给返回⼀个新的 html ⽂档，这种类型的⽹站也就是多⻚⽹站，也叫做多⻚应⽤。多页面打包基本思路1、每个⻚⾯对应⼀个 entry，⼀个 html-webpack-plugin2、缺点：每次新增或删除⻚⾯需要改 webpack 配置module.exports = { entry: { index: './src/index.js', search: './src/searc
2020-06-28 00:28:55
1220
原创 webpack进阶篇（十七）：静态资源内联
说明玩转webpack课程学习笔记。什么是资源内联资源内联（inline resource），就是将一个资源以内联的方式嵌入进另一个资源里面.1、HTML 内联 CSS （内联 CSS 或者 行内 CSS）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi
2020-06-26 18:20:23
3243
原创 webpack进阶篇（十六）：移动端 CSS px 自动转换成 rem
说明玩转webpack课程学习笔记。浏览器的分辨率CSS 媒体查询实现响应式布局缺陷：需要写多套适配样式代码@media screen and (max-width: 980px) { .header { width: 900px; }}@media screen and (max-width: 480px) { .header { height: 400px; }}@media screen and (max-width: 350px) { .h
2020-06-25 23:46:49
813
原创 webpack进阶篇（十五）：PostCSS 插件 autoprefixer 自动补齐 CSS3 前缀
说明玩转webpack课程学习笔记。CSS3 的属性为什么需要前缀浏览器的标准没有完全统一举个栗子：.box { display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex}PostCSS 插件 autoprefixer 自动补齐 CSS3 前缀1、使用 autoprefixer 插件安装依赖npm i postcss-loader autoprefixer -D2、
2020-06-25 20:26:59
4061
2
原创 webpack进阶篇（十四）：自动清理构建目录
说明玩转webpack课程学习笔记。bundle，chunk，modulebundle：打包最终生成的文件chunk：每个chunk是由多个module组成，可以通过代码分割成多个chunk。module：webpack中的模块（js、css、图片等等）当前构建时的问题每次构建的时候不会清理目录，造成构建的输出目录 output 文件越来越多。通过 npm scripts 清理构建目录rm -rf ./dist && webpackrimraf ./dist &a
2020-06-23 02:13:38
404
原创 webpack基础篇（十三）：代码压缩
说明玩转webpack课程学习笔记。JS 文件的压缩内置了 uglifyjs-webpack-plugin，打包会自动压缩jsCSS 文件的压缩npm i optimize-css-assets-webpack-plugin -D1、使用 optimize-css-assets-webpack-pluginnpm i cssnano -D2、同时使用 cssnanoconst path = require('path');const MiniCssExtractPlugin
2020-06-23 00:49:56
718
原创 webpack基础篇（十二）：文件指纹
说明玩转webpack课程学习笔记。什么是文件指纹打包后输出的文件名的后缀。文件指纹如何生成Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改Chunkhash：和 webpack 打包的 chunk 有关，不同的 entry 会生成不不同的 chunkhash 值Contenthash：根据文件内容来定义 hash ，文件内容不变，则 contenthash 不变JS 的文件指纹设置设置 output 的 filename，使用 [chu
2020-06-22 01:56:41
1354
原创 webpack基础篇（十一）：热更新以及其原理
说明玩转webpack课程学习笔记。热更新：webpack-dev-server（WDS）安装命令：npm i webpack-dev-server -D1、WDS 不刷新浏览器。webpack-dev-server 默认是会在内容编译完成后自动刷新(liveload)浏览器的，此处增加了 HotModuleReplacementPlugin 插件之后可以做到 HMR 的。如果 HMR 失败的化会降级使用 liveload 自动刷新浏览器模式。2、WDS 不输出文件，而是放在内存中。
2020-06-21 16:21:52
407
原创 webpack基础篇（十）：文件监听
说明玩转webpack课程学习笔记。什么是文件监听文件监听是在发现源码发生变化时，自动重新构建出新的输出文件。两种方式webpack 开启监听模式，有两种方式：启动 webpack 命令时，带上 --watch 参数在配置 webpack.config.js 中设置 watch: true唯一缺陷每次需要手动刷新浏览器。可以在package.json文件里面添加脚本。{ "scripts": { "build": "webpack", "watch"
2020-06-21 01:33:01
1400
原创 webpack基础篇（九）：资源解析--使用url-loader
说明玩转webpack课程学习笔记。使用url-loader1、安装依赖npm i url-loader -Durl-loader 也可以用于处理图片和字体。（可以设置较小资源自动 base64）2、search.js引入一张小于10k的图片测试一下，logo.png的大小为3.37kb。import React from 'react';import ReactDOM from 'react-dom';import './search.less';import logo fr
2020-06-20 23:51:07
1032
原创 webpack基础篇（八）：资源解析--解析字体
说明玩转webpack课程学习笔记。解析字体1、安装依赖npm i file-loader -Dfile-loader 也可以用于处理字体。（图片跟字体都不是代码文件）2、search.less 引入自己喜欢的字体，比如：SourceHanSerifSC-Heavy.otf@font-face{ font-family: 'SourceHanSerifSC-Heavy'; src: url('./fonts/SourceHanSerifSC-Heavy.otf') forma
2020-06-16 09:33:42
486
原创 webpack基础篇（七）：资源解析--解析图片
说明玩转webpack课程学习笔记。解析图片1、安装依赖npm i file-loader -Dfile-loader 用于处理文件。2、找一张自己喜欢的ido，比如：3、search.js 引入图片import React from 'react';import ReactDOM from 'react-dom';import './search.less';import cxk from './images/cxk.jpg';console.log(cxk);cla
2020-06-16 00:18:43
442
原创 webpack基础篇（六）：资源解析--解析 Less 和 Sass
说明玩转webpack课程学习笔记。解析 Less 和 SaSS1、安装依赖（以less为例）npm i less less-loader -Dless-loader 用于将 less 转换成 css。2、search.less测试文件.search-text { font-size: 48px; color: red;}3、search.js测试文件import React from 'react';import ReactDOM from 'react-dom';
2020-06-15 23:54:52
473
原创 webpack基础篇（五）：资源解析--解析 CSS
说明玩转webpack课程学习笔记。解析 CSS1、安装依赖npm i style-loader css-loader -Dcss-loader 用于加载 .css 文件，并且转换成 commonjs 对象。style-loader 将样式通过 <style> 标签插入到 head 中。2、search.css测试文件.search-text { font-size: 48px; color: green;}3、search.js测试文件import Re
2020-06-15 23:40:40
419
原创 webpack基础篇（四）：资源解析--解析 React JSX
说明玩转webpack课程学习笔记。解析 React JSX1、安装依赖npm i react react-dom -S 、npm i @babel/preset-react -D2、在.babelrc增加 React 的 babel preset 配置{ "presets": [ "@babel/preset-env", "@babel/preset-react" ]}3、编写react组件测试search.js文件import
2020-06-15 18:08:49
374
原创 webpack基础篇（三）：资源解析--解析 ES6
说明玩转webpack课程学习笔记。解析 ES61、使用 babel-loaderbabel的配置文件是：.babelrc2、webpack配置const path = require('path');module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: {
2020-06-15 16:40:46
312
原创 webpack基础篇（二）：webpack核心概念
说明玩转webpack课程学习笔记。EntryEntry 用来指定 webpack 的打包入口。1、依赖图的入口是entry.2、Entry 的用法单入口：entry 是一个字符串。module.exports = { entry: './path/to/my/entry/file.js'};多入口：entry 是一个对象。module.exports = { entry: { app: './src/app.js', adminApp: './src
2020-06-14 02:32:37
399
原创 webpack基础篇（一）：webpack与构建发展简史
说明玩转webpack课程学习笔记。1、为什么需要构建工具1、转换 ES6 语法2、转换 JSX3、CSS 前缀补全/预处理理器器4、压缩混淆5、图⽚片压缩2、前端构建演变之路大致过程：ant + YUI Tool grunt --> gulp fis3 --> webpack parcel rollup3、为什么选择webpack1、社区⽣生态丰富2、配置灵活和插件化扩展3、官⽅方更更新迭代速度快4、初识webpack1、配置⽂文件名称webpack 默
2020-06-13 18:44:39
748
原创 在vuecli3怎么提升构建打包速度？
安装happypack版本："happypack": "^5.0.1"npm install happypack --save-dev配置在文件vue.config.js里进行配置// 引入happypackconst Happypack = require('happypack');module.exports = { configureWebpack: config => { // 多线程优化构建速度 config.plugins.push( ne
2020-06-12 12:59:47
2732
原创 在vuecli3怎么设置全局公用的样式变量？
配置在文件vue.config.js里进行配置module.exports = { css: { // 不用在每一个页面都进行引入样式，就能直接引用。 loaderOptions: { sass: { prependData: `@import '@/assets/scss/variables.scss';` } } }}...
2020-06-12 12:57:40
3466
原创 在vuecli3怎么压缩代码以及打包怎么去除console.log？
安装uglifyjs-webpack-plugin版本："uglifyjs-webpack-plugin": "^2.2.0",npm install uglifyjs-webpack-plugin --save-dev配置在文件vue.config.js里进行配置// 引入const UglifyJsPlugin = require("uglifyjs-webpack-plugin");module.exports = { chainWebpack: config => {.
2020-06-12 12:56:19
1243
原创 在vue里用codemirror实现代码编辑器功能？
安装codemirror版本："codemirror": "^5.53.2"npm install codemirror --savehttps://codemirror.net/编写codemirror.vue公共组件<template> <div class="code-mirror-box"> <textarea ref="textareaCoder"></textarea> </div></templat
2020-06-01 15:56:20
1980
6
流沙：用于 CSDN 博客网站的暗黑和明亮主题切换的 chrome 浏览器插件。
2022-08-15
原生 js 实现类 3d 地图大屏展示自动高亮轮播、显示悬浮提示 tootip 的方案：svg + popper.js 定位引擎
2022-03-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人