在前端开发中，多页面应用（MPA）是一种常见的应用类型。相比于单页面应用（SPA），MPA 更适合一些需要 SEO 或者复杂交互场景的应用。然而，MPA 的开发和维护往往需要更多的工作量和技术复杂度。本文将介绍基于 webpack 的 MPA 工程架构实践，从而提高开发效率和代码质量。
工程架构设计
架构图
目录结构
-- -------------------- ---- ------- --- ---- - --- ----- - - --- ---------- - - --- -------- - - --- --------- - - --- ------ - - --- --- - --- ----- - - --- ---------- - - --- -------- - - --- --------- - - --- ------ - - --- --- - --- --- --- --- - --- ----- - - --- -------- - - --- ---------- - - --- ---------- - - --- ------ - - --- --- - --- ----- - - --- -------- - - --- ---------- - - --- ---------- - - --- ------ - - --- --- - --- --- --- ----------------- --- ---
技术选型
- Webpack：打包工具，用于将多个页面的代码打包成独立的文件。
- Babel：将 ES6+ 代码转换为 ES5，以兼容更多的浏览器。
- Sass：CSS 预处理器，提供更加强大的样式编写能力。
- ESlint：静态代码检查工具，用于规范化代码风格和减少错误。
实践步骤
初始化项目
创建一个空的项目目录，并初始化 npm。
mkdir my-project cd my-project npm init -y
安装依赖
安装 webpack 和一些常用的 loader 和 plugin。
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin clean-webpack-plugin babel-loader @babel/core @babel/preset-env sass-loader node-sass css-loader style-loader mini-css-extract-plugin eslint eslint-loader eslint-config-airbnb-base -D
配置 webpack
在项目根目录下创建 webpack.config.js 文件，并添加以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
----- -------------------- - -----------------------------------
-------------- - -
------ -
------ -----------------------
------ -----------------------
--
------- -
--------- ------------------
----- ----------------------- --------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ----------------------
--
--
--
-
----- ----------
---- -
----------------------------
-------------
--------------
--
--
--
--
-------- -
--- ---------------------
--- -------------------
--------- -------------------------
--------- -------------------
------- ----------
---
--- -------------------
--------- -------------------------
--------- -------------------
------- ----------
---
--- ----------------------
--------- -------------------
---
--
--以上代码中，我们定义了两个入口文件，分别对应两个页面。使用 HtmlWebpackPlugin 生成 HTML 文件，并将打包后的 JS 和 CSS 文件引入。使用 MiniCssExtractPlugin 将 CSS 提取为单独的文件。
配置 ESlint
在项目根目录下创建 .eslintrc.js 文件，并添加以下代码：
-- -------------------- ---- -------
-------------- - -
-------- --------------
------ -
------------- ------
------------------------------------ --------- - ---------------- ---- ---
--
---- -
-------- -----
----- -----
--
--以上代码中，我们使用了 Airbnb 的代码风格规范，并对一些规则进行了调整。
编写代码
在 src 目录下，为每个页面创建一个子目录，包含 HTML、JS 和 SCSS 文件。例如：
-- -------------------- ---- ------- --- --- - --- ----- - - --- -------- - - --- ---------- - - --- ---------- - - --- ------ - - --- --- - --- ----- - - --- -------- - - --- ---------- - - --- ---------- - - --- ------ - - --- --- - --- ---
运行项目
在 package.json 中添加以下命令：
{
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production"
}
}使用 npm start 命令启动开发服务器，使用 npm run build 命令打包项目。
总结
本文介绍了基于 webpack 的 MPA 工程架构实践，包括目录结构、技术选型、实践步骤和代码示例。通过使用该工程架构，可以提高开发效率和代码质量，适用于中大型的多页面应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d008ecadd4f0e0ff91db94