之前写了一个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