html-bundler

html-bundler

面临的业务困境

Why html-bundler

目前最流行的打包工具是webpack和gulp，都有着良好的生态和海量的用户，但是在我们使用的过程中发现了以下一些问题：

• webpack的上手难度较高,配置和学习成本都很高
• 所有资源都用webpack打包的情况下性能较差，比如改行样式等10秒这种非常常见
• gulp虽然上手简单，但是插件众多，如何进行选择和最佳实践是一个大问题
• 每做一个项目都需要修改构建程序.

html-bundler的特点：

• html-bundler以html为入口文件，自动寻找引入的资源文件进行构建处理，这对绝大多数项目是通用的.
• 通过一个简单易理解的配置文件使得构建流程可配置。
• 一些简单的项目可以直接只做简单的less => css转换，production模式进行压缩合并以及版本号处理即可
• 复杂的项目则引入webpack对js进行模块化的处理，并暴露接口让用户自己修改webpack配置文件
• 集成了一些优化和日志工具，提升构建的性能和可维护性

Globle Mod

适用于一些只需要简单压缩合并的活动项目，或者一些demo页

npm install html-bundler -g

hb create project
hb create project -w //add webpack.config.js local

cd project && npm install

hb dev -p 8080

hb dest

Local Mod

适用于正式项目

cd your-project
npm install html-bundler --save-dev

自动生成html-bundler.config.js

npm install html-bundler -g
hb init
hb init -w  //自动生成webpack.config.js

create a js file (e.g: bundle.js)and write:

require('html-bundler')

node bundle.js dev -p 8080

node bundle.js dest

配置文件解析

/* eslint-disable */
module.exports = {
    src: './src',                               //源代码所在路径

    entries: ['./src/html/**', './src/*.html'], //html入口文件

    ignore: ['./src/js/lib', './src/css/lib'],  //不进行任何处理的路径

    imgFolder: './src/imgs',                    //图片目录

    moveList: ['./src/fonts', './src/a.js'],    //需要平移的目录和文件

    devMod: {                                   //开发模式
        output: './dev',                        //开发模式下打包后的输出位置
        minify: false,                          //是否最小化，如果开启，则js、css都会进行压缩
        minifyHTML: false,                      //是否压缩html，如果开启，则会对html文件进行压缩
        bundle: true,                           //是否使用webpack进行打包
        concat: false,                          //是否合并文件
        sourcemap: true,                        //是否进行sourcemap
        less: true,                             //是否进行less预处理
        inline: false,                          //是否把所有资源打成inline（目前不能和bundle配合使用）
        watchFolder: {                          //文件分类进行监听，这样修改js不会编译css，提高性能
            css: ['./src/css'],
            js: ['./src/js'],
            imgs: ['./src/imgs'],
            html: ['./src/html']
        },
        custom: {                               //自定义任务, 格式样例[{func: sass, opts: {logger: true}}, {func: task, opts: null }]
            js: [],
            css: [],
            imgs: [],
            html: []
        },
        server: true,                           //是否开启server，默认集成gulp-connect，如果配置为'bird',则使用bird。
        buildTarget: 'default'                  //buildTarget用于设置dist后的目录结构，如果选择default,则默认为css, js, html,如果是一个对象，则表示自定义，不过目前只支持按照文件类型进行分类。
    },

    destMod: {                                  //生产模式，配置项和开发模式完全相同
        output: './dist',
        minify: true,
        minifyHTML: true,
        bundle: true,
        concat: true,
        less: true,
        inline: false,
        sourcemap: false,
        watchFolder: null,
        custom: {
            js: [],
            css: [],
            imgs: [],
            html: []
        },
        server: false,
        buildTarget: {
            js: './js/',
            css: './css/',
            imgs: './images/',
            html: './html/'
        },
    },

    rdMod: {
        //rd环境配置项,内容同上
    },

    qaMod: {
        //qa环境配置项,内容同上
    },

    birdConfig: {                               //bird 配置项
        basePath: "./dev",
        targetServer: {
            port: "8276",
            host: "your server host",
            headers: {
                cookie: ""
            }
        },
        ajaxOnly: false
    },

    serverConfig: {                             //gulp connect 配置项
        root: './dev'
    }
}

DLL优化

如果你使用webpack模块化开发模式，一些基础依赖库如果也每次构建，会大大拖慢构建的速度，因此我们引入了webpack的dll插件。

step1

修改webpack.dll.js文件中的vendors数组，将依赖放进数组

const vendors = [];

step2

执行

npm run dll

生成manifest.json文件和src/lib/vendors.js文件

step3

在html文件中引入../lib/vendors.js文件，放在其他js文件之前