weex开发之使用webpack优化打包

之前我们已经说过使用gulp+weex来搭建一个weex的开发环境，
weex+express+gulp开发文件搭建
但是在开发中发现，使用gulp-weex这个npm包来实现的话，对于组件的依赖和引入存在路径的问题，比如在一个组件里面需要加载另一个文件的组件，使用gulp-weex打包的时候，会找不到路径，翻看了源码，也找不到配置路径的地方，而且不管是绝对和相对的路径依赖，都读取不到相应的文件

翻看了一下weex的demo项目，使用的是webpack来进行模块化打包实现，所以考虑在gulp项目中加入webpack的模块化依赖打包方式，因为webpack主打品牌就是模块化打包，所以就在之前项目基础上更换成webpack来实现模块依赖，变量管理，而gulp同样还可以继续使用它的工程化管理优势，两者结合使用，具体实现如下：

# 环境配置文件 config.json
"weex": {
    "views": "app/views/weex/",
    "mainHtml": "task/weexTemplate/",
    "transportJs": "app/public/weex/",
    "previewPath": "app/public/weexPreview/"
}

# webpack配置文件 weex-webpack.config.js
'use strict';
require('webpack'); // 需要引入webpack
require('weex-loader'); // webpack对weex处理的插件

const path   = require('path');
const fs     = require('fs');
// 一些环境变量配置
const config = require('../config.json');
// 我们写的weex页面目录地址，需要使用绝对地址
const dirPath = path.join(__dirname, '../../', config.weex.views);

// 配置入口文件
// 因为每个页面都是一个单独的weex的入口文件，在使用webpack打包时候，要是多入口文件的打包的话
// 需要在entry里面配置每个入口，也就是需要传一个入口文件地址的数组
// 另外每个入口文件需要加上一个entry=true的查询参数
function getEntryFiles(dirs) {
    const files = fs.readdirSync(dirs);
    const entrys = {};
    let fName = '';

    /** 遍历目录文件，这里处理之后默认将第一级目录, 第二级目录的文件设置为入口文件即：
    *   --weex
    *     ---goods
    *        --- component
    *            --- header.we // 不是入口文件
    *        --- goodsList.we // 设置成入口文件
    *   --index.we // 设置成入口文件
    * 上面的文件目录处理之后会返回如下的入口文件数组
    *  [
    *     'index': 'app/views/weex/index.we?entry=true',
    *     'goodsList': 'app/views/weex/goods/goodsList.we?entry=true'
    *  ]
    */
    files.forEach(function (file) {
        const curPath = dirs + file;

        if ( fs.lstatSync(curPath).isDirectory() ) {
            fs.readdirSync(curPath).forEach((item) => {
                const realFile = curPath + '/' + item;

                if (!fs.lstatSync(realFile).isDirectory()) {
                    fName = getFilesName(item);
                    if ( fName !== -1 ) {
                        entrys[fName] = realFile + '?entry=true';
                    }
                }
            });
        } else {
            fName = getFilesName(file);
            if ( fName !== -1 ) {
                entrys[fName] = curPath + '?entry=true';
            }
        }
    });

    return entrys;
}

// 获取文件名字，如果不是.we的文件，不进行处理
function getFilesName(file) {
    const fName = file.match(/(.+)\.we$/);

    if ( fName ) {
        return fName[1];
    }

    return -1;
}

// 返回webpack配置
module.exports = {
    entry: getEntryFiles(dirPath), // 入口文件
    output: {
        path: path.join(__dirname, '../../', config.weex.transportJs),
        filename: '[name].js'
    }, //输出文件地址和文件名配置
    resolve: {
        alias: {
            // 定义一些公共的变量,可以代码里面直接使用,在weex文件里面import组件的时候要是不是同级目录的需要使用绝对路径，这里定义一个绝对路径的变量可以在weex文件里面直接使用
            beforePath: dirPath
        }
    }, // 定义一些全变量，编译时使用
    module: {
        loaders: [
            {
                test: /\.we(\?[^?]+)?$/,
                loaders: [ 'weex-loader' ]
            }
        ] //加载weex-loader对.we文件进行处理
    }
};

这样就可以在node打包时加载这个配置文件，然后用webpack来进行打包了，因为我们项目使用的是gulp来进行工程化管理的，所以我们可以将webpack模块化打包变成一个gulp任务，如:

const gutil          = require('gulp-util');
const webpack        = require('webpack');
const weexConfig     = require('../configs/weex-webpack.config');

/**
 * 只对每个业务的入口文件进行weex的编译
 */
gulp.task('weex', function (callback) {
    webpack(weexConfig, function(err, stats) {
        if(err) throw new gutil.PluginError("webpack", err);
        gutil.log("[webpack]", stats.toString({
            // output options
        }));
        callback();
    });
});

这样，当我们在编写weex时，需要引入一些组件依赖的时候，就可以使用import了，而不用全部都写在一个文件里面，如：

# goods/goodsList.we




# goods/components/sellerLevel.we

运行gulp weex打包命令，加上就可以了，真正的弥补了之前gulp-weex的缺点