Webpack构建多页应用Mpa：实现基础框架，单独打包样式文件

Posted IT飞牛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Webpack构建多页应用Mpa：实现基础框架，单独打包样式文件相关的知识，希望对你有一定的参考价值。

在MVVM框架大行其道的时代，考虑Mpa来实现一个应用实在有些落伍，但是不免还是有一些应用场景，正如 Webpack构建多页应用Mpa(一) 提到：

如果团队没有专职前端，并且项目预留时间也很紧张，没足够时间去系统学习工程化Vue项目，但是却也想让html、css、js这些代码被打包压缩，尽可能减少文件大小。并且想让项目导出的文件结构尽可能清晰、规整；

一、概要

1、最终要达到的目标是

  • 源代码统一存放在src目录下，打包后的html、css 、js等文件统一存放在dist目录
  • 压缩html、css 、js代码
  • html代码中静态资源，如js、css、jpg、gif、ttf等自动检测打包到dist/static/image、dist/static/font、dist/static/js

2、改用淘宝镜像仓

直接运行npm i xxx -S，可能安装会很慢甚至安装失败；可以修改镜像地址，提供多种方式：

  1. 通过.npmrc修改镜像
    在根目录下创建.npmrc配置文件，并输入如下内容：
    在这里插入图片描述

  2. 执行命令修改配置
    npm config set registry https://registry.npm.taobao.org

  3. 安装cnpm，支持全部npm命令。
    npm install cnpm -g --registry=https://registry.npm.taobao.org

3、搭建本地调试环境

搭建本地服务器方法比较多，可以使用iis、wamp、phpstudy等；node环境下，我们可以使用http-server来搭建。

  1. 全局安装，npm i -g http-server
  2. 执行命令行：http-server dist

在正式的开发过程中，我们可以开启webpack自带的devServer做热更新调试。热更新调试不会时时导出文件到dist目录，而是把最新的文件更新到内存。这里为了方便观察，我们采用http-server。

4、注意

在整个实现过程中，经常会出现打包报错的情形，很多是由于各个插件版本差异导致，所以务必安装教程中指定的插件版本，避免不必要的麻烦；

二、创建Mpa

下面我们开始一步步实现，let’s go…

1、新建一个简单的webpack应用

  1. 进入Mpa项目目录，初始化项目npm init
  2. 根目录新建一个文件夹Mpa，进入后运行以下命令：
    npm i -D webpack@4.46.0
    npm i -D webpack-cli@4.7.0
  3. 根目录创建src目录，并在目录下新建index.js文件，文件内容如下：
    console.log("hello world");
  4. 根目录创建webpack.config.js文件，配置内容如下：
    module.exports = { mode: "development" };
  5. 执行打包命令npx webpack，会在项目根目录生成dist目录，并生成main.js文件

文件结构如下：
一个简单的webpack项目文件目录结构

  1. 修改打包命令
    修改package.json，在scripts字段添加一行配置。执行npm run dev来打包，效果等同于npx webpack。

代码如下：

...

  "scripts": {
    "dev": "npx webpack",
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
...

浏览器打开 http://127.0.0.1:8080/

2、支持自动生成html页面

不光要支持自动生成dist/main.js文件，还要支持将dist/main.js插入到对应的html页面，这里借助html-webpack-plugin插件；

  1. 安装插件：
    npm i -D html-webpack-plugin@4.3.0
  2. 在src目录下新建index.html

src/index.html 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是首页</title>
</head>
<body>
    首页
</body>
</html>
  1. 配置webpack.config.js
    分别设置 入口文件（entry）、出口文件（output）、插件（plugins）。需要注意的是，在配置文件路径的时候，如果采用相对路径，默认是在根目录。
    entry： 设置入口文件是./src/index.js
    output.path： 设置导出最终导出js文件的路径
    output.filename： 设置最终导出js文件的名称
    plugins： 插件清单，是数组类型。

webpack.config.js代码如下：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "index.js",
        path: path.resolve(__dirname, "dist")
    },
    mode: "development",
    plugins: [
        new HtmlWebpackPlugin({
            title: "首页",							//导出html文件的title
            filename: "./index.html",		//导出的文件名
            template: "./src/index.html"	//导出文件的模板
        })
    ]
};
  1. 执行打包npx webpack，自动生成dist文件件，里面有index.js、index.html两个文件；
    文件结构如图：
    在这里插入图片描述
    我们看到dist目录中自动生成了index.html文件，并且将最终生成chunk（自动生成的index.js文件）引入了body标签底部，<script src="index.js"></script>；

dist/index.html 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>这是首页</title>
</head>
<body>
    首页
<script src="index.js"></script></body>
</html>
  1. 打包时自动清理dist目录
    安装清理插件：npm i -D clean-webpack-plugin@3.0.0，修改output导出文件名称为main.js，执行打包npx webpack，我们看到dist目录下之前的index.js文件被自动删除了。

生成文件如图：
在这里插入图片描述
webpack.config.js 代码如下：

...
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist")
    },
    plugins: [
        new CleanWebpackPlugin(),
        ...
    ]
};

3、识别css样式文件

识别css、less、sass等样式文件时，我们需要使用对应的xxx-loader。
loader是干什么用的，webpack官网给的解答是：webpack 支持使用 loader 对文件进行预处理。你可以构建包括 JavaScript 在内的任何静态资源。并且可以使用 Node.js 轻松编写自己的 loader。

  1. 安装npm i -D css-loader@5.2.6
  2. 安装npm i -D style-loader@2.0.0
  3. webpack.config.js添加css-loader、style-loader

webpack.config.js 代码如下：

...
module.exports = {
...
    module: {
        rules: [
            {
                test: /\\.css$/,
                use: ["style-loader","css-loader"]
            }
        ]
    },
...
};
  1. 新建src/index.css，并在index.js头部引入import "./index.css";

src/index.js 代码如下：

import "./index.css";
console.log("hello world");

执行npm run dev打包后，刷新http://127.0.0.1:8080/，我们看到样式被内嵌到了head标签中，如图：

4、将css样式文件单独打包

使用css-loader和style-loader之后，并不是想要的效果，最好是把引入的css也单独打包出来，然后在dist/index.html引入。这需要使用mini-css-extract-plugin插件；

  1. 安装npm i -D mini-css-extract-plugin@1.6.0
  2. 配置webpack.config.js

webpack.config.js 代码如下：

...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
	...
    module: {
        rules: [
            {
                test: /\\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            }
        ]
    },
    plugins: [
		...
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[name].css"
        })
    ]
};

执行npm run dev打包后，刷新http://127.0.0.1:8080/，我们看到css文件被引入到了head标签中，如图：

三、总结

到这里，实现了整个项目中的基础功能：
1、创建页面必须的html、css、js文件，打包时自动将chunk和css引入到html文件body标签底部
2、打包时自动清除dist文件夹
3、使用http-server和npm run dev，搭建简易的调试环境

后面章节，将实现如下功能：
1、css兼容
2、js语法兼容、es6新特性加绒
3、多页面架构搭建
4、自动打包html中静态资源

以上是关于Webpack构建多页应用Mpa：实现基础框架，单独打包样式文件的主要内容，如果未能解决你的问题，请参考以下文章

Webpack构建多页应用Mpa：提取公共jscsshtml代码，实现图片字体单独打包，拆分多环境配置文件

Webpack构建多页应用Mpa：阐述设计概要

webpack从零开始构建多页项目（mpa）

浅析：单页应用(SPA)和多页应用(MPA)的区别

浅析：单页应用(SPA)和多页应用(MPA)的区别

如何将 Webpack 4 SplitChunksPlugin 与 HtmlWebpackPlugin 一起用于多页应用程序？