chart_shuziluansheng/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 + `/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;