随笔分类 -  webpack

12 webpack 打包库和组件、 优化构建时候的日志显示 stats和friendly-errors-webpack-plugin
摘要：打包库和组件 实例：大整数加法 要求：打包压缩版和非压缩版 需要安装插件 以及在头部引入 stats： 使用时候只需要在开发环境和生产环境的webpack.dev.js和webpack.prod.js中添加stats配置即可如：stats: 'errors-only' 友好的错误提示插件friend 阅读全文
posted @ 2020-08-03 18:41 浪波激泥 阅读(343) 评论(0) 推荐(0)
13 webpack SSR打包
摘要：服务端渲染（SSR)：核心思想是减少请求 渲染：HTML+CSS+JS+DATA->渲染后的HTML 优势：服务端内网机器拉取数据更快，一个HTML返回所有数据，减少白屏时间，对seo友好 实现思路： 服务端：使用 react-dom/server的 renderToString方法将React组件 阅读全文
posted @ 2020-08-03 17:43 浪波激泥 阅读(101) 评论(0) 推荐(0)
12 webpack 代码分割，动态import
摘要：代码分割的意义 使用场景：抽取相同代码到一个共享块，脚本懒加载，使得初始加载代码更小 动态import 阅读全文
posted @ 2020-08-03 00:21 浪波激泥 阅读(165) 评论(0) 推荐(0)
11 webpack tree shaking、ScopeHoisting
摘要：tree shaking 原理： DCE (Elimination) 代码不会被执行，不可到达 代码的执行结果不会被用到 代码只会影响死变量 ScopeHoisting：解决webpack打包产生大量闭包，导致内存开销较大。 跟treeshaking一样，在mode为production默认开启 阅读全文
posted @ 2020-08-02 22:50 浪波激泥 阅读(203) 评论(0) 推荐(0)
10 webpack提取页面公共资源
摘要：多个页面中有公共模块 基础库分离 思路：基础包用CDN引入，不打入bundle中，如react，react-dom 方法：html-webpack-externals-plugin ， 在配置的同时也需要在html文件中引入 方法：使用webpack4内置的SplitChunksPlugin进行公共 阅读全文
posted @ 2020-08-02 21:56 浪波激泥 阅读(286) 评论(0) 推荐(0)
9.Source map
摘要：JavaScript脚本正变得越来越复杂。大部分源码（尤其是各种函数库和框架）都要经过转换，才能投入生产环境。 常见的源码转换，主要是以下三种情况： （1）压缩，减小体积。比如jQuery 1.9的源码，压缩前是252KB，压缩后是32KB。 （2）多个文件合并，减少HTTP请求数。 （3）其他语言 阅读全文
posted @ 2020-07-31 00:01 浪波激泥 阅读(154) 评论(0) 推荐(0)
8.webpack 资源内联
摘要：资源内联：将js，css的代码内联到Html代码中去，它可以减少Http网络请求，有利于页面初始化以及css内联可以避免页面闪动等意义 Html内联和js内联 安装 npm i raw-loader@0.5.1 -D 目前0.5版本的比较稳定 在页面中引入 Css内联 多页面应用：每一次跳转，后台都 阅读全文
posted @ 2020-07-30 16:27 浪波激泥 阅读(363) 评论(0) 推荐(0)
7.webpack 自动清理目录构建产物 、css前缀和px转rem
摘要：我们在每一次打包都会生产新的文件，如果之前的没有删除，那么就会越来越多，使用clean-webpack-plugin可以做到构建前先自动清理 安装 npm i clean-webpack-plugin 然后添加在plugins css中px单位转rem,适配更多手机，在没有rem之前，为了适配各种移 阅读全文
posted @ 2020-07-30 15:21 浪波激泥 阅读(315) 评论(0) 推荐(0)
6.webpack 代码压缩
摘要：Js压缩在webpack中默认内置了uglifyjs-webpack-plugin ，在打包的时候会自动压缩，不需要专门配置 css压缩 使用 optimize-css-assets-webpack-plugin 插件和预处理器 cssnano npm i cssnano -D npm i opti 阅读全文
posted @ 2020-07-29 17:05 浪波激泥 阅读(265) 评论(0) 推荐(0)
5.webpack 文件指纹
摘要：文件指纹：文件打包后会有个文件后缀，主要应用在版本管理 文件指纹生成： JS文件指纹设置，主要在文件打包的output设置filename，使用[ chunkhash] CSS文件使用的是 [ contenthash ],由于一般css文件是在js文件中被打包引用，所以我们可以使用MiniCssEx 阅读全文
posted @ 2020-07-29 15:37 浪波激泥 阅读(270) 评论(0) 推荐(0)
4.webpack 文件监听和热更新
摘要：文件监听 在package.json添加下面语句 ，使用npm run watch命令运行即可。监听状态下按下Ctrl +C 可以退出。 watch热更新需要更新文件后手动刷新浏览器 热更新 原理： 在package.json添加下面语句 自启动浏览器 "dev": "webpack-dev-ser 阅读全文
posted @ 2020-07-29 10:38 浪波激泥 阅读(251) 评论(0) 推荐(0)
3webpack 解析
摘要：解析ES6语法 babel-loader 安装插件 npm i @babel/core @babel/preset-env babel-loader -D 新建 .babelrc 文件 在webpack.config.js文件中增加babel配置 解析 React JSX语法 在 .babel文件中 阅读全文
posted @ 2020-07-27 11:20 浪波激泥 阅读(163) 评论(0) 推荐(0)
2.基本核心概念 Entry，Output、 Loaders 、Plugins 、Mode
摘要：Entry：指定webpack打包入口 单入口：entry是一个字符串，表示文件入口地址，适合单页应用 多入口：entry是一个对象，适合多页应用 Output：用来告诉webpack将编译好的文件输出到磁盘 单出口：直接指定文件名和存储路径 多出口：使用占位符确保文件名称唯一，文件名自动对应ent 阅读全文
posted @ 2020-07-26 00:32 浪波激泥 阅读(412) 评论(0) 推荐(0)
1.小试牛刀-一个最简单的例子
摘要：新建文件夹， 使用VScode 打开，在vscode中打开新终端， node -v和npm -v确认你已经安装了Node和npm 构建package.json 文件 输入命令 npm init -y 安装webpack webpack-cli npm install webpack webpack- 阅读全文
posted @ 2020-07-25 22:59 浪波激泥 阅读(310) 评论(0) 推荐(0)