摘要：之前寫了一個(gè)多頁(yè)應(yīng)用的配置，只有一個(gè)文件，實(shí)現(xiàn)了多入口配置打包資源文件處理。而且官方都提供了自己的腳手架。雖然也有很多別人寫的多頁(yè)配置，但是感覺(jué)配置模塊分離過(guò)于嚴(yán)重，而且滿足不了自己的需求，不適合新手學(xué)習(xí)使用。

之前寫了一個(gè)webpack多頁(yè)應(yīng)用的配置，只有一個(gè)webpack.config.js文件，實(shí)現(xiàn)了多入口配置打包c(diǎn)ss,js,資源文件處理。因?yàn)槿肟趀ntry配置需要自己添加，HtmlWebpackPlugin有多少個(gè)頁(yè)面也要自己添加。這樣看來(lái)雖然配置是成功的，但過(guò)于機(jī)械化，是不可取的

我們都知道開(kāi)發(fā)vue,react這些應(yīng)用時(shí)，一般都只有一個(gè)入口文件。而且官方都提供了自己的腳手架?？芍^是很繁瑣，偏離自己實(shí)際開(kāi)發(fā)的環(huán)境時(shí)，這些腳手架就不能滿足我們的要求了。雖然也有很多別人寫的多頁(yè)配置，但是感覺(jué)配置模塊分離過(guò)于嚴(yán)重，而且滿足不了自己的需求，不適合新手學(xué)習(xí)使用。

很多傳統(tǒng)網(wǎng)頁(yè)的開(kāi)發(fā)還是要寫很多靜態(tài)界面，比如我們公司，官網(wǎng)展示類的網(wǎng)站。如果要按照傳統(tǒng)的開(kāi)發(fā)模式，我們要為不同的頁(yè)面添加css文件，js文件，這樣大大的增加了工作量，而且很枯燥。而且不能使用es6,scss.
所以這個(gè)webpack多頁(yè)配置就是為了解決這些問(wèn)題，擁抱es6.
完整配置：webpack-M-pages

本著約定大于配置的原則，我們對(duì)頁(yè)面文件的放置進(jìn)行一定的約束。
保持html文件名與入口js文件名一致，使用glob模塊，動(dòng)態(tài)讀取文件夾生成配置

└─pages //頁(yè)面配置目錄
        ├─index
        │      index.html
        │      index.js
        │      
        ├─pageA
        │      pageA.html
        │      pageA.js
        │      
        └─pageB
                pageB.html
                pageB.js

│  .babelrc
│  .gitignore
│  .postcssrc.js
│  getEntrys.js
│  package-lock.json
│  package.json
│  README.md
│  webpack.config.js
│  
├─config
│      base.plugin.js //包含動(dòng)態(tài)生成HtmlWebpackPlugin
│      entrys.js  //動(dòng)態(tài)入口與HtmlWebpackPlugin動(dòng)態(tài)生成
│      utils.js
│      
└─src
    ├─assets
    │  ├─css
    │  │  │  bootstrap.css
    │  │  │  index.scss
    │  │  │  
    │  │  ├─pageA
    │  │  │      a.css
    │  │  │      as.scss
    │  │  │      
    │  │  ├─pageB
    │  │  │      b.css
    │  │  │      bb.scss
    │  │  │      
    │  │  └─pageC
    │  │          c.css
    │  │          
    │  ├─fonts
    │  │      glyphicons-halflings-regular.eot
    │  │      glyphicons-halflings-regular.svg
    │  │      glyphicons-halflings-regular.ttf
    │  │      glyphicons-halflings-regular.woff
    │  │      glyphicons-halflings-regular.woff2
    │  │      
    │  └─img
    │          ph.jpg
    │          
    ├─common
    │  ├─css
    │  │      reset.css
    │  │      
    │  └─js
    │          common.js
    │          
    ├─js
    │  │  testm.js
    │  │  
    │  └─other
    │          a.js
    │          b.js
    │          
    ├─lib
    │      test.js
    │      
    └─pages //頁(yè)面配置目錄
        ├─index
        │      index.html
        │      index.js
        │      
        ├─pageA
        │      pageA.html
        │      pageA.js
        │      
        └─pageB
                pageB.html
                pageB.js
            

webpack的entry配置是這樣的

module.exports = {
    devtool: "#source-map",
    entry:{
        index:"",
        about:"",
        home:"",
        .....
       }
    }

//entrys.js
var glob = require("glob")
var path = require("path")

var PAGES_DIR = path.resolve(__dirname, "../src/pages")

exports.entries = function () {
    var entryFiles = glob.sync(PAGES_DIR + "/*/*.js")
    var resultEntry = {}
    entryFiles.forEach(filePath => {
        var filename = filePath.substring(filePath.lastIndexOf("/") + 1, filePath.lastIndexOf("."))
        resultEntry[filename] = filePath
    })
    return resultEntry
}

OK，這樣我們的入口配置文件就可以這樣簡(jiǎn)寫了。

const { entries } = require("./config/entrys");
module.exports = {
    devtool: "#source-map",
    entry: entries(),
    
    }

這個(gè)其實(shí)就和自動(dòng)注入entry配置一樣，所以我們先看下 HtmlWebpackPlugin的配置

new HtmlWebpackPlugin({
    template: "index.html",
    filename: "index.html",
    chunks: ["vendors","index"],
    // hash:true,
    minify: {
      removeComments: true,
      collapseWhitespace: false //刪除空白符與換行符
    }
  });

//讀取html文件
exports.htmlPages = function () {
    var entryHtmls = glob.sync(PAGES_DIR + "/*/*.html")
    var resultHtmlPages = []

    entryHtmls.forEach(filePath => {
        var filename = filePath.substring(filePath.lastIndexOf("/") + 1, filePath.lastIndexOf("."))

        var htmlPlugin = {
            template: filePath,
            filename: filename + ".html",
            chunks: filename,
            inject: true
        }

        resultHtmlPages.push(htmlPlugin)

    })

    return resultHtmlPages
}

/*遍歷頁(yè)面，添加配置*/
let { htmlPages } = require("./entrys");
let pageArr = htmlPages();

pageArr.forEach(page => {
  const htmlPlugin = new HtmlWebpackPlugin({
    template: page.template,
    filename: page.filename,
    chunks: ["vendors", page.chunks],
    // hash:true,
    minify: {
      removeComments: true,
      collapseWhitespace: false //刪除空白符與換行符
    }
  });
  base_plugin.push(htmlPlugin);
});

let chunksArr = [];
pageArr.forEach(page => {
  chunksArr.push(page.chunks);
});

new webpack.optimize.CommonsChunkPlugin({
    name: "vendors",
    chunks: chunksArr, //提取公用模塊
    minChunks: Infinity
  }),

如何在windows下使用cmd命令生成文件樹(shù)？

tree /f > tree.txt