webpack学习---解析项目中使用的webpac配置

一、文件目录：

二、webpack.config.js

// 随着项目需求的增长，我们必须要找到更有效地管理配置文件的方法。
// 分离配置文件：
// webpack.base.config.js 公共环境的配置文件
// webpack.dev.config.js 开发环境下的配置文件
// webpack.prod.config.js 生产环境下的配置文件

const merge = require('webpack-merge');
// webpack-merge: 如果配置文件被分成了许多不同的部分，那么必须以某种方式来组合他们，
// 通常就是合并数组和对象,webpack-merge就是用来合并配置文件的

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// webpack Bundle Analyzer是一个可视化的工具，能够分析和生成打包输出后文件大小互动缩放树形图。

const devConfig = require('./build/webpack.dev.config.js'); // 开发环境下的配置文件
const prodConfig = require('./build/webpack.prod.config.js'); // 生产环境下的配置文件

const ip = require('ip').address();
// 获取局域网IP
const portFinder = require('portfinder');
// 获取port
const isDev = process.env.NODE_ENV === 'development';
const devWebpackConfig = merge(devConfig,
  {
    devServer: {
      host: ip, // 指定使用一个 host。默认是 localhost
      proxy: {
        '/api': {
          target: 'http://192.168.2.90:8080',
          changeOrigin: true,
          pathRewrite: { // 不传递/api
            '^/api': ''
          }
        }
      }
    }
  }
);
if (isDev) {
  module.exports = new Promise((resolve, reject) => {
    portFinder.getPort({ port: 9000, stopPort: 9999 }, function (err, port) {
      if (err) {
        reject(err);
      } else {
        devWebpackConfig.devServer.port = port;
        resolve(devWebpackConfig);
      }
    });
  });
} else {
  if (process.env.BUILD_REPORT) {
    module.exports = merge(prodConfig, {
      plugins: [
        new BundleAnalyzerPlugin()
      ]
    })
  } else {
    module.exports = prodConfig;
  }
}

二、webpack.base.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
 //打包后自动生成ind