- 打包目标为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-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)})),
}