index.js

浏览器访问 http://localhost:8080/home

返回结果:

webpack.config.dev.js

const path = require('path');
const fs = require('fs');
const htmlWebpackPlugin = require('html-webpack-plugin');
const srcRoot = path.resolve(__dirname, 'src');
const devPath = path.resolve(__dirname, 'dev');
const pageDir = path.resolve(srcRoot, 'page');
const mainFile = 'index.js';

function getEntry() {
    let entryMap = {};
    fs.readdirSync(pageDir).forEach((pathname) => {
        let fullPathName = path.resolve(pageDir, pathname);
        let stat = fs.statSync(fullPathName);
        let fileName = path.resolve(fullPathName, mainFile);
        if (stat.isDirectory() && fs.existsSync(fileName)) {
            entryMap[pathname] = fileName;
        }
    });
    return entryMap;
}

function getHtmlArray(entryMap) {
    let htmlArray = [];
    Object.keys(entryMap).forEach((key) => {
        let fullPathName = path.resolve(pageDir, key);
        let fileName = path.resolve(fullPathName, key + '.html');

        if (fs.existsSync(fileName)) {
            htmlArray.push(new htmlWebpackPlugin({
                filename: key + '.html',
                template: fileName,
                chunks: [key]
            }));
        }


    });
    return htmlArray;
}


//获取所有目录下的index.js
const entryMap = getEntry();
const htmlArray = getHtmlArray(entryMap);

module.exports = {
    mode: 'development',
    entry: entryMap,
    output: {
        path: devPath,
        filename: '[name].min.js'
    },
    devServer: {
        contentBase: devPath,
    },
    module: {
        rules: [
            {test: /\.(js|jsx)$/, use: [{loader: "babel-loader"}], include: srcRoot},
            {test: /\.css$/, use: ['style-loader', 'css-loader'], include: srcRoot},
            {test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader', {
                loader: 'sass-resources-loader',
                    options:{
                        resources: srcRoot + '/common/common.scss'
                    }
                }], include: srcRoot},
            {test: /\.(png|jpg|jpeg)$/, use: 'url-loader?limit=8192', include: srcRoot},
        ],
    },
    plugins: [].concat(htmlArray)
};

上述这段代码(index.js)在 create-react-app 这个官方脚手架中运行使用没有问题