我应该在哪里定义 index.html？答案

【问题标题】：Where should I define index.html?我应该在哪里定义 index.html？
【发布时间】：2020-09-13 10:04:39
【问题描述】：

我正在 Webpack 上构建一个 SPA，以尝试了解其背后的生态系统和理念。需要明确的是 - 可能有一种简单，hacky的方式可以快速做我想做的事；但我不想知道 - 我想要“正确”的最佳实践方式。

我已经设法为 Typescript、Sass 等设置了编译；但我无法理解的一件事是 HTML。来自 Gulp.js，我之前有一个 gulpfile.js 将 src/index.html 直接放入 dist/。

但是，如果可能的话，我看到的参考资料表明我不应该写自己的 index.html：

https://www.npmjs.com/package/html-webpack-plugin: "你可以让插件为你生成一个 HTML 文件 [...]"

https://github.com/jaketrent/html-webpack-template: "[这个插件] 有望减少您在 webpack 项目中创建自己的index.html 文件的可能性。"

我只是不明白我怎么可能没有有一个预定义的 HTML 结构。我在哪里制作导航栏、页脚和页面内容？

我不得不问这个问题，而不是一个明显的答案，这一事实向我表明我正在以错误的方式解决这个问题。例如，如果我使用 Vue CLI 生成 Web 应用程序，我注意到 index.html 根本没有移动到 dist/ 中，而是通过 public/index.html 公开。

将我的 HTML 结构放入我构建的发行版中的正确方法是什么？

【问题讨论】：

标签： webpack

【解决方案1】：

首先，您应该区分带有 Vue/React 的经典 SPA 和带有 Vue/React 的静态 HTML。 SPA 在客户端呈现，这意味着或多或少有一个空的 HTML，所有内容都将由 JavaScript 呈现，因此没有理由编写纯 HTML。

但是您可以使用带有html-webpack-plugin 和模板的 HTML 引擎，例如 Twig/Nunjucks。你可以从https://darvin.dev 了解到，它是一个 HTML Webpack 样板。

const prod = {
    module: {
        rules: [{
            test: /\.njk$/,
            use: [{
                loader: 'simple-nunjucks-loader',
                options: {
                    searchPaths: [
                        `${ROOT_PATH}/${global.inputDirs.src}/${global.inputDirs.templates}/`,
                    ],
                    assetsPaths: [
                        `${ROOT_PATH}/${global.inputDirs.src}/${global.inputDirs.assets}/`,
                    ],
                    filters: {
                        sizes: `${ROOT_PATH}/webpack/settings/html-njk/config/nunjucks.filters.size.js`,
                    },
                    globals: {
                        darvinEnv: `${ROOT_PATH}/webpack/settings/html-njk/config/nunjucks.global.js`,
                    }
                }
            }]
        }]
    },
    plugins: [
        // loop here for each html file
        new HtmlWebpackPlugin({
            filename: targetPath + `.html`,
            template: `${global.inputDirs.src}/${global.inputDirs.templates}/${targetPath}.${global.template.extIn}`,
            hash: true,
            inject: `body`,
            cache: true,
            chunks: [elementObj.chunkName],
            templateParameters: {
                darvin: elementObj,
                sprite: allIconsInDir
            },
            minify: {
                collapseWhitespace: false,
                conservativeCollapse: false,
                removeComments: false,
                removeRedundantAttributes: false,
                removeScriptTypeAttributes: false,
                removeStyleLinkTypeAttributes: false,
                useShortDoctype: false,
                removeAttributeQuotes: false,
                removeEmptyAttributes: false,
                removeEmptyElements: false,
                removeOptionalTags: false
            }
        });
    ],
};

【讨论】：