webpack5 - 查漏补缺 2

Posted 2023-03-08 GoldenaArcher

webpack5 - 查漏补缺 2

MPA 设置

MPA (Single Page Application)指的是多页面应用，这里修改基本也针对 MPA 而不是 SPA。

打包成多个 chunk

目前本地代码如下：

修改方法就是将 entry 从字符串改成对象即可，每个键值对对应不同页面的入口。

  entry:  home: './src/index.js', lion: './src/lion.js' ,
  output: 
    filename: '[name].[contenthash:8].js',
    path: path.resolve(__dirname, 'build/'),
    // default for webpack5: publicPath: 'auto'
    // default for webpack4: publicPath: ''
    publicPath: '',
    clean: true,
  ,

只是进行这样的修改的话，webpack 最终还是会将所有的 bundle 打包到一个 html 中去。

生成多个 HTML 文件

这里主要用的就是多个 HtmlWebpackPlugin 对象，每个对象指代的是一个页面，同时，chunks 中需要制定对应的 js 入口:

module.exports = 
  entry:  home: './src/index.js', lion: './src/lion.js' ,
  output: 
    filename: '[name].[contenthash:8].js',
    path: path.resolve(__dirname, 'dist/'),
    // default for webpack5: publicPath: 'auto'
    // default for webpack4: publicPath: ''
    publicPath: '',
    clean: true,
  ,
  // ...
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin(
      filename: 'hello-world.html',
      template: 'src/page-template.hbs',
      title: 'Title from HBS',
      description: 'description loaded from template file',
      chunks: ['home'], // => must be identical to entry
    ),
    new HtmlWebpackPlugin(
      filename: 'lion.html',
      template: 'src/page-template.hbs',
      title: 'Cute lion',
      description: 'Very cute lion cub',
      chunks: ['lion'], // => must be identical to entry
    ),
  ],
;

提取共享包

这里引包使用了 lodash，所以打包后两个 bundle chunk 都引入了 lodash：

对于两个页面来说，lodash 的代码是比较大，同时也是相同的，如果两个页面都引用的话，会影响用户体验感，因此这里可以通过 optimization 去让 webpack 自动提取共享的代码，并且单独打包：

  // ...
  optimization: 
    splitChunks: 
      chunks: 'all',
    ,
  ,
  // ...

webpack 对于优化的默认大小为 30kb，因此小于 30kb 的共享包不会分开打包，如果要修改这个值的话，可以指定 minSize 进行修改：

  // ...
  optimization: 
    splitChunks: 
      chunks: 'all',
      minSize: 3000 // ~3kb
    ,
  ,
  // ...

SSR

找了下，最简单的方式是使用 express 读取打包好的静态文件从而实现 SSR，这里贴一下 express 的配置：

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

app.use('/static', express.static(path.resolve(__dirname, '../dist')));

app.get('/lion', (req, res) => 
  const pathToHtmlFile = path.resolve(__dirname, '../dist/lion.html');
  const contentFromHtmlFile = fs.readFileSync(pathToHtmlFile, 'utf-8');

  res.send(contentFromHtmlFile);
);

app.get('/hello-world', (req, res) => 
  const pathToHtmlFile = path.resolve(__dirname, '../dist/hello-world.html');
  const contentFromHtmlFile = fs.readFileSync(pathToHtmlFile, 'utf-8');

  res.send(contentFromHtmlFile);
);

app.listen(3000, () => 
  console.log('Application is running on port 3000');
);

wepback 部分将 publicPath 修改为 express 中对应的静态文件：

  output: 
    filename: '[name].[contenthash:8].js',
    path: path.resolve(__dirname, 'dist/'),
    // default for webpack5: publicPath: 'auto'
    // default for webpack4: publicPath: ''
    publicPath: '/static/',
    clean: true,
  ,

如果 express 不设置 static，那么无法对 css、图片进行解析，也就没办法正常渲染图片。

另外，static 这个只是对外暴露的一个路由，目前的配置并没有说将文件写入到 dist/static 文件夹下。实际上所有的 assets 还是直接在 dist 这个根目录下的。