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

最新推荐文章于 2024-04-24 09:54:49 发布

IT飞牛

最新推荐文章于 2024-04-24 09:54:49 发布

阅读量1.5k

点赞数 2

分类专栏： webpack

本文链接：https://blog.csdn.net/bobo789456123/article/details/117627220

版权

webpack 专栏收录该内容

5 篇文章 3 订阅

订阅专栏

在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，可能安装会很慢甚至安装失败；可以修改镜像地址，提供多种方式：

通过.npmrc修改镜像
在根目录下创建.npmrc配置文件，并输入如下内容：
执行命令修改配置
npm config set registry https://registry.npm.taobao.org
安装cnpm，支持全部npm命令。
npm install cnpm -g --registry=https://registry.npm.taobao.org

3、搭建本地调试环境

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

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

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

4、注意

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

二、创建Mpa

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

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

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

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

修改打包命令
修改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插件；

安装插件：
npm i -D html-webpack-plugin@4.3.0
在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>

配置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"	//导出文件的模板
        })
    ]
};

执行打包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>

打包时自动清理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。

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

webpack.config.js 代码如下：

...
module.exports = {
...
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader","css-loader"]
            }
        ]
    },
...
};

新建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插件；

安装npm i -D mini-css-extract-plugin@1.6.0
配置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中静态资源

IT飞牛

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
4
评论
Webpack构建多页应用Mpa(二)：实现基础框架，单独打包样式文件

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

扫一扫