Webpack4 的多页应用脚手架配置教程

阅读时长 12 分钟读完

前言

Webpack 是一个在现代前端项目中广泛使用的代码打包工具,它可以打包 JavaScript、CSS、图片等多种类型的文件,并将它们转换为优化的静态资源。在 Webpack 中使用模块化编程的方式,可以帮助我们更好地组织代码,提高项目的可维护性和复用性。

在实际项目中,我们往往需要开发多页应用,每个页面都是一个单独的 HTML 文件,依赖不同的 JavaScript 和 CSS 文件。在这种情况下,我们需要使用 Webpack 配置多入口、多输出,同时将静态资源正确地注入到 HTML 中。

本文将详细介绍如何使用 Webpack4 配置多页应用脚手架,包括:

  • 模块化编程
  • 多入口配置
  • 输出文件配置
  • HTML 注入及模板配置
  • CSS 和图片文件处理

模块化编程

在 Webpack 中,我们使用模块化编程的方式来组织代码。一个模块可以是 JavaScript 文件、CSS 文件、图片、字体等等。当 Webpack 解析文件时,会根据文件类型选择不同的处理方式,并自动解决依赖关系。

一个典型的 JavaScript 模块通常包含一个函数或一个类,而这些函数或类可能会被其他模块所调用。为了能够在其他模块中使用当前模块的函数或类,我们需要使用 export 关键字将它们暴露出去。例如:

在上面的例子中,我们通过 import 关键字引入了另一个模块,export default 表示模块中默认导出的内容是一个函数。我们可以通过调用 sayHello 来执行 sayHello.js 模块中的函数。

多入口配置

在多页应用中,我们需要为每个页面配置对应的 JavaScript 入口文件。在 Webpack 中,我们可以通过 entry 属性来配置多个入口文件。

在上面的代码中,我们为 homeaboutcontact 三个页面分别配置了一个 JavaScript 入口文件。

输出文件配置

在多页应用中,每个页面都需要输出对应的 HTML 文件和 JavaScript 文件。Webpack 通过 output 属性来配置这些输出文件。

-- -------------------- ---- -------
----- ---- - ----------------

-------------- - -
  ------ -
    ----- ----------------------
    ------ -----------------------
    -------- -------------------------
  --

  ------- -
    ----- ----------------------- --------
    --------- ------------
    ----------- ---
  -
--
展开代码

在上面的代码中,我们配置了 path 属性,指定了输出文件的目录。filename 属性使用了占位符 [name],表示和入口文件名一致的 JavaScript 输出文件。publicPath 属性指定了输出文件的公共路径,可以用于将资源部署到 CDN 上。在后续的 HTML 注入中,我们可以使用 publicPath 属性来正确地加载资源。

HTML 注入及模板配置

在多页应用中,每个 HTML 文件都需要包含对应的 JavaScript 文件和 CSS 文件。Webpack 可以通过 html-webpack-plugin 插件来自动处理这些注入。

首先,我们需要安装 html-webpack-plugin

然后在 Webpack 配置文件中添加 plugins 属性来启用插件。

-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ---- - ----------------

-------------- - -
  ------ -
    ----- ----------------------
    ------ -----------------------
    -------- -------------------------
  --

  ------- -
    ----- ----------------------- --------
    --------- ------------
    ----------- ---
  --

  -------- -
    --- -------------------
      --------- ------------------------
      --------- ------------
      ------- ---------
    ---
    --- -------------------
      --------- -------------------------
      --------- -------------
      ------- ----------
    ---
    --- -------------------
      --------- ---------------------------
      --------- ---------------
      ------- ------------
    ---
  -
--
展开代码

在上面的代码中,我们使用 HtmlWebpackPlugin 来生成 HTML 文件,其中 template 属性指定了 HTML 文件的模板,filename 属性指定了输出的 HTML 文件名,chunks 属性指定了需要注入的 JavaScript 文件。

除此之外,我们还可以使用 html-loader 将 HTML 文件作为一个模块来加载,并可以使用模板引擎实现动态数据绑定。

-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ---- - ----------------

-------------- - -
  ------ -
    ----- ----------------------
    ------ -----------------------
    -------- -------------------------
  --

  ------- -
    ----- ----------------------- --------
    --------- ------------
    ----------- ---
  --

  ------- -
    ------ -
      -
        ----- ----------
        ---- -
          -
            ------- --------------
            -------- -
              --------- -----
              ------------ -----
              ------ ----------- -------------
            --
          --
          -
            ------- -----------------------
            -------- -
              ------- -----------
              -------------- -
                -------- -----
              --
            --
          --
        --
      --
    --
  --

  -------- -
    --- -------------------
      --------- ------------------------
      --------- ------------
      ------- ---------
    ---
    --- -------------------
      --------- -------------------------
      --------- -------------
      ------- ----------
    ---
    --- -------------------
      --------- ---------------------------
      --------- ---------------
      ------- ------------
    ---
  -
--
展开代码

在上面的代码中,我们使用 html-loader 将 HTML 文件作为一个模块来加载,并设置了相应的配置项。在 template-html-loader 中,我们使用了 nunjucks 模板引擎来实现动态数据绑定。

CSS 和图片文件处理

在多页应用中,每个页面可能需要使用不同的 CSS 文件和图片资源。下面是 Webpack 配置文件中的一些相关配置。

-- -------------------- ---- -------
----- -------------------- - -----------------------------------
----- ----------------------- - ----------------------------------------------
----- ----------------- - -------------------------------
----- ---- - ----------------

-------------- - -
  ------ -
    ----- ----------------------
    ------ -----------------------
    -------- -------------------------
  --

  ------- -
    ----- ----------------------- --------
    --------- ------------
    ----------- ---
  --

  ------- -
    ------ -
      -
        ----- ---------
        ---- -
          -
            ------- ----------------------------
          --
          -
            ------- -------------
            -------- -
              -------------- --
            --
          --
          -
            ------- -----------------
            -------- -
              ------ ----------
              -------- -
                --------------------------
              --
            --
          --
        --
      --
      -
        ----- -----------------------
        ---- -
          -
            ------- -------------
            -------- -
              ------ -----
              ----- ------------------------
              ----------- -------
            --
          --
        --
      --
    --
  --

  -------- -
    --- ----------------------
      --------- ----------------------
    ---
    --- --------------------------
    --- -------------------
      --------- -
        -
          ----- ----------------------- --------------
          --- ----------------------- ---------------
        --
      --
    ---
    --- -------------------
      --------- ------------------------
      --------- ------------
      ------- ---------
    ---
    --- -------------------
      --------- -------------------------
      --------- -------------
      ------- ----------
    ---
    --- -------------------
      --------- ---------------------------
      --------- ---------------
      ------- ------------
    ---
  -
--
展开代码

在上面的代码中,我们使用了 MiniCssExtractPlugin 插件来将 CSS 单独打包,同时使用 OptimizeCssAssetsPlugin 来压缩 CSS 文件。在处理图片文件时,我们使用了 url-loader 将小于 8KB 的图片转换为 base64 编码,大于 8KB 的图片则使用 file-loader 进行处理。我们还可以使用 CopyWebpackPlugin 将静态文件复制到输出目录中。

结语

通过本文的介绍,我们学习了如何使用 Webpack4 配置多页应用脚手架,并掌握了多个重要的配置项,包括模块化编程、多入口配置、输出文件配置、HTML 注入及模板配置、CSS 和图片文件处理等方面的内容。我们希望这篇文章能够对您有所帮助,并能够为您的项目带来更好的组织和优化。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6793574b504e4ea9bd791bcc

纠错
反馈

纠错反馈