重寫webpack多頁應用配置腳手架

以前寫了一個webpack多頁應用的配置，只有一個webpack.config.js文件，實現了多入口配置打包css,js,資源文件處理。由於入口entry配置須要本身添加，HtmlWebpackPlugin有多少個頁面也要本身添加。這樣看來雖然配置是成功的，但過於機械化，是不可取的

爲何要進行多頁應用配置？

咱們都知道開發vue,react這些應用時，通常都只有一個入口文件。並且官方都提供了本身的腳手架。可謂是很繁瑣，偏離本身實際開發的環境時，這些腳手架就不能知足咱們的要求了。雖然也有不少別人寫的多頁配置，可是感受配置模塊分離過於嚴重，並且知足不了本身的需求，不適合新手學習使用。

不少傳統網頁的開發仍是要寫不少靜態界面，好比咱們公司，官網展現類的網站。若是要按照傳統的開發模式，咱們要爲不一樣的頁面添加css文件，js文件，這樣大大的增長了工做量，並且很枯燥。並且不能使用es6,scss.
因此這個webpack多頁配置就是爲了解決這些問題，擁抱es6.
完整配置： webpack-M-pages

讀取頁面，進行多入口配置

本着約定大於配置的原則，咱們對頁面文件的放置進行必定的約束。
保持html文件名與入口js文件名一致，使用glob模塊，動態讀取文件夾生成配置

└─pages //頁面配置目錄
        ├─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 //包含動態生成HtmlWebpackPlugin
│      entrys.js  //動態入口與HtmlWebpackPlugin動態生成
│      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 //頁面配置目錄
        ├─index
        │      index.html
        │      index.js
        │      
        ├─pageA
        │      pageA.html
        │      pageA.js
        │      
        └─pageB
                pageB.html
                pageB.js

自動注入entry配置

webpack的entry配置是這樣的

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

動態讀取html頁面，配置多入口

//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，這樣咱們的入口配置文件就能夠這樣簡寫了。

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

HtmlWebpackPlugin

這個其實就和自動注入entry配置同樣，因此咱們先看下 HtmlWebpackPlugin的配置

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

動態配置 HtmlWebpackPlugin

//讀取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
}

遍歷頁面，添加配置

/*遍歷頁面，添加配置*/
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);
});

優化chunks

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

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

舒適提示

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

tree /f > tree.txt