zhongze-front/config/webpack.charts.dev.js

const path = require("path");
const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({
    size: os.cpus().length
});

const common = require("./common");
const pathVars = require("./pathVars");
const pageVars = require("./pageVars");

//---------------------------------- output -----------------------------------//
const entryConfig = {};

let pages = pageVars.getChartsTest();
pages.forEach((page) => {
    entryConfig[page["chunkName"]] = page["entryJs"];
});

//---------------------------------- output -----------------------------------//

let outputConfig = {
    path: pathVars.devPath,
   // publicPath: "./", // 表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换(如：css中背景图的路径)
    filename: "[name]/index.js",
    assetModuleFilename: 'chartImages/[name]_[hash][ext][query]'
};


//---------------------------------- plugin -----------------------------------//
let pluginConfig = [
    new webpack.ProvidePlugin({
        'THREE': require.resolve('three')
    }),
    new webpack.DllReferencePlugin({
        context: pathVars.rootPath,
        manifest: require(pathVars.dllPath + '/manifest.json')
    }),
    new HappyPack({
        id: 'babel',
        loaders: ["babel-loader"],
        threadPool: happyThreadPool
    })
];

pages.forEach(function (page) {
    let htmlPlugin = new HtmlWebpackPlugin({
        title: 'chartTest',
        template: page["htmlPath"],
        filename: page["htmlName"],
        inject: 'body',
        chunks: [page["chunkName"]]
    });
    pluginConfig.push(htmlPlugin);
});

module.exports = {
    mode: 'development',
    entry: entryConfig,
    output: outputConfig,
    resolve: common.resolve,
    devServer: {
        compress: true,
        static: {
            directory: pathVars.devPath,
            publicPath: "/"
        },
        hot: true,
        host: 'localhost',
        port: 3000
    },
    module: {
        rules: [{
                test: /\.(css|less)$/,
                include: [pathVars.srcPath],
                exclude: [pathVars.nodeModulesPath],
                use: [{
                        options: {
                            /* 解决css背景图路径问题 由于图片目录已经定好了，因此这里可以用固定的相对路径*/
                            publicPath: '../'
                        },
                    },
                    //"css-loader?modules&localIdentName=[name]__[local]-[hash:base64:5]",
                    "css-loader",
                    "less-loader"
                ],
            },
            {
                test: /\.js$/,
                exclude: pathVars.nodeModulesPath,
                include: pathVars.srcPath,
                use: ['babel-loader']
                //use: ["happypack/loader?id=babel"]
            },
            {
                test: /\.(png|jpg|gif|woff|svg|eot|ttf|woff2)$/,
                type: 'asset/resource',
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024
                    }
                }
            },
            {
                test: /\.(glsl|vs|fs|vert|frag)$/,
                exclude: [pathVars.nodeModulesPath, pathVars.dllPath],
                use: ["raw-loader", "glslify-loader"]
            }
        ]
    },
    plugins: pluginConfig,
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            chunks: "all",
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'all'
                }
            }
        }
    }
};