Где мне определить index. html? - PullRequest
Новая
       5

Где мне определить index. html?

0 голосов
/ 26 мая 2020

Я создаю SPA на Webpack, чтобы попытаться изучить экосистему и философию, стоящую за ним. Для ясности - вероятно, есть простой способ быстро делать то, что я хочу; но я не хочу знать об этом - мне нужен «правильный», передовой способ.

Мне удалось настроить компиляцию для 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 для создания веб-приложения, например, я замечаю, что index.html вообще не перемещается в dist/, а вместо этого отображается через public/index.html.

Что за правильный способ вставить мою структуру HTML в мой собранный дистрибутив?

1 Ответ

1 голос
/ 26 мая 2020

Прежде всего, вы должны различать classi c SPA с Vue / React и stati c HTML с Vue / React. SPA рендерится на стороне клиента, это означает, что есть более или менее пустой HTML, и все будет отображаться JavaScript, поэтому нет причин писать простой HTML.

Но вы можете использовать HTML Engine, например Twig / Nunjucks, с html-webpack-plugin и шаблоном. Вы можете узнать это из https://darvin.dev, это HTML Boilerplate 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
            }
        });
    ],
};
...