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 + `/factory/ChartPark/index.html`); // files = files.concat(glob.sync(pathVars.testPath + "/factory/ChartFactoryTest/index.html")); files = files.concat(glob.sync(pathVars.testPath + "/factory/ChartBar41/index.html")); files = files.concat(glob.sync(pathVars.testPath + "/factory/ChartFactory1/index.html")); files = files.concat(glob.sync(pathVars.testPath + "/factory/ChartFactory2/index.html")); // files = files.concat(glob.sync(pathVars.testPath + "/factory/threeScene/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/factory/ChartPark/ChartPark.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: 3006, host: '192.168.1.103' // 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;