【Flutter】本地 html 嵌入与使用

根据之前研究，本地 html 无法读取到分离的 js 或者 css 文件。所以只能将web端所有模块打包至同一 .html 文件中使之直接使用。

这里所讲的是如何快捷使用 create-react-app 脚手架开发，并在打包时把所有文件弄一块儿去。

注意在html模版当中放入如下一行，目的是为了禁用其自由缩放效果

<meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
    />

开发时正常。
打包前我需要调整webpack配置

打包前记得 package.json 里面要添加

"homepage": "."

这样做可以使打包出来的.html文件正常地本地打开（非服务器环境）

一、eject

npm run eject

eject 行为为不可逆操作，慎重行之。或者你也可以使用 custom-cra 自行配置。详见第二幕。
我使用 html-webpack-inline-source-plugin 来实现行内嵌入式打包，由于版本问题注意安装如下版本：

npm install html-webpack-plugin@4.0.0-beta.4 --save-dev
npm install html-webpack-inline-source-plugin@1.0.0-beta.2 --save-dev

之后打开 webpack.config.js配置

...
var HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');

...
return {
  ...,
  plugins: [
    new HtmlWebpackPlugin({ inlineSource: '.(js|css)$' }),
    new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),
    ...
  ]
}

当中 HtmlWebpackPlugin 可能还有其他项，只需要把关键的配置项嵌入即可。
之后打包出的文件仍然是和配置前一样有一堆文件和分离文件，然而这个时候的.html文件已经是可独立运行的了，巨大无比。

二、不 eject

这里如果不想 eject 的话，可以使用 customize-cra 覆盖其 webpack 配置，然后再打包。

npm install customize-cra react-app-rewired --save-dev

注意，同样的 html-webpack-plugin 和 html-webpack-inline-source-plugin 的版本同上。

npm install html-webpack-plugin@4.0.0-beta.4 html-webpack-inline-source-plugin@1.0.0-beta.2 --save-dev

然后在根目录下创建 config-overrides.js 写进如下代码

const path = require("path");
const fs = require("fs");
const { override, addWebpackPlugin } = require("customize-cra");

var HtmlWebpackPlugin = require("html-webpack-plugin");
var HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin");

const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

const addMomentLocalesPlugin = (config) => {
    config.plugins.push(new MomentLocalesPlugin());
    return config;
};

const addHtmlWebpackInlineSourcePlugin = (config) => {
    config.plugins.shift();

    config.plugins.unshift(new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin));

    config.plugins.unshift(
        new HtmlWebpackPlugin({
            inject: true,
            template: resolveApp("public/index.html"),
            inlineSource: ".(js|css)$",
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true,
            },
        })
    );

    return config;
};

module.exports = { webpack: override(addHtmlWebpackInlineSourcePlugin) };

这里直接把 config 中 plugins 的第一项干掉然后重新布置两个核心 plugin 的粗暴操作，是因为原始的 html-webpack-plugin 所在的位置就是数组第一项。如果以后变动，请视情况修改。
打包出来的成品文件同样是巨大无比，然而且可以正常运行。