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

10

之前写了一个webpack多页应用的配置,只有一个webpack.config.js文件,实现了多入口配置打包css,js,资源文件处理。因为入口entry配置需要自己添加,HtmlWebpackPlugin有多少个页面也要自己添加。这样看来虽然配置是成功的,但过于机械化,是不可取的

为什么要进行多页应用配置?

我们都知道开发vue,react这些应用时,一般都只有一个入口文件。而且官方都提供了自己的脚手架。可谓是很繁琐,偏离自己实际开发的环境时,这些脚手架就不能满足我们的要求了。虽然也有很多别人写的多页配置,但是感觉配置模块分离过于严重,而且满足不了自己的需求,不适合新手学习使用。

很多传统网页的开发还是要写很多静态界面,比如我们公司,官网展示类的网站。如果要按照传统的开发模式,我们要为不同的页面添加css文件,js文件,这样大大的增加了工作量,而且很枯燥。而且不能使用es6,scss.
所以这个webpack多页配置就是为了解决这些问题,拥抱es6.

完整配置:webpack-M-pages

先看下脚手架的目录

│  .babelrc
│  .gitignore
│  a.txt
│  base.plugin.js //动态生成HtmlWebpackPlugin
│  entry.config.js//读取多页入口文件
│  package.json
│  pagesArray.js //获取多页文件,HtmlWebpackPlugin的参数
│  README.md
│  utils.js  //生产环境与开发环境
│  webpack.config.js
│  
└─src
    ├─common //公用样式
    │  ├─css
    │  │      reset.css
    │  │      
    │  └─js  //公用js
    │          common.js
    │          easyTable.js
    │          
    ├─css
    │  │  bootstrap.css
    │  │  index.css
    │  │  
    │  ├─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
    │      
    ├─js
        │      index.js
        │      mod.js
        │      pageA.js
        │      pageB.js
        │      pageC.js
        │      testm.js
        │      
        ├─lib
        │      easyTable.js
        │      mod.js
        │      
        └─pages
                index.html
                pageA.html
                pageB.html
                pageC.html

打包后的目录

│  index.html
│  pageA.html
│  pageB.html
│  pageC.html
│  
└─static
    ├─css
    │      index.css
    │      index.css.map
    │      pageA.css
    │      pageA.css.map
    │      
    ├─fonts
    │      glyphicons-halflings-regular.eot
    │      glyphicons-halflings-regular.ttf
    │      glyphicons-halflings-regular.woff
    │      glyphicons-halflings-regular.woff2
    │      
    ├─img
    │      glyphicons-halflings-regular.f721466.svg
    │      ph.50e1eb2.jpg
    │      
    └─js
            indexa94351a6f2b24f4c647a.js
            moda94351a6f2b24f4c647a.js
            pageAa94351a6f2b24f4c647a.js
            pageBa94351a6f2b24f4c647a.js
            pageCa94351a6f2b24f4c647a.js
            testma94351a6f2b24f4c647a.js
            vendorsa94351a6f2b24f4c647a.js
            

怎么自动注入entry配置?

webpack的entry配置是这样的

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

1.问题来了,当入口文件很多的时候怎么办? 一个个写?显然这是不可行的。怎么解决?

当然是读取文件夹下的文件了,然后写入配置呗。

//entry.config.js
var path = require('path');
var fs = require('fs');
let entry_files = {};
function each_file(dir) {
    try {
        fs.readdirSync(dir).forEach(function (file) {
            var file_path = dir + '/' + file;
            var fname = path.basename(file, '.js');
            entry_files[fname]=file_path;
        })
    } catch (e) {

    }
}
each_file('./src/js');
//entry_files是一个object对象,也就是遍历js文件夹下的js文件,然后写成entry所需配置的格式。
module.exports=entry_files;

OK,这样我们的入口配置文件就可以这样简写了。

var entry_files=require('./entry.config');
module.exports = {
    devtool: '#source-map',
    entry: entry_files,
    
    }

怎么自动配置HtmlWebpackPlugin?

这个其实就和自动注入entry配置一样,所以我们先看下 HtmlWebpackPlugin的配置

new HtmlWebpackPlugin({
        template: '',//你的html页面地址
        filename: '',//生成后html的名字
        chunks: ['vendors'],
        // hash:true,
        minify: {
            removeComments: true,
            collapseWhitespace: false //删除空白符与换行符
        }
    });

OK,一样的办法我们读取html模板文件,然后写成需要的格式呗

//pagesArray.js
var path = require('path');
var fs = require('fs');
let pagesArray = [];
function each_file(dir) {
    try {
        fs.readdirSync(dir).forEach(function (file) {
            /*
            * {
            *   index:'./src/index.html',
            *   chunkname:'index'
            * }
            * */
            var file_obj={};
            var file_path = dir + '/' + file;
            var chunk_name = path.basename(file, '.html');
            file_obj['filename']=file;
            file_obj['template']=file_path;
            file_obj['chuckName']=chunk_name;
            pagesArray.push(file_obj)
        })
    } catch (e) {

    }
}
each_file('./src/pages');
//导出我们需要的html模板信息
module.exports=pagesArray;
/*遍历页面,添加配置*/
pagesArray.forEach((page)=>{
    const htmlPlugin = new HtmlWebpackPlugin({
        template: page.template,
        filename: page.filename,
        chunks: ['vendors', page.chuckName],
        // hash:true,
        minify: {
            removeComments: true,
            collapseWhitespace: false //删除空白符与换行符
        }
    });

    base_plugin.push(htmlPlugin)

然后就可以这样配置webpack了

  plugins: require('./base.plugin')

这样就算我们完成了多页配置了,是不是很不错呢?

温馨提示

如何在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日
载入中...