为了账号安全,请及时绑定邮箱和手机立即绑定

使用 webpack3 配置多页应用(一)

标签:
WebApp

在本系列文章的基础上,我对脚手架配置进行了一些优化整理,基于 Webpack4 和 Vue,下面是文章链接:
基于 Webpack4 + Vue 的多页应用解决方案(一)
基于 Webpack4 + Vue 的多页应用解决方案(二)


为什么需要使用 webpack 构建多页应用呢?因为某些项目使用 SPA 不太合适(大多是 SEO 的原因),或者您在做项目时有其他的需求。
对我自己而言,前段时间需要对公司官网进行移动端改版,其实官网本身比较简单,PC 端的官网的接口调用和公共函数移动端完全可以使用,最多的改动就是样式了,完全可以使用 ES5 一路复制粘贴下去。但我也想尝试一点新东西,我想通过移动端官网这个项目做一些练手工作,我的需求大概如下:

  • 使用 ES6 进行开发

  • 期望使用面向对象开发(class)

  • 自动压缩合并 CSS 和 JS 文件

  • 使用 ESLint 进行代码检查

  • 自动生成 HTML 文件

  • 自动抽取 CSS 文件

  • ···

有了这些需求,基本上就必须使用 webpack 了,于是又开始了一次采坑之旅。我将尽可能详细的将配置过程写出来,方便您进行参考,也方便自己日后查看。本脚手架是基于 webpack3 配置的。

安装依赖

首先是项目中需要使用的依赖安装。
1.安装 webpack 和 webpack-dev-server

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

2.安装 webpack-merge

npm install webpack-merge --save-dev

该插件用来对 webpack 配置进行合并操作。
3.安装 babel 相关插件

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

这系列插件用来对 ES6 语法进行转换。
4.安装样式处理相关插件

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

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

npm install file-loader --save-dev

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

npm install url-loader --save-dev

6.安装 ESLint 相关的插件

npm install eslint eslint-loader --save-dev

这些插件用来对 JavaScript 代码进行检查。
7.安装 html-webpack-plugin 插件

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

该插件用来自动生成 HTML 文件。
8.安装 extract-text-webpack-plugin 插件

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

该插件用来将 CSS 抽取到独立的文件。
9.安装 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`);
})

在上面的代码中,首先引入了所需的插件和变量,然后利用 html-webpack-plugin 循环生成 HTML 页面。
简单说下 HTMLWebpackPlugin 构造函数的几个参数:

  • filename:生成的 HTML 文件名,我这里选择和原始文件名保持一致

  • template:生成 HTML 文件使用的模板,也就是我们之前在 html 文件夹中建立的那些文件

  • chunks:生成 HTML 文件时会自动插入相应的代码片段(也就是 JavaScript 文件),我这里选择插入每个页面对应的 JavaScript 文件,以及最后提取出来的公共文件代码块。

关于 chunks 还需要说明一点,chunks 是一个数组,在生成 HTML 文件时会将数组中的对应的 JavaScript 片段自动插入到 HTML 中,这些片段也就是 webpack 打包时的 output 选项中的 [name]。这里只需要写上 [name] 值就行了,无需使用打包生成的完整名称,因为这会还没开始打包呢,打包后生成的名称咱也不知道。
最后,我们把这些生成 HTML 文件的配置插入到 HTMLPlugins 这个数组中,同时设置 webpack 的入口文件。

总结

本文主要谈到了使用 webpack 构建多页面应用的几个核心问题,虽然就是运用了 webpack 的多入口打包以及自动生成 HTML 的一个插件,但其中的缘由还是需要我们了解的。
本文只是一个粗略的介绍,没有涉及太多配置文件细节的内容,这部分内容会在下一篇文章介绍,此处限于篇幅就不再展开了。

完。



作者:黑黢黢
链接:https://www.jianshu.com/p/2cc4a1078953


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消