├── build            構(gòu)建服務(wù)和webpack配置 ├──── build.js         構(gòu)建全量壓縮包 (打包項目) ├──── setting.js        多頁面入口配置 ├──── style.js         頁面1對1抽取生成css文件 ├──── utils.js         工具類 ├──── webpack.base.conf.js   webpack通用配置 ├──── webpack.dev.conf.js    webpack開發(fā)環(huán)境配置 ├──── webpack.prod.conf.js   webpack生產(chǎn)環(huán)境配置├── config           webpack開發(fā)/生產(chǎn)環(huán)境部分配置├── dist            項目打包目錄├── package.json        項目配置文件├── src             項目目錄├──── common          多頁面公用方法與css├──── about           about頁面├──── home           home頁面

//node 文件操作模塊const fs = require('fs');//node 路徑模塊const path = require('path');//使用node.js 的文件操作模塊來獲取src文件夾下的文件夾名稱 ->[about,common,home]const entryFiles = fs.readdirSync(path.resolve(__dirname, '../src'));//生成html文件插件const HtmlWebpackPlugin = require('html-webpack-plugin');//工具類提取_resolve方法const { _resolve } = require('./utils');//入口文件過濾common文件夾(因為common文件夾我們用來存放多頁面之間公用的方法與css,所以不放入入口進行構(gòu)建!)const rFiles = entryFiles.filter(v => v != 'common');module.exports = { //構(gòu)建webpack入口 entryList: () => {  const entryList = {};  rFiles.map(v => {   entryList[v] = _resolve(`../src/${v}/index.js`);  });  return entryList; }, //src文件夾下的文件夾名稱 ->[about,common,home] entryFiles: entryFiles, //使用html-webpack-plugin生成多個html頁面.=>[home.html,about.html] pageList: () => {  const pageList = [];  rFiles.map(v => {   pageList.push(    new HtmlWebpackPlugin({     template: _resolve(`../src/${v}/index.html`),     filename: _resolve(`../dist/${v}.html`),     chunks: ['common', v],     //壓縮配置     minify: {      //刪除Html注釋      removeComments: true,      //去除空格      collapseWhitespace: true,      //去除屬性引號      removeAttributeQuotes: true     },     chunksSortMode: 'dependency'    })   );  });  return pageList; }};

//引入setting.js 入口配置方法,與html生成配置const { entryList, pageList } = require('./setting.js');const baseConf = { entry: entryList(), plugins: [...pageList()]};

const path = require('path');//抽取css文件插件const ExtractTextPlugin = require('extract-text-webpack-plugin');//引入入口配置const { entryList, entryFiles } = require('./setting.js');//多個ExtractTextPlugin實例const plugins = [];entryFiles.map(v => { plugins.push(  new ExtractTextPlugin({   filename: `css/${v}.[contenthash].css`,   allChunks: false  }) );});module.exports = { //使用正則匹配到每個頁面對應(yīng)style文件夾下的css/less文件,并配置loader來進行解析.從而實現(xiàn)html<->css 1對1 rulesList: () => {  const rules = [];  entryFiles.map((v, k) => {   rules.push({    test: new RegExp(`src(////|//)${v}(////|//)style(////|//).*/.(css|less)$`),    use: plugins[k].extract({     fallback: 'style-loader',     use: ['css-loader', 'postcss-loader', 'less-loader']    })   });  });  return rules; }, //插件實例 stylePlugins: plugins};

//引入方法const { rulesList, stylePlugins } = require('./style.js');const prodConf = { module: {  rules: [...rulesList()] }, plugins: [...stylePlugins]};