webpack을 사용하여 다중 페이지 애플리케이션을 구축하기 위한 코드 예제

이 기사는 웹팩을 사용하여 다중 페이지 애플리케이션을 구축하는 방법에 대한 코드 예제를 제공합니다. 필요한 친구가 참고할 수 있기를 바랍니다.

배경: React, Vue, Angle의 3대 프론트엔드 프레임워크가 프론트엔드 분야에서 더욱 안정되면서 SPA 애플리케이션이 점점 더 많은 프로젝트에 적용되고 있습니다. 그러나 일부 특수 애플리케이션 시나리오에서는 기존 다중 페이지 애플리케이션을 사용해야 합니다. 프로젝트 엔지니어링 구축을 위해 웹팩을 사용하는 경우 해당 조정도 필요합니다.

SPA 애플리케이션과의 차이점

SPA 애플리케이션에서는 webpack을 사용하여 프로젝트를 빌드하면 html 파일, 여러 js 파일, 여러 css 파일이 생성됩니다. html 파일에서는 모든 js 및 css 파일이 참조됩니다.
다중 페이지 애플리케이션에서 webpack을 사용하여 프로젝트를 빌드하면 여러 개의 html 파일, 여러 개의 js 파일 및 여러 개의 CSS 파일이 생성됩니다. 각 html 파일에는 해당 페이지에 해당하는 js, css 파일만 참조됩니다.

Webpack 구성

항목 설정

다중 페이지 애플리케이션의 패키징은 여러 항목 js 파일 및 여러 html 템플릿 파일에 해당합니다. 개발 상태의 다중 페이지 디렉토리가 다음과 같다고 가정합니다.

    |--page1
        |--index.html
        |--index.js
        |--index.less
    |--page2
        |--index.html
        |--index.js
        |--index.less

에는 page1 및 page2 두 페이지가 포함되어 있고 해당 js 및 적은 파일. 그런 다음 webpack을 사용하여 프로젝트를 빌드하면 page1->index.js 및 page2->index.js라는 두 개의 항목 파일이 있습니다. > 및 두 개의 템플릿 파일 page1->index.html 및 page2->index.html. 그러나 프로젝트를 빌드할 때 각 페이지에 대한 항목 구성을 지정하는 것은 불가능합니다. page1 和 page2 两个页面，以及它们所对应的 js 和 less 文件。那么在使用 webpack 构建项目时，就有 page1->index.js 和 page2->index.js 两个入口文件，以及 page1->index.html 和 page2->index.html 两个模版文件。然而在构建项目时，不可能针对每一个页面指定一个入口配置。
要自动匹配到所有的页面入口及模版文件，有两种方法。

方法一：使用 node 的 fs 文件系统。来读取父级文件夹下的所有子文件夹。通过文件夹名称，来自动匹配到所有的页面。然而，这种方式需要保持父级文件夹下文件的干净。否则就需要使用具体的判断逻辑来过滤出所有的入口目录。

方法二：通过配置文件来配置入口。比如：

    entry: ['page1', 'page2'];

这样便能准确的指定出所有的入口目录。然而却在每次增加页面时，都需要去更改配置文件。
两种方法个有特点，可根据具体情况选择。

具体配置

entry

entry的配置需要根据我们获取到的入口数据来循环添加。

    const entryData = {};
    entry.forEach(function (item) {
        entryData[item] = path.join(__dirname, `../src/pages/${item}/index.js`);
    })

output

output的配置和SPA应用一致，不需要特殊配置。

    output: {
        filename: 'public/[name]_[chunkhash:8].js',
        path: path.join(__dirname, `../dist/`),
        publicPath: '/'
    },

HtmlWebpackPlugin

在使用 webpack 构建时。需要使用到 html-webpack-plugin 插件来生成项目模版。对于需要生成多个模版的多页应用来说，也需要生成多个 html 模版文件。同样的，使用获取到的入口文件数据来循环添加。

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const HtmlWebpackPluginData = [];
    entry.forEach(function (item) {
        HtmlWebpackPluginData.push(
            new HtmlWebpackPlugin({
                filename: `${item}.html`,
                template: path.join(__dirname, `../src/pages/${item}/index.html`),
                chunks: [item]
            })
        );
    })

配置中 chunks 必须配置，如果不配置，会导致每个模版文件中均引入所有的 js 和 css 文件。指定为 entry 中的配置 name，则会只引入该入口相关的文件。

配置组合

接下来，便是将前面的entry, output, htmlWebpackPlugin모든 페이지 항목과 템플릿 파일을 자동으로 일치시키려면 두 가지 방법이 있습니다.

방법 1: node의 fs 파일 시스템을 사용합니다. 상위 폴더 아래의 모든 하위 폴더를 읽습니다. 모든 페이지는 폴더 이름과 자동으로 일치됩니다. 그러나 이 방법을 사용하려면 상위 폴더의 파일을 깨끗하게 유지해야 합니다. 그렇지 않으면 특정 판단 논리를 사용하여 모든 항목 디렉터리를 필터링해야 합니다. 방법 2: 구성 파일을 통해 입구를 구성합니다. 예:

    modules.exports = {
        entry: { ...entryData },
        output: {
            filename: 'public/[name]_[chunkhash:8].js',
            path: path.join(__dirname, `../dist/`),
            publicPath: '/'
        },
        plugins: [
            ...HtmlWebpackPluginData
        ]
        ...
    }

이 방법으로 모든 항목 디렉터리를 정확하게 지정할 수 있습니다. 그러나 페이지를 추가할 때마다 구성 파일을 변경해야 합니다.

두 가지 방법 모두 고유한 특성이 있으며 특정 상황에 따라 선택할 수 있습니다. 🎜

특정 구성

항목

🎜항목 구성은 우리가 얻은 항목 데이터를 기반으로 주기적으로 추가해야 합니다. 🎜rrreee

출력

🎜출력 구성은 SPA 애플리케이션과 동일하며 특별한 구성이 필요하지 않습니다. 🎜rrreee

HtmlWebpackPlugin

🎜webpack으로 빌드하는 경우. 프로젝트 템플릿을 생성하려면 html-webpack-plugin 플러그인을 사용해야 합니다. 여러 템플릿을 생성해야 하는 다중 페이지 애플리케이션의 경우 여러 html 템플릿 파일도 생성해야 합니다. 마찬가지로, 얻은 항목 파일 데이터를 사용하여 루프에 추가합니다. 🎜rrreee🎜구성에서 chunks를 구성해야 합니다. 구성하지 않으면 모든 js 및 css 파일을 각 템플릿 파일로 가져옵니다. 항목의 구성 이름으로 지정하면 항목과 관련된 파일만 가져옵니다. 🎜

구성 조합

🎜다음 단계는 entry, output, htmlWebpackPlugin 이외의 이전 구성을 결합하는 것입니다. 따라서 다른 구성은 SPA 애플리케이션과 일치하므로 별도로 처리할 필요가 없습니다. 조합은 다음과 같습니다🎜rrreee🎜전체 데모를 볼 수 있습니다🎜다중 페이지 애플리케이션 데모🎜🎜🎜🎜

위 내용은 webpack을 사용하여 다중 페이지 애플리케이션을 구축하기 위한 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!