摘要：
PWA: 渐进式网络开发应用程序(离线可访问) workbox --> workbox-webpack-plugin 1.文件结构 2.代码 index.css html,body{ margin: 0; padding: 0; height: 100%; background-color: sky 阅读全文
摘要：
//懒加载: 当文件需要时才加载~//预加载: prefetch: 会在使用之前，提前加载js文件 (webpackPrefetch: true) //正常加载可以认为是并行加载(同一时间加载多个文件)。// 预加载: prefetch: 等其他资源加载完毕，浏览器空闲了，再偷偷加载资源。(但是兼容 阅读全文
摘要：
1.文件结构 2.代码 index.js function sum(...arg) { return arg.reduce((p, c) => p + c, 0); } /* * 通过js代码，让某个文件被单独打包成一个chunk * import 动态导入语法: 能将某个文件单独打包 * */ / 阅读全文
摘要：
1.文件结构 2.代码 import $ from 'jquery' function sum(...arg) { return arg.reduce((p, c) => p + c, 0); } // eslint-disable-next-line console.log(sum(1, 2, 3 阅读全文
摘要：
1.文件结构 2.代码 index.js import { mul } from './test'; function sum(...arg) { return arg.reduce((p, c) => p + c, 0); } // eslint-disable-next-line console 阅读全文
摘要：
tree shaking：去除无用代码 前提：1. 必须使用ES6模块化 2. 开启 production 环境 作用: 减少代码体积 在package.json中配置 "sideEffects": false 所有代码都没有副作用（都可以进行tree shaking） 问题：可能会把css / @ 阅读全文
摘要：
缓存： babel缓存 cacheDirectory: true --> 让第二次打包构建速度更快 文件资源缓存 hash: 每次wepack构建时会生成一个唯一的hash值。 问题: 因为js和css同时使用一个hash值。 如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件） chunk 阅读全文
摘要：
oneOf的作用 提升构建速度，避免每个文件都被所有loader过一遍， 因为任何一个文件，构建过程中，在遇到第一个与之对应的loader后，不会再往下进行。在webpack.config.js 中配置 oneOf 1.文件结构 2.代码 webpack.config.js const {resol 阅读全文
摘要：
source-map 一种 提供 源代码 到 构建后代码映射 技术 (如果构建代码出错了，通过映射可以追踪源代码错误) 在 webpack.config.js 中配置 devtool 指定 source-map 1.文件结构 2.代码 webpack.config.js const {resolve 阅读全文
摘要：
HMR: hot module replacement 热模块替换 / 模块热替换 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） 极大提升构建速度 1.文件结构 2.代码 iconfont.css @font-face {font-family: "iconfont"; sr 阅读全文
摘要：
# webpack性能优化* 开发环境性能优化* 生产环境性能优化## 开发环境性能优化* 优化打包构建速度 * HMR* 优化代码调试 * source-map## 生产环境性能优化* 优化打包构建速度 * oneOf * babel缓存 * 多进程打包 * externals * dll* 优化 阅读全文
摘要：
这里综上所述，多种文件处理打包 1.文件结构 2.代码 a.css #box1 { width: 100px; height: 100px; background-color: pink; display: flex; backface-visibility: hidden; } b.css #bo 阅读全文
摘要：
这里使用 html-webpack-plugin 插件压缩 html 文件。 1.文件结构 2.代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title> </ 阅读全文
摘要：
压缩 JS 文件: 这里把 mode 设置为 生产模式，就会自动压缩 JS 代码。 1.文件结构 2.代码 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title> 阅读全文
摘要：
这里使用 babel 处理 js 兼容性问题 1.文件结构 2.安装 babel core-js $ npm i babel@6.23.0 @babel/core@7.8.4 @babel/polyfill@7.8.3 babel-loader@8.0.6 @babel/preset-env -D 阅读全文
摘要：
使用 eslint 对 js 进行语法检查 1.文件结构 2.安装 eslint 相关插件 $ npm i eslint@6.8.0 eslint-loader@3.0.3 eslint-plugin-import@2.20.1 eslint-config-airbnb-base@14.0.0 -D 阅读全文
摘要：
使用 optimize-css-assets-webpack-plugin 插件压缩 CSS文件。 1.文件结构 2.安装 optimize-css-assets-webpack-plugin (根据自己环境安装合适的版本) $ npm i postcss-loader@3.0.0 postcss- 阅读全文
摘要：
不同型号、版本的浏览器对CSS的支持程度不同，使用 postcss 插件对不同的浏览器做兼容。 1.文件结构 2.安装 postcss $ npm i postcss-loader@3.0.0 postcss-preset-env@6.7.0 -D 3. a.css #box1 { width: 1 阅读全文
摘要：
打包时，使用 MiniCssExtractPlugin 插件，把提取 CSS 成单独文件。 1.文件结构： 2.安装 MiniCssExtractPlugin (根据自己的环境，安装合适的版本，这里用的是wenpack 4.x) $ npm i mini-css-extract-plugin@0.9 阅读全文
摘要：
1.文件结构 2. iconfont.css @font-face {font-family: "iconfont"; src: url('../media/iconfont.eot?t=1581833245354'); /* IE9 */ src: url('../media/iconfont.e 阅读全文