附录

[cinyearchan]

webpack 5 配置

详解配置

• CSS-loader 行内loader、配置文件loader，命令行loader 已被废弃

• Style-loader 将css模块转换后得到的 js模块 插入到文档

• Less-loader

• browserslistrc 工作流程

  • 兼容性： CSS JS
  • 如何实现兼容 autoprefix postcss-env babel-preset-env
  • 要兼容哪些平台 caniuse.com browser usage table 浏览器使用占有率表格 >1% 支持大于 1% 占有率的 （1%、default、dead、last 2 version）

• postcss 工作流程

  • 通过 js 转换样式的工具
  • less (less-loader) -> css -> css-loader
  • Postcss-cli 命令行使用 postcss
  • (Postcss + postcss-cli + autoprefixer + .browserlistrc)
  • 命令行测试 npx postcss —use autoprefixer -o ret.css ./src/css/test.css

• Postcss-loader 处理兼容

  • 优先级 在 css 文件之前、在 less 文件之后 使用 postcss-loader
  • { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ require('autoprefixer') ] } } }
  • postcss-preset-env 预设 — 插件集合 { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ require('postcss-preset-env'), ] } } }
  • postcss.config.js module.exports = { plugins: [ require('postcss-preset-env') ] } webpack.config.js 中只需要写 'postcss-loader' 即可

• importLoaders 属性 处理 css 文件中 @import 导入部分的 兼容转换

  • Css-loader { loader: 'css-loader', options: { importLoaders: 1 } } css-loader 找到 @import 后，再使用 css-loader 前面的 1个 loader 进行处理，即 postcss-loader

• file-loader

  • 打包图片
    • Img src
    • background url
  • { test: /.(png|svg|gif|jpe?g)$/, use: [ { loader: 'file-loader', options: { esModule: false } } ] }
    • 不转为 esModule const src= require('../src/img/xx.png') 可以不用加 '.default' 获取图片路径
    • import oSrc from '../src/img/xx.png' const img.src = oSrc 也可以不添加 '.default'
  • 处理 background-image url
    • 需要借助 css-loader，css-loader 会把 css 中 url 导入图片替换为 require 语法的 esModule
    • { loader: 'css-loader', options: { importLoaders: 1, esModule: false } }

• 设置图片名称与输出 tscproj

  • 前置知识 占位符
    • [ext] 拓展名
    • [name] 文件名
    • [hash] 文件内容md4 哈希值
    • [contentHash] 内容哈希 在 file-loader 中 与 hash 相同
    • [hash:] 哈希:限制长度
    • [path] 文件路径
  • 使用
    • use: { loader: 'file-loader', options: { name: '[name].[hash:6].[ext]', outputPath: 'img' } }
    • use: { loader: 'file-loader', options: { name: 'img/[name].[hash:6].[ext]' } } 与上无异

• url-loader 处理图片

  • 使用
    • use: { loader: 'url-loader', options: { name: 'img/[name].[hash:6].[ext]' } } 与 file-loader 的使用类似
    • file-loader 是拷贝，获取资源还是需要发送请求； url-loader 是转成 base64 变为"内联资源" uri 文件当中，减少请求次数
  • 最佳实践
    • url-loader 内部也可以调用 file-loader
    • limit 设置资源大小阈值
    • use: { loader: 'url-loader', options: { name: 'img/[name].[hash:6].[ext]', limit: 25 * 1024 } } 25KB ，大于的用拷贝，小于的用转换

• asset 处理图片

  • 用以取代 url-loader、 file-loader、raw-loader 等
  • asset module type 简化资源引入的 loader 使用
  • 前置知识
    • asset/resource -> file-loader
    • asset/inline -> url-loader
    • asset/source -> raw-loader
    • asset + 相关配置 实现 limit
  • 使用
    • 注意文件名占位符 文件拓展名之前没有点
    • 全局设置输出 output: { assetModuleFilename: "img/[name].[hash:4][ext]" } rules: { test: regExp, type: 'asset/resource' } 相当于 file-loader -> 拷贝
    • 局部设置输出 rules: { test: regExp, type: 'asset/resource', generator: { filename: "img/[name].[hash:4][ext]" } }
    • rules: { regExp, type: 'asset/inline' } 相当于 url-loader -> 转换 无需设置输出路径及文件名
    • limit 功能实现 rules: { test: regExp, type: 'asset', generator: { filename: 'img/[name].[hash:4][ext]' }, parser: { dataUrlCondition: { maxSize: 30 * 1024 } } }

• asset 处理图标字体

  • 使用
    • rules: { test: /.(ttf|woff2?)$/, type: 'asset/resource', generator: { filename: 'font/[name].[hash:3][ext]' } }

• webpack 插件使用

  • clear-webpack-plugin 清理打包输出文件夹
    • const { CleanWebpackPlugin } = require('clean-webpack-plugin') plugins: [ new CleanWebpackPlugin() ]

• html-webpack-plugin 使用

  • 使用
    • const HtmlWebpackPlugin = require('html-webpack-plugin') plugins: [ new HtmlWebpackPlugin({ title: 'html-webpack-plugin', template: './public/index.html' }) ]
    • 借助 DefinePlugin
      • const { DefinePlugin } = require('webpack') plugins: [ new DefinePlugin({ BASE_URL: '"./"' }) ]

• copy-webpack-plugin

  • 功能 拷贝静态资源文件
  • 使用
    • patterns 中只写 from，不写 to 的话，会自动去 output 下查找打包输出的目标目录
    • globOptions/ignore 避免与 html-webpack-plugin 起冲突，**/ 意味着去 from 的目录下查找
    • const CopyWebpackPlugin = require('copy-webpack-plugin') plugins: [ new CopyWebpackPlugin({ patterns: [ { from: 'public', globOptions: { ignore: [ '**/index.html' ] } } ] }) ]

• babel 使用

  • 原因
    • JSX TS ES6+ —> 浏览器平台直接使用
    • 转换
    • postcss
    • 处理 JS 兼容
  • 使用
    • @babel/core 微内核支持
    • @babel/cli 命令行使用支持
      • npx babel src —out-dir build 只能简单的进行代码拷贝，对于各种语法的转换需要借助插件实现
    • @babel/plugin-transform-arrow-function
      • 转换箭头函数 npx babel src —out-dir build —plugins=@babel/plugin-transform-arrow-functions
    • @babel/plugin-transform-block-scoping
      • 转换 let const npx babel src —out-dir build —plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping
    • @babel/preset-env 预设，工具包合集
      • npx babel src —out-dir build —presets=@babel/preset-env

• babel-loder 使用

  • 使用
    • npm i babel-loader -D
    • rules: { test: /.js$/, use: [ { loader: 'babel-loader', options: { plugins: [ '@babel/plugin-transform-arrow-functions', '@babel/plugin-transform-block-scoping' ] } } ] }
    • rules: { test: /.js$/, use: [ { loader: 'babel-loader', options: { presets: [ '@babel/preset-env' ] } } ] }
    • 默认情况下，兼容性的转换依旧会参考 .browserslistrc 文件中的配置
    • 手动设置兼容目标 rules: { test: /.js$/, use: [ { loader: 'babel-loader', options: { presets: [ [ '@babel/preset-env', { targets: 'chrome 91' } ] ] } } ] } 手动设置的目标优先级比 .browserslistrc 中的更高
  • babel.config.js(json cjs mjs) V7之后常用、babrlrc.json(js) V7之前常用
    • babel.config.js
      • modules.exports = { presets: [' @babel/preset-env '] }
      • webpack.config.js 中 rules: { test: /.js$/, use: [ 'babel-loader' ] }

• polyfill 配置

  • 作用
    • 让代码实现“软着陆”
  • 目标
    • polyfill 包含的功能繁杂，同样需要按需加载
  • 使用
    • 旧版
      • @babel/pofyfill —save
      • 其中用到的 core-js 和 regenerator-runtime 低版本已被废弃
      • 需要单独安装 core-js 和 regenerator-runtime
    • 新版
      • npm i core-js regenerator-runtime
      • 在 babel.config.js 中 preset-env 的配置中进行设置
        • useBuiltIns:
          • false -> 不对当前的 JS 处理做 polyfill 的填充；这是默认设置
          • usage -> 依据用户源码带当中所使用的新语法进行填充
          • entry -> 依据用户需要兼容的浏览器 .browserslistrc 将所有的新语法填充进去，需要手动引入 import corejs regenerator-runtime
        • module.exports = { presets: [ [ '@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 } ] ] } 需要手动指定 corejs 版本，不然默认会寻找使用低版本 corejs
        • babel-loader 中尽量排除掉对 node_modules 的加载转换，避免转换后冲突 exclude: /node_modules/

• webpack-dev-server 初始

  • 当前 watch || live server
    • webpack —config webpack.config.js —watch
    • webpack.config.js module.exports/watch = true
    • 不足
      • 所有源代码都会重新编译
      • 每次编译成功之后都需要进行文件读写
      • live server 是 vscode 的工具
      • 不能实现局部刷新
  • 使用
    • webpack serve —config webpack.config.js

• webpack-dev-middleware 使用

  • 实现自由度更高的自定义开发静态资源服务器 DIY webpack-dev-server
  • npm i express webpack-dev-middleware
  • Server.js
    • const express = require('express')
    • const webpackDevMiddleware = require('webpack-dev-middleware')
    • const webpack = require('webpack')
    • const app = express()
    • 获取配置文件 const config = require('./webpack.config.js')
    • const compiler = webpack(config)
    • app.use(webpackDevMiddleware(compiler))
    • 开启端口上的服务 app.listen(3000, () => { console.log('服务运行在 3000 端口上') })

• HMR 功能使用

  • 使用
    • devServer: { hot: true }
    • 开发模式下 mode: 'development' 会与 .browserslistrc 文件起冲突，需要额外添加一条配置 target: 'web' 屏蔽 .browserslistrc
    • 原生需要手动开启、指定要 HMR 的模块 if (module.hot) { module.hot.accept(['./title.js'], () => { console.log('title.js模块更新') }) }

• React 组件支持热更新

  • 前置
    • 针对 jsx rules: { test: /.jsx$/, use: ['babel-loader'] }
    • babel.config.js module.exports = { presets: [ ['@babel/preset-env'], ['@babel/preset-react'] ] }
  • 配置 针对 webpack V5
    • webpack.config.js
      • 引入 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
      • plugins new ReactRefreshWebpackPlugin()
    • babel.config.js
      • module.exports = { presets: [ ['@babel/preset-env'], ['@babel/preset-react'] ], plugins: [ ['react-refresh/babel'] ] }

• Vue 组件支持热更新

  • 配置
    • webpack.config.js
      • rules: { test: /.vue$/, use: ['vue-loader'] }
      • vue2 用 vue-loader@14
      • vue-loader@15 以后的版本需要额外添加 vueLoader 插件
      • const VueLoaderPlugin = require('vue-loader/lib/plugin')
      • plugins: new VueLoaderPlugin()
      • vue3 使用 vue-loader@16

• output 中的 path

  • path
    • path: path.resolve(__dirname, 'dist') 打包输出目录
  • publicPath
    • index.html 内部引用路径
    • 域名 + publicPath + filename 获取资源
    • 单独设置时
      • 默认情况下 publicPath 为空字符串，浏览器会自动将其转为 '/'，即 域名/filename
      • 如果publicPath 设置为 '/'，本地开发服务器访问与 默认情况无异，但生产模式下打包会导致资源无法访问
      • 如果 publicPath 设置为 './' 相对路径，本地开发服务器无法访问资源，但生产模式下打包正常
      • 如何设置需要自己根据模式进行取舍

• devServer 中的 path

  • publicPath
    • 指定本地服务所在的目录
    • 默认值为 '/'，
    • 尽量将 output 中的 publicPath 与 devServer 中的 publicPath 设置为一样
  • contentBase
    • 打包之后的资源如果依赖其他的资源，告知程序去哪里找
    • watchContentBase: true 监控相关依赖文件变化
    • 例子：public/index.html 可能会引用当前文件夹内的资源，开发模式下，需要通过 contentBase 指定依赖的资源目录；而在生产模式下，相关资源应该都会被 copy-webpack-plugin 拷贝到打包输出目录

• devServer 常用设置

  • hot: true 配合 hotOnly: true 修复错误后，页面刷新时，浏览器控制台的报错信息也能保留——界面中的某个组件不愿被另一个组件的语法错误受影响时
  • port: 4000
  • open: false 每次资源有更新都打开浏览器
  • compress: true 压缩资源
  • historyApiFallback: true 当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html
    • 通过 rewrites 进一步控制
      • historyApiFallback: { rewrites: [ { from: /^\/$/, to: '/views/loading.html' }, { from: /^\/subpage/, to: '/views/subpage.html' }, { from: /./, to: '/views/404.html' } ] }

• proxy 代理设置

  • 用于解决跨域
  • '/api'
    • target: 'https://api.github.com'
    • pathRewrite: { '^/api', '' }
    • changeOrigin: true

• resolve 模块解析规则

  • 作用：配置模块如何解析
  • extensions 解析补全文件拓展名
  • mainFiles: ["index"] 解析文件夹下主文件 index 等
  • modules: ["node_modules"]
  • alias 设置别名，用于简写路径

• source-map 作用

  • 设置
    • mode: 'development' 模式
    • devtool: 'source-map' 开发工具 默认为 eval
  • 作用：调试时快速定位源文件，依据转换后的代码映射到源代码

• devtool 详细说明

  • eval 直接放在 eval 当前行后面
  • source-map 产出 .map 文件
  • eval-source-map 映射文件转换为 Base64 文件的形式放在打包后的文件末尾
  • inline-source-map 映射文件转换为 Base64 文件的形式放在打包后的文件末尾
  • cheap-source-map 报错时只提供行信息，不提供列信息，减少开销
  • cheap-module-source-map 行信息中能够保留原有的空行
  • hidden-source-map 打包后会生成 .map 文件，但打包文件末尾没有 .map 文件链接信息，即默认不加载 .map 文件
  • nosources-source-map 会有错误提示，但不会有 .map 文件生成

• ts-loader 编译 TS

  • npm i ts-loader typescript -D
  • rules: [ { test: /.ts$/, use: ['ts-loader'] } ]

• babel-loader 编译 TS

  • ts-loader 只会转换 ts 语法，不会对使用到的 es 新特性做兼容转换适配
    • @babel/preset-env es6+ 语法适配
    • @babel/preset-react jsx 语法适配
    • @babel/preset-typescript typescript 中的 es 新特性适配
  • rules: [ { test: /.ts$/, use: ['babel-loader'] } ]
  • babel.config.js
    • module.exports = { presets: [ ['@babel/preset-env', { useBuiltIns: 'usage', corejs: 3 }], ['@babel/preset-typescript'] ] }
  • 不足
    • babel-loader 在打包时不能针对 TS 语法报错进行提示，打包后的代码运行时浏览器才会提示报错；而 ts-loader 可以在打包时就提示
  • 改进
    • npm run "check": "tsc —noEmit"
    • ts 文件转换仍然使用 babel-loader

• 加载 vue 文件

  • 前置
    • vue @2.x
    • vue-loader @15
    • vue-template-compiler @2.6
  • 配置
    • const VueLoaderPlugin = require('vue-loader/lib/plugin') // @16版本需要
    • rules: [ { test: /.less$/, use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 2 } }, 'postcss-loader', 'less-loader'] }, { test: /.vue$/, use: ['vue-loader'] } ]
    • plugins: [ new VueLoaderPlugin() ] // @16版本需要 针对 vue3

• 区分打包环境

  • config
    • webpack.common.js
    • webpack.dev.js
    • webpack.prod.js
  • 打包命令
    • "build": "webpack —config ./config/webpack.common.js —env production"
    • "serve": "webpack —config ./config/webpack.common.js —env development"
  • webpack.common.js 文件中自动区分环境
    • module.exports = (env) => { const isProduction = env.production return { / 具体的 webpack 配置 / } }

• 合并生成环境配置

  • 注意
    • entry 会相对于 context 进行入口查找
    • 路径查找方法提取为公共函数
      • const path = require('path')
      • const appDir = process.cwd()
      • const resolveApp = (relativePath) => path.resolve(appDir, relativePath)
      • module.exports = resolveApp
    • alias: { '@': resolveApp('./src') }
    • output: { filename: 'js/main.js', path: resolveApp('./dist') }
  • 配置 production
    • mode: 'production'
    • plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'copyWebpackPlugin', template: './public/index.html' }) ]
  • 合并
    • const { merge } = require('webpack-merge')
    • const config = isProduction ? prodConfig ? devConfig
    • const mergeConfig = merge(commonConfig, config)

• 合并开发环境配置

  • 配置 development
    • mode: 'development'
    • devtool: 'cheap-module-source-map'
    • devServer: { }
    • plugins: [ new ReactRefreshWebpackPlugin() ] // 按需设置
  • 注意
    • babel.config.js 配置针对环境动态切换插件
      • webpack.common.js 中设置，强制设置进程中的变量——因为 DefinePlugin 中定义的变量在 babel.config.js 等配置文件中是无法获取的
        • process.env.NODE_ENV = isProduction ? 'production' : 'development'
      • const plugins = []
      • if (process.env.NODE_ENV === 'development') { plugins.push(['react-refresh/babel']) }

• 代码拆分方式 optimization

  • 打包时将代码分离到不同的 bundle 中，以提高加载性能
  • 方式
    • 多入口打包，代码会被打包成多个文件
    • 注明入口依赖
      • 单依赖
        • entry: { main: { import: './src/main.js', dependOn: 'lodash' }, lodash: 'lodash' }
      • 多依赖
        • entry: { main: { import: './src/main.js', dependOn: 'shared' }, index: { import: './src/index.js', dependOn: 'shared' }, shared: ['lodash', 'jquery'] }
    • splitChunks
      • chunks: [] // async、initial、all 异步导入的模块、同步导入的模块、所有模块，拆分上述模块

• splitChunks 配置

  • chunks
  • minSize: 20000 超出大小就拆分
  • maxSize: 20000 不能比 minSize 小
  • minChunks: 1 至少被引用1次才能被拆分，优先级比 (minSize、maxSize)低，一般不与Size 共用
  • cacheGroups: { syVendors: { test: /[\/]node_modules[\/]/, filename: 'js/[id]vendor.js', priority: -10 }, default: { minChunks: 2, filename: 'js/syy[id].js', priority: -20 } } syVendors 为自定义键名

• import 动态导入配置 optimization

  • import('./title.js') 动态导入的包，打包时会自动被拆分为单独的包
  • chunkIds natural 自然数/不直观、缓存 named 文件路径及名称(建议开发环境使用) deterministic 哈希值id(建议生产环境使用)
  • output: { chunkFilename: 'js/chunk_[name].js' } 此处的 [name] 其实仍然是 上述 的 deterministic 哈希ID值
  • webpack 模范注释 import(/webpackChunkName: "title"/'./title') 打包后 [name] 才是真正的 name 而不是 哈希 ID 值

• runtimeChunk 优化配置 optimization

  • runtimeChunk 模块加载、解析规则的相关代码会被抽离出来打包成单独文件，每个入口都会有一个 rumtime 文件
    • 设置为 true 或 multiple，output: { filename: 'js/[name].[contenthash:8].bundle.js' } contenthash 在每次打包时，只有发生变化的文件的 contenthash 才会改变，便于浏览器缓存资源
    • 设置为 single，创建一个在所有生成 chunk 之间共享的运行时文件，所有入口共享一个 runtime 文件

• 代码懒加载

  • 基于动态导入
  • 对比
    • 修改前 在文件顶部动态导入 import('./title')
    • 修改后 在需要使用的地方动态导入 oBtn.addEventListener('click', () => { import('./utils').then(({ default: element }) => { console.log(element) }) })
      • import 动态导入返回的是 promise，resolved 返回值默认导出是个对象，通过 { default: xxx } 进行解构
  • 场景
    • 首屏加载时，有些代码资源没有必要全部加载，用到时再加载也不迟

• prefetch 与 preload 预获取、预加载

  • 通过魔法注释实现预获取、预加载
    • oBtn.addEventListener('click', () => { import(/webpackChunkName: 'utils'//webpackPrefetch: true/'./utils').then(({ default: element }) => { console.log(element) }) })
    • oBtn.addEventListener('click', () => { import(/webpackChunkName: 'utils'//webpackPreload: true/'./utils').then(({ default: element }) => { console.log(element) }) })
  • 对比
    • preload chunk 会在 父 chunk 加载时，以并行方式开始加载；prefetch chunk 会在 父 chunk 加载结束后开始加载
  • 场景
    • 将来某些导航可能需要用到的资源 用 prefetch，浏览器空闲时会去下载
    • 当前导航可能要用到的资源 用 preload

• 第三方扩展设置CDN

  • output: { publicPath: 'https://abc/cdn/' }
  • 以提供 lodash 的公共 CDN 服务器为例
    • externals: { lodash: '_' } 排除 lodash 打包
    • 模板文件 index.html 中引入 CDN 中的 lodash 资源

• 打包 DLL 库

  • 动态链接库，用某种方法实现了拆分 bundles，同时还大幅度提升了构建速度（有些共享的库文件没必要每次都打包到业务代码中）
  • 配置
    • mode: 'production'
    • entry: { react: ['react', 'react-dom'] }
    • output: { path: path.resolve(_dirname, 'dll'), filename: 'dll[name].js', library: 'dll_[name]' }
    • optimization: { new TerserPlugin({ extractComments: false }) } 去除版本协议说明文件
    • plugins: [ new webpack.DllPlugin({ name: 'dll_[name]', path: path.resolve(__dirname, './dll/[name].manifest.json') }) ]

• 使用 DLL 库

  • 配置
    • plugins: [ new webpack.DllReferencePlugin({ context: resolveApp('./), manifest: resolveApp('./dll/react.manifest.json') }) ]
    • const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
    • plugins: [ new AddAssetHtmlPlugin({ outputPath: 'auto', filepath: resolveApp('./dll/dll_react.js') }) ] // 将 dll 库文件添加到打包输出目录中，并在 index.html 中添加对 dll 库文件的引用

• CSS 抽离和压缩

  • 抽离
    • mode: 'production'
    • const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    • plugins: [ new MiniCssExtractPlugin({ filename: '[name].[hash:8].css' }) ]
    • rules 中 用 MiniCssExtractPlugin.loader 取代 style-loader 将 css 代码单独打包，不再通过 style 标签插入到 index.html 中
  • 压缩
    • css-minimizer-webpack-plugin
    • const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
    • optimization: { minimizer: [ new CssMinimizerPlugin() ] } // 一般配合上述的 MiniCssExtractPlugin.loader 使用

• TerserPlugin 压缩 JS

  • webpack V5 内置
    • mode: 'production'
    • optimization: { minimize: true, minimizer: [ new TerserPlugin({ extractComments: false, terserOptions: { } }) ] }

• scope hoisting

  • 作用域提升
  • production 模式默认开启
  • 依赖于 ES module 静态分析
  • 配置(production 模式下不需要配置)
    • plugins: [ new webpack.optimize.ModuleConcatenationPlugin() ]

• tree-shaking 之 usedExports 配置

  • 配置
    • mode: 'production'
    • optimization: { usedExports: true, minimize: true, minimizer: [ new TerserPlugin({ extractComments: false }) ] } // 先 usedExports 标记没有使用的函数，再 Terser 清除

• tree-shaking 之 sideEffects 配置

  • 用于控制副作用代码的清除
  • 配置
    • package.json 文件
      • "sideEffects"
        • true 全局开启
        • false 全局禁用
        • [ "./src/title.js" ] 只有 title.js 的副作用代码不会被禁用
  • 场景
    • import './css/index.css' 若不配置，可能不会被打包
    • "sideEffects": [ "*.css" ]
  • 备注
    • 针对 css 样式的 sideEffects 配置
    • rules: [ { test: /.css$/, use: [ 'style-loader', { 'css-loader', options: { importLoaders: 1, esModule: false } }, 'postcss-loader' ], sideEffects: true } ]

• Css-TreeShaking

  • purgecss-webpack-plugin
  • 使用
    • npm i glob
    • const glob = require('glob')
    • plugins: [ new PurgeCssPlugin({ paths: glob.sync(${resolveApp('./src')}/**/*, { nodir: true }) }, safelist: function() { return { standard: ['body', 'html'] } }) ]
  • 注意
    • 被注释掉的 js 代码，还是会被认为是存在引用 css
    • safelist shaking 白名单

• 资源压缩

  • development
    • compress: true
  • production
    • const CompressionPlugin = require('compression-webpack-plugin')
    • plugins: [ new CompressionPlugin({ test: /.(css|js)$/, minRatio: 0.8, threshold: 0, algorithm: 'gzip' }) ]
      • 只针对 css js 文件进行压缩
      • minRatio 压缩率，不满足的都不会被压缩
      • threshold 大小超过的才会被压缩
      • 压缩算法

• inlineChunkHtmlPlugin 使用

  • 将小容量的 chunk 直接插入到 html 中，不再通过发送请求获取
  • 配置
    • const InlineChunkHtmlPlugin = require('inline-chunk-html-plugin')
    • const HtmlWebpackPlugin = require('html-webpack-plugin')
    • plugins: [ new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [ /runtime.*.js ]) ]

• webpack 打包 Library

  • 打包自己开发的库
  • 以 utils.js 为例
    • index.js 中
      • import { foo1, foo2 } from './utils'
      • export { foo1, foo2 }
    • webpack.config.js
      • mode: 'development'
      • devtool: false
      • entry: './src/index.js'
      • output:
        • filename: 'sy_utils.js'
        • path: path.resolve(__dirname, 'dist')
        • libraryTarget: 'umd' // 统一不同平台下模块规范
        • library: 'syUtil'
        • globalObject: 'this'

• 打包时间和内容分析

  • 打包时间显示配置
    • const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
    • const smp = new SpeedMeasurePlugin()
    • smp.wrap(webpack.config 配置文件中的 config 对象)
  • 内容分析配置
    • bundle 分析 bundle analysis
      • webpack-bundle-analyzer
        • const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
        • plugins: [ new BundleAnalyzerPlugin() ]