Question

我正在Webpack上构建SPA，以尝试学习其背后的生态系统和理念。需要明确的是-可能有一种简单快捷的方法来快速完成我想做的事情；但是我不想知道这件事-我想要一种“正确”的最佳实践方式。

我设法为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结构添加到内置发行版中的正确方法是什么？

Answer 1

首先，您应该在具有Vue / React的经典SPA与具有Vue / React的静态HTML之间进行区别。 SPA是在客户端呈现的，这意味着或多或少会有一个空HTML，并且所有内容都将由JavaScript呈现，因此没有理由编写纯HTML。

但是您可以将Twig / Nunjucks之类的HTML引擎与html-webpack-plugin和模板一起使用。您可以从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
            }
        });
    ],
};

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

1 个答案: