使用webpack来生成多页面应用MPA

使用webpack配置MPA

为什么需要使用 webpack 构建多页应用呢?因为某些项目使用 SPA 不太合适(大多是 SEO 的原因),或者您在做项目时有其他的需求。
如果你有如下需求:

  • 使用 ES6 进行开发
  • 期望使用面向对象开发(class)
  • 自动压缩合并 CSS 和 JS 文件
  • 使用 ESLint 进行代码检查
  • 自动生成 HTML 文件
  • 自动抽取 CSS 文件 …

有了这些需求,基本上就必须使用 webpack 了。

安装依赖

首先是项目中需要使用的依赖安装。

  1. 安装 webpack 和 webpack-dev-server

npm install webpack webpack-dev-server --save-dev

  1. 安装 webpack-merge

npm install webpack-merge --save-dev

该插件用来对 webpack 配置进行合并操作。

  1. 安装 babel 相关插件

npm install babel-core babel-loader babel-preset-env --save-dev

这系列插件用来对 ES6 语法进行转换。

  1. 安装样式处理相关插件

npm install css-loader style-loader postcss-loader autoprefixer --save-dev

这系列插件用来处理 CSS 样式,其中 autoprefixer 是 postcss 的一个插件,用来自动给 CSS 样式添加前缀。

  1. 安装 file-loader

该插件将在导入图片、字体等文件时发挥作用。PS.您也可以安装 url-loader 以实现相同的作用:

npm install file-loader --save-dev

npm install url-loader --save-dev

  1. 安装 ESLint 相关的插件

npm install eslint eslint-loader --save-dev

这些插件用来对 JavaScript 代码进行检查。

  1. 安装 html-webpack-plugin 插件

npm install html-webpack-plugin --save-dev

该插件用来自动生成 HTML 文件。

  1. 安装 extract-text-webpack-plugin 插件

npm install extract-text-webpack-plugin --save-dev

该插件用来将 CSS 抽取到独立的文件。

  1. 安装 clean-webpack-plugin 插件

npm install clean-webpack-plugin --save-dev

该插件用来对 dist 文件夹进行清理工作,每次打包时先清理之前的 dist 文件夹。

下面是这些安装了的所有依赖:

...

  "devDependencies": {

    "autoprefixer": "^7.1.3",

    "babel-core": "^6.26.0",

    "babel-loader": "^7.1.2",

    "babel-preset-env": "^1.6.0",

    "clean-webpack-plugin": "^0.1.16",

    "css-loader": "^0.28.7",

    "eslint": "^4.6.1",

    "eslint-loader": "^1.9.0",

    "extract-text-webpack-plugin": "^3.0.0",

    "file-loader": "^0.11.2",

    "html-webpack-plugin": "^2.30.1",

    "postcss-loader": "^2.0.6",

    "style-loader": "^0.18.2",

    "url-loader": "^0.5.9",

    "webpack": "^3.5.5",

    "webpack-dev-server": "^2.7.1",

    "webpack-merge": "^4.1.0"

  },

...

配置文件划分

使用 webpack 进行项目构建时,我们有不同的目的,因此最好将配置文件进行拆分,以适应不同的工作:

├─config

│      config.js

│      webpack.config.base.js

│      webpack.config.dev.js

│      webpack.config.lint.js

│      webpack.config.prod.js

│  webpack.config.js

下面是一些配置的说明:

config.js:一些全局的配置,比如 HTML 文件的路径、publicPath 等

webpack.config.base.js:最基础的配置文件

webpack.config.dev.js:开发环境配置文件

webpack.config.lint.js:使用 ESLint 代码检查时的配置文件

webpack.config.prod.js:生产环境配置文件

webpack.config.js:主配置文件,根据环境变量引用相应的环境的配置

这些配置文件之间是通过 webpack-merge 这个插件进行合并的。

配置多页应用的关键点

如何使用 webpack 配置多页面应用呢?实现多页面应用的关键点在哪里呢?首先需要简单看一下多页应用和单页应用功能的区别。

单页应用的特点:

只有一个入口页面(index.html)
这个单页页面(index.html)中需要引入打包后的所有 JavaScript 文件
所有的页面内容完全由 JavaScript 生成
单页应用有自己的路由系统,服务器端没有和路由对应的文件
···

多页应用的特点:

每个版块对应一个页面
每个页面需要对公共的 JavaScript 进行引入
每个页面还需要引入和其自身对应的 JavaScript 文件
由于对应了多个页面,因此不是所有页面内容都是由 JavaScript 生成的
没有自己的路由系统,服务器端有对应的静态文件
···
抛开生成页面内容和路由系统,我们可以看到单页应用和多页应用最大的区别就是:

单页应用需要在入口页面引入所有的 JavaScript 文件
多页应用需要在每个页面中引入公共的 JavaScript 文件以及其自身的 JavaScript 文件
由于 CSS 文件是可以由 extract-text-webpack-plugin 这个插件自动提取并插入到 HTML 页面的,因此我们只需要关心如何在 HTML 页面中引入 JavaScript 文件了。
webpack 在打包时,会将入口文件中的 JavaScript 文件打包到某个目标文件中,在不考虑代码分割提取的情况下,一个入口文件会打包为一个目标文件,多个入口文件会打包为多个对应的目标文件。
因此,我们可以将每个多页页面中的特有的 JavaScript 文件作为入口文件,在打包时将对应打包成不同的 bundle 文件(结果文件),如果你想要的话,还可以在打包时进行代码分割处理,将公用代码抽取成一个文件,然后在 HTML 中引入这些 JavaScript 文件就好了。
总结一下,使用 webpack 配置多页应用的关键点在于:

将每个页面中特有的 JavaScript 文件作为入口文件进行打包
在打包后,每个页面中都需要引入这些打包后的文件
您可以在打包时进行公用代码提取,然后在 HTML 文件中引入
说了这么多,其实就是利用了 webpack 多入口文件进行打包。

自动生成 HTML 页面

在使用 webpack 对 JavaScript 文件进行打包时,通常需要在打包的文件名中加一个 hash 字符串用来防止缓存,当我们修改了 JavaScript 代码后,打包后的文件名也会发生变化。此时如果手动在 HTML 中引用这些 JavaScript 文件,是非常麻烦的。
因此,我们期望能自动生成 HTML 文件,并自动引用打包后的 JavaScript 文件。所谓自动生成 HTML 文件,可以理解为将源代码的 HTML 复制到目标文件夹中,同时自动引用打包后的 JavaScript 文件。
要完成这项操作,就需要使用前面安装的 html-webpack-plugin 这个插件。

html-webpack-plugin 插件的使用

首先,在我的项目中,有这么一些 HTML 页面,将它们放在 html 文件夹中:

Mode                LastWriteTime         Length Name

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

-a----         2017/9/5     18:04           1071 company_intro.html

-a----         2017/9/5     18:04            988 contact_us.html

-a----         2017/9/5     18:04           1131 cooperate.html

-a----         2017/9/5     18:04           1244 enterprise_culture.html

-a----         2017/9/5     18:04           1011 hornors.html

-a----         2017/9/5     18:04           1365 index.html

-a----         2017/9/5     18:04           1769 investment.html

-a----         2017/9/5     18:04           1005 join_us.html

-a----         2017/9/5     18:04           1037 news_center.html

-a----         2017/9/5     18:04            987 news_item.html

-a----         2017/9/5     18:04           1134 operate.html

-a----         2017/9/5     18:04           1255 product.html

-a----         2017/9/5     18:04           1132 schools.html

然后,把这些 HTML 文件名(不要后缀)都写在 config.js 文件中,以供取用:

module.exports = {

    HTMLDirs:[

        "index",

            "company_intro",

            "enterprise_culture",

            "hornors",

            "news_center",

            "news_item",

            "product",

            "schools",

            "operate",

            "cooperate",

            "join_us",

            "contact_us",

            "investment"

            ],

        }

HTMLDirs 是一个数组,其中保存了项目中会用到的所有 HTML 页面。
接下来,每个 HTML 页面都对应一份 JavaScript 代码,因此在 js 文件夹中建立对应的 JavaScript 文件:

Mode                LastWriteTime         Length Name

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

-a----         2017/9/5     18:04           2686 company_intro.js

-a----         2017/9/5     18:04            594 contact_us.js

-a----         2017/9/5     18:04           1725 cooperate.js

-a----         2017/9/8     16:54           3505 enterprise_culture.js

-a----         2017/9/5     18:04           2208 hornors.js

-a----         2017/9/8     16:54           4491 index.js

-a----         2017/9/5     18:04           3180 investment.js

-a----         2017/9/5     18:04           1327 join_us.js

-a----         2017/9/8     16:55           3689 news_center.js

-a----         2017/9/5     18:04           1972 news_item.js

-a----         2017/9/5     18:04           2728 operate.js

-a----         2017/9/5     18:04           2664 product.js

-a----         2017/9/5     18:04           2476 schools.js

这两项是必须的,只有提供了每个页面的 HTML 文件和对应的 JavaScript 文件,才能构建多页面应用。
同时,可能每个页面都有自己的样式,因此您也可以在 css 文件夹中建立一些样式文件:

Mode                LastWriteTime         Length Name

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

-a----         2017/9/5     18:04            419 company_intro.css

-a----         2017/9/5     18:04            167 contact_us.css

-a----         2017/9/5     18:04            214 cooperate.css

-a----         2017/9/5     18:04            926 enterprise_culture.css

-a----         2017/9/5     18:04            255 hornors.css

-a----         2017/9/5     18:04            693 investment.css

-a----         2017/9/5     18:04            136 join_us.css

-a----         2017/9/5     18:04            541 news_center.css

-a----         2017/9/5     18:04            623 news_item.css

-a----         2017/9/5     18:04            342 operate.css

-a----         2017/9/5     18:04            236 product.css

-a----         2017/9/5     18:04            213 schools.css

关于建立样式这一项,不是必须的。
最后,我们就可以使用 html-webpack-plugin 这个插件来自动生成 HTML 文件了,html-webpack-plugin 插件的用法如下:

</

// 引入插件

const HTMLWebpackPlugin = require("html-webpack-plugin");

// 引入多页面文件列表

const { HTMLDirs } = require("./config");

// 通过 html-webpack-plugin 生成的 HTML 集合

let HTMLPlugins = [];

// 入口文件集合

let Entries = {}

// 生成多页面的集合

HTMLDirs.forEach((page) => {

    const htmlPlugin = new HTMLWebpackPlugin({

        filename: `${page}.html`,

        template: path.resolve(__dirname, `../app/html/${page}.html`),

        chunks: [page, 'commons'],

    });

    HTMLPlugins.push(htmlPlugin);

    Entries[page] = path.resolve(__dirname, `../app/js/${page}.js`);

})

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值