webpack多页面打包方法工具和模板

最新推荐文章于 2023-08-27 10:03:54 发布

VIP文章 Jiuto_crx

最新推荐文章于 2023-08-27 10:03:54 发布

阅读量341

点赞数

文章标签： webpack javascript js

本文链接：https://blog.csdn.net/Jiuto_crx/article/details/114799318

版权

webpack多页面打包方法工具和模板

本文介绍一个多页面打包方法工具的封装和使用，项目代码见webpack_template

打包前后目录结构效果

在这里插入图片描述

打包目标为src目录，src目录下又分两类：

第一类如api这类文件夹，属于直接复制即可，此外还有一些静态资源如images等；

第二类是pages，即业务文件夹，下分为对应的personalCenter、shoppingMall等二级目录，即个人中心模块/商城模块，每个模块目录下的index文件即该模块主页，子目录如productDetails文件即商品模块子页面的商品详情；

在这里插入图片描述

打包后的文件输入在dist文件夹下：

第一类文件直接复制到dist文件，第二类文件仅保留模块目录结构（不再有src/pages层），如，

dist/api/service.js

dist/shoppingMall/index.html

dist/shoppingMall/productDetails/index.html

方法工具的使用模板

组件写法

商品组件html：src/components/shoppingMall/demo/index.html

<div class="demo">
    this is shoppingMall components demo
</div>

商城组件css：src/components/shoppingMall/demo/index.css

.demo {
   
    color: green;
}

页面引入

商品详情页html：src/pages/shoppingMall/productDetails/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <%= require('raw-loader!components/shoppingMall/demo/index.html') %>
</body>
</html>

商城详情页css：src/pages/shoppingMall/productDetails/index.css

@import "~components/shoppingMall/demo/index.css";
body {
   
    background-color: gold;
}

商城详情页js：src/pages/shoppingMall/productDetails/index.js

import './index.css'

webpack配置

引入webpack-utils，example示例中即const utils = require('../index.js');

const HtmlWebpackPlugin = require("html-webpack-plugin"

最低0.47元/天解锁文章

Jiuto_crx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack多页面打包方法工具和模板

webpack多页面打包方法工具和模板本文介绍一个多页面打包方法工具的封装和使用，项目代码见webpack_template打包前后目录结构效果打包目标为src目录，src目录下又分两类：第一类如api这类文件夹，属于直接复制即可，此外还有一些静态资源如images等；第二类是pages，即业务文件夹，下分为对应的personalCenter、shoppingMall等二级目录，即个人中心模块/商城模块，每个模块目录下的index文件即该模块主页，子目录如productDetails文件
复制链接

扫一扫