时间戳

首页 > 解决方案 > 我应该在哪里定义 index.html？

webpack - 我应该在哪里定义 index.html？

问题描述

我正在 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：“[此插件] 有望减少您必须index.html在 webpack 项目中创建自己的文件的可能性。”

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

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

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

标签： webpack

解决方案

首先，您应该区分带有 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
            }
        });
    ],
};

推荐阅读