Webpack-utils-c NPM

webpack多页面打包工具

打包前后目录结构效果

打包目标为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");
// 给setEntryAndHtmlPlugin方法传入pages目录命数组，其中首页需放在名为home的文件夹下
const pagesFile = ['shoppingMall', 'personalCenter', 'home'];
const { entry, htmlWebpackPlugins } = utils.setEntryAndHtmlPlugin(pagesFile);
// webpack配置入口和插件
module.exports = {
    entry: entry,
    plugins: [].concat(htmlWebpackPlugins.map(html=>{return new HtmlWebpackPlugin(html)})),
}

webpack

glob

@everything-registry/sub-chunk-3133 @infinitebrahmanuniverse/nolb-webpack-u

1.0.0

3 years ago