webpack怎么获取异步传输的数据？

Question

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; //提取公共库
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

const CW_NODE_ENV = process.env.CW_NODE_ENV;

let config = {
    devtool: "#source-map",
    entry: {},
    output: {
        path: path.resolve(__dirname, 'static'), //编译的目录
        filename: 'scripts/[name].js',
        publicPath: '/', //发布目录
        chunkFilename: "scripts/chunks/[name].chunk.js" // 用于异步加载require.ensure使用
    },
    // 新增 devServer
    devServer: {
        contentBase: path.resolve(__dirname, 'static'),
        hot: true,
        hotOnly: true
    },
    resolve: {
        alias: {}
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!less-loader'
                })
            },
            {
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader?limit=8192&publicPath=/&outputPath=images/' //  <= 8kb的图片base64内联
            },
            /*{
             test: /\.html$/,
             loader: 'html-loader'
             }*/
        ]
    },
    plugins: [
        new CommonsChunkPlugin({
            name: 'vender',
            filename: 'scripts/[name].js'
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(CW_NODE_ENV || 'production') // production/development
        }),
        new ExtractTextPlugin({
            filename: 'styles/[name].css'
        }),
        //需要暴露到全局使用的vendor列表
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ]
};

// 页面添加处理

let entry = {
    'vender': [
        'jquery',
        'echarts',
        './src/scripts/common.js'

    ]
};

const files = fs.readdirSync('src/pages');
for (let i = 0, len = files.length; i < len; i++) {
    const file = files[i];
    const fileName = file.substring(0, file.lastIndexOf('.html'));
    if (fileName) {
        const isExists = fs.existsSync(`src/scripts/${fileName}.js`);
        const chunks = ['vender'];
        if (isExists) {
            entry[fileName] = `./src/scripts/${fileName}.js`;
            chunks.push(fileName);
        }

        config.plugins.push(
            new HtmlWebpackPlugin({
                filename: `${fileName}.html`,
                template: `src/pages/${fileName}.html`,
                chunks: chunks
            }));
    }
}

config.entry = entry;

if (CW_NODE_ENV == 'production') {
    config.plugins.push(
        new UglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    );
}

module.exports = config;

这段代码怎么理解？

const files = fs.readdirSync('src/pages');
for (let i = 0, len = files.length; i < len; i++) {
    const file = files[i];
    const fileName = file.substring(0, file.lastIndexOf('.html'));
    if (fileName) {
        const isExists = fs.existsSync(`src/scripts/${fileName}.js`);
        const chunks = ['vender'];
        if (isExists) {
            entry[fileName] = `./src/scripts/${fileName}.js`;
            chunks.push(fileName);
        }

        config.plugins.push(
            new HtmlWebpackPlugin({
                filename: `${fileName}.html`,
                template: `src/pages/${fileName}.html`,
                chunks: chunks
            }));
    }
}

还有这个文件config.js

var BTY_CONFIG = (function () {
    var config = {
        planet: [{
            name: '电子政务发展水平',
            link: 'https://www.baidu.com/?电子政务发展水平'
        }, {
            name: '大数据',
            link: 'https://www.baidu.com/?大数据'
        }, {
            name: '大协同',
            link: 'https://www.baidu.com/?大协同'
        }, {
            name: '大服务',
            link: 'https://www.baidu.com/?大服务'
        }, {
            name: '大社群',
            link: 'https://www.baidu.com/?大社群'
        }, {
            name: '大计算',
            link: 'https://www.baidu.com/?大计算'
        }, {
            name: '大网络',
            link: 'https://www.baidu.com/?大网络'
        }, {
            name: '大运维',
            link: 'https://www.baidu.com/?大运维'
        }, {
            name: '大安全',
            link: 'https://www.baidu.com/?大安全'
        }],
        share: [
            '第一师', '第二师', '第三师', 
            '兵团建设',
            '第一师兵团公共资源交易中心',
            '第二师兵团公共资源交易中心',
            '兵团保密局',
            '兵团档案局',
            '兵团文化局',
        ],
        collection: ['国家数据共享交换平台', '全国信用信息共享平台', '兵团数据开发平台']

    };
    return config;
}());

Answer 1

这段代码怎么理解？

这段代码是在NodeJS环境下工作的，作用是读取./src/pages/目录下的html文件，然后去./src/scripts/中寻找同名的js文件，将其作为webpack入口文件。

简单说就是这个项目有多个入口，这是一个自动添加入口文件的代码，只要你在pages和script目录下放置了同名的html文件和js文件，就会被添加到入口供webpack打包

还有这个文件config.js

我没找到应用的地方，不知道做了什么