Electron项目中WebPack将JS转Base64及打包HTML的方法咨询

一、把本地JS脚本编码为Base64打包进Bundle #

1. 修改代码导入方式 #

换掉原来用fs.readFileSync读取文件的写法，直接通过import引入目标JS文件，加上?base64参数标记需要转Base64：

// 替换原fs.readFileSync代码
import scriptContent from './script.js?base64';
// 此时scriptContent就是Base64编码后的字符串

2. 配置Webpack规则 #

Webpack 5+ 版本（推荐）

在Webpack配置文件的module.rules里加一条规则，匹配带?base64参数的JS文件，用asset/inline自动转Base64：

module.exports = {
  // ...其他配置项
  module: {
    rules: [
      // ...已有规则
      {
        test: /\.js$/,
        resourceQuery: /base64/, // 匹配带?base64的导入请求
        type: 'asset/inline', // 将文件内容转为Base64字符串打包
      }
    ]
  }
};

Webpack 4及以下版本

先安装url-loader：

npm install url-loader --save-dev

然后配置规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        resourceQuery: /base64/,
        use: {
          loader: 'url-loader',
          options: {
            encoding: 'base64',
            esModule: false // 避免导出为ES模块对象，直接拿到字符串
          }
        }
      }
    ]
  }
};

二、将index.html打包进Bundle #

方式1：转成字符串直接导入 #

Webpack 5+

直接在代码里导入html文件，加?raw参数：

import htmlContent from './index.html?raw';
// htmlContent就是index.html的完整字符串内容，可直接用于Electron加载

然后在Webpack配置里加规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        resourceQuery: /raw/,
        type: 'asset/source' // 将文件内容转为字符串
      }
    ]
  }
};

Webpack 4及以下

先安装raw-loader：

npm install raw-loader --save-dev

然后导入时用loader前缀：

import htmlContent from 'raw-loader!./index.html';

方式2：插件自动内嵌HTML与Bundle #

如果希望Webpack自动处理HTML里的依赖（比如引入打包后的JS/CSS），并把所有内容内嵌到一个文件里，可以用插件组合：

1. 安装依赖：

npm install html-webpack-plugin html-webpack-inline-source-plugin --save-dev

2. 配置Webpack：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      inlineSource: '.(js|css)$' // 把所有JS和CSS内嵌到HTML里
    }),
    new HtmlWebpackInlineSourcePlugin()
  ]
};

打包后生成的HTML会包含内嵌的bundle代码，你可以直接读取这个HTML的内容，或者在Electron里加载该文件。

内容的提问来源于stack exchange，提问作者AlexeyD