zaibei_charts/config/config.js

const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const glob = require("glob");
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const CopyWebpackPlugin = require("copy-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const packageJson = require("./../package.json");
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({size: os.cpus().length});
let pathVars = require("./pathVars");
let config = {};

/*----------------------------------- page ---------------------------------*/
//测试页面

// let files = glob.sync(pathVars.testPath + `/pie/ChartPie?(9|21|32)/index.html`);
let files = glob.sync(pathVars.testPath + `/pie/ChartPie38/index.html`);
// files = files.concat(glob.sync(pathVars.testPath + "/center/ChartCenterTop1/index.html"));
// files = files.concat(glob.sync(pathVars.testPath + "/digit/ChartDigit5/index.html"));
// files = files.concat(glob.sync(pathVars.testPath + "/digit/ChartDigit21/index.html"));

// files = files.concat(glob.sync(pathVars.testPath + "/pie/ChartPie38/index.html"));
// files = files.concat(glob.sync(pathVars.testPath + "/map/ChartChinaMap5/index.html"));
// files = files.concat(glob.sync(pathVars.testPath + "/map/ChartChinaMap1/index.html"));
// files = files.concat(glob.sync(pathVars.testPath + "/pie/ChartPie31/index.html"));
// files = files.concat(glob.sync(pathVars.testPath + "/pie/ChartPie39/index.html"));
// files = files.concat(glob.sync(pathVars.testPath + "/pie/ChartPie40/index.html"));
// files = files.concat(glob.sync(pathVars.testPath + "/zaibei/ChartPie38blue/index.html"));
// files = files.concat(glob.sync(pathVars.testPath + "/zaibei/ChartBar5/index.html"));
// files = files.concat(glob.sync(pathVars.testPath + "/zaibei/ChartBar8/index.html"));
// files = files.concat(glob.sync(pathVars.testPath + "/zaibei/ChartBar40/index.html"));
// files = files.concat(glob.sync(pathVars.testPath + "/zaibei/ChartBar41/index.html"));
// files = files.concat(glob.sync(pathVars.testPath + "/zaibei/ChartLine3/index.html"));

// files = files.concat(glob.sync(pathVars.testPath + "/bar/ChartBar46/index.html"));



console.log("测试页面\n", files);
let entryDev = {
    vendor: Object.keys(packageJson.dependencies)
};
let pageAry = [];
files.forEach(function (filePath) {
    //将单个文件路径（/test/ChartBar3D/index.htsml）路径拆分成数组
    let tempAry = filePath.split('/');
    //demo文件夹名
    let typeName = tempAry[tempAry.length - 3];
    let chunkName = tempAry[tempAry.length - 2];
    let htmlName = chunkName + "/index.html";

    let obj = {};
    obj["filePath"] = filePath;
    obj["chunkName"] = chunkName;
    obj["htmlName"] = htmlName;
    obj["entryJs"] = pathVars.testPath + "/" + typeName + "/" + chunkName + "/index.js";
    entryDev[chunkName] = obj["entryJs"];
    pageAry.push(obj);
});


//图表主js文件
let chartFiles = [
    glob.sync(pathVars.srcPath + "/chart/pie/ChartPie38/ChartPie38.js")[0],
    // chartFiles = glob.sync(pathVars.srcPath + "/chart/digit/ChartDigit5/ChartDigit5.js"),
    // chartFiles = glob.sync(pathVars.srcPath + "/chart/pie/ChartPie39/ChartPie39.js"),
    // chartFiles = glob.sync(pathVars.srcPath + "/chart/zaibei/ChartBar40/ChartBar40.js"),
    // chartFiles = glob.sync(pathVars.srcPath + "/chart/zaibei/ChartLine3/ChartLine3.js"),
    // glob.sync(pathVars.srcPath + "/chart/map/ChartChinaMap5/ChartChinaMap5.js"),
    // chartFiles = glob.sync(pathVars.srcPath + "/chart/center/ChartCenterTop1/ChartCenterTop1.js")
]

console.log("图表主js文件\n", chartFiles);
let chartAry = [];
let entryDist = {};
chartFiles.forEach(function (filePath) {
    //将单个文件路径（/src/chart/ChartEarth/ChartEarth.js）路径拆分成数组
    let tempAry = filePath.split('/');
    let chunkName = tempAry[tempAry.length - 2];
    let obj = {};
    obj["chunkName"] = chunkName;
    chartAry.push(obj);
    //
    entryDist[chunkName] = filePath;
});


/*-----------------------------  entry  ------------------------------*/

config["entryDev"] = entryDev;


config["entryDist"] = entryDist;


/*-----------------------------  devServer  ------------------------------*/
let devServer = {
    // open: true,
    publicPath: "/",
    contentBase: pathVars.devPath,
    hot: true,
    inline: true,
    port: 3007,
    host: 'localhost'
};
config["devServer"] = devServer;


/*-----------------------------  output  ------------------------------*/
let outputDev = {
    path: pathVars.distPath,
    publicPath: "/",     // 表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换(如：css中背景图的路径)
    filename: "[name]/main.js"
};
config["outputDev"] = outputDev;

let outputDist = {
    path: pathVars.distPath,
    publicPath: "/",
    filename: "[name]_[chunkhash:5].js",
    library: "[name]",
    libraryTarget: "umd"
//  libraryExport: "default"
};
config["outputDist"] = outputDist;


/*-----------------------------  externals  ------------------------------*/
if (process.env.NODE_ENV === "noThird") {
    console.log("==================", process.env.NODE_ENV);
    config["externals"] = {
        'three': {
            commonjs: 'THREE',
            commonjs2: 'THREE',
            amd: 'THREE',
            root: 'THREE'
        },
        'zrender': {
            commonjs: 'zrender',
            commonjs2: 'zrender',
            amd: 'zrender',
            root: 'zrender'
        },
        'gsap': {
            commonjs: 'gsap',
            commonjs2: 'gsap',
            amd: 'gsap',
            root: 'gsap'
        }
    };
} else {
    config["externals"] = {};
    config["outputDist"]["filename"]="[name].js"
}


/*-----------------------------  module  ------------------------------*/
let rules = [
    // {
    //     test: /\.js$/,
    //     exclude: pathVars.nodeModulesPath,
    //
    //     //use: ['babel-loader'],
    //     use: ["happypack/loader?id=babel"]
    // },
    {
        test: /\.js$/,
        // exclude: pathVars.nodeModulesPath,
        loader: "babel-loader",
    },
    // {
    //     test: /\.glsl$/,
    //     loader: 'webpack-glsl-loader'
    // },
    {
        test: /\.(glsl|vs|fs|vert|frag)$/,
        // exclude: [pathVars.nodeModulesPath, pathVars.dllPath],
        use: ["raw-loader", "glslify-loader"]
    }
]
// let jsonRuleDist={
//     test:/\.json$/,
//     type: 'javascript/auto',
//     use:[
//         {
//             loader: 'json-loader',
//
//             options: {
//                 publicPath: '../../static/',
//                 name: 'json/[name]_[hash:5].[ext]'
//             }
//         }
//     ]
// };
let imgRuleDev = {
    test: /\.(png|jpg|gif)$/,
    // loader: 'url-loader?limit=1000&name=images/[name]_[hash:5].[ext]',
    use: [
        {
            loader: 'file-loader',
            options: {
                publicPath: '/',
                name: 'imgInChart/[name]_[hash:5].[ext]'
            }
        }
    ]
}
let imgRuleDist = {
    test: /\.(png|jpg|gif)$/,
    // loader: 'url-loader?limit=1000&name=images/[name]_[hash:5].[ext]',
    use: [
        {
            loader: 'file-loader',
            options: {
                publicPath: '../../static/',
                name: 'imgInChart/[name]_[hash:5].[ext]'
            }
        }
    ]
};

config["moduleBaseDev"] = {rules: rules.concat(imgRuleDev)};
config["moduleBaseDist"] = {rules: rules.concat(imgRuleDist)};


//---------------------------------- plugin -----------------------------------//
let pluginBase = [
    /*new CopyWebpackPlugin([{
        from: pathVars.staticPath,
        //to 起始位置为发布目录
        to: "static"
    }]),*/
    new webpack.DllReferencePlugin({
        context: pathVars.rootPath,
        manifest: require(pathVars.dllPath + '/manifest.json')
    }),
    new HappyPack({
        id: 'babel',
        loaders: ["babel-loader"],
        threadPool: happyThreadPool
    }),
    new webpack.DefinePlugin({
        my_ENV: JSON.stringify(process.env.my_ENV)
    })
];

const htmlBase = [];
pageAry.forEach(function (page) {
    const htmlPlugin = new HtmlWebpackPlugin({
        title: '',
        template: page["filePath"],
        filename: page["htmlName"],
        inject: 'body',
        chunks: ["manifest", "vendor", "common", page["chunkName"]],
        chunksSortMode: 'none'
    });
    htmlBase.push(htmlPlugin);
});
// pageVars.forEach(function (page) {
//     let htmlPlugin = new HtmlWebpackPlugin({
//         title: 'page1',
//         template: page["filePath"],
//         filename: page["htmlName"],
//         inject: 'body',
//         chunks: /*isDev ? [page["chunkName"]] :*/ ["manifest", "vendor", "common", page["chunkName"]],
//         chunksSortMode: 'dependency'
//     });
//     pluginBase.push(htmlPlugin);
// });

//------------------- dev
let pluginsDev = [
    new webpack.HotModuleReplacementPlugin()
];
config["pluginsDev"] = pluginBase.concat(pluginsDev, htmlBase);


//------------------- dist
let pluginDist = [
    new CleanWebpackPlugin(pathVars.distPath,
        {
            root: pathVars.rootPath,
            verbose: true
        }
    ),
    new webpack.NoEmitOnErrorsPlugin(),


];
config["pluginDist"] = pluginBase.concat(pluginDist);

//----------------------------------- optimization  ---------------------------//
config["optimizationDev"] = {
    minimize: false,
    splitChunks: {
        chunks: "all", //initial
        minSize: 30 * 1024, //模块大于30k会被抽离到公共模块 也就是说每个页面的js不会大于30k
        minChunks: 1, //模块出现1次就会被抽离到公共模块
        maxAsyncRequests: 5, //异步模块，一次最多只能被加载5个
        maxInitialRequests: 3, //入口模块最多只能加载3个
        name: true,
        cacheGroups: {
            default: {
                chunks: "all",
                name: "common",
                test: /[\\/]src[\\/]/,
                minChunks: 3,
                priority: -20,
                reuseExistingChunk: true
            },
            vendor: {
                chunks: "all",
                name: "vendor",
                test: /[\\/]node_modules[\\/]/,
                minChunks: 1,
                priority: -10
            }
        }
    },
    runtimeChunk: {
        name: "manifest"
    }
};
//
config["optimizationDist"] = {
    minimize: true,
    minimizer: [
        new UglifyJsPlugin({
            cache: true,
            parallel: true,
            uglifyOptions: {
                warnings: false,
                compress: {
                    // warnings: false,
                    drop_debugger: true,
                    drop_console: true
                }
            }
        }),
        new OptimizeCssAssetsPlugin({})
    ],
    splitChunks: {}

};
module.exports = config;