重写webpack多页应用配置脚手架

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

你可能感兴趣的

吴浩麟 · 2017年06月25日

推荐这个插件,完美的解决这个问题
https://github.com/gwuhaolin/...

+3 回复

2

可以

nicezhu 作者 · 2017年06月25日
肖师傅 · 2017年06月26日

一直有一个疑问,配置打包多页面倒还好。。但是运行怎么运行? 不论是webpack-dev-server或是用express载入dev-server-middleware,好像都不能配置页面路由的,直接fullback的形式渲染一个首页,那其他页面在开发模式下如何运行呢? 开发模式下,编译完也是不生成文件的,也没法靠express来配置路由,。。求解

回复

0

主要是静态页,没考虑,路由,webpack自带了一个小型的express服务器, 直接npm run start就行了,其实是运行webpack-dev-server这条命令。 "scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "webpack-dev-server",

"build": "webpack"

},

nicezhu 作者 · 2017年06月26日
0

路由其实很好配,只需要使用dev-server-middleware, 用对应的 compiler.outputFileSystem.readFile 输出 html 即可

pathen · 2017年06月26日
1

编译不是不生成文件,只是存放在内存中而已

pathen · 2017年06月26日
nokelong · 2018年11月30日

如果多次运行build,是否存在重复插入script情况

回复

0

不存在

nicezhu 作者 · 2月15日
载入中...