zaro/example/webpack.local.js

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const fs = require('fs');
const LocalServer = require('./tools/localServer');

process.env.NODE_ENV = 'production';

const getEntry = () => {
  const basePath = `${__dirname}/src/page/`;
  return {
    jsEntry: fs.readdirSync(basePath).reduce((map, dirName) => {
      map[dirName] = `${basePath}${dirName}/index.js`;
      return map;
    }, {
      zaro: ['react', 'react-dom', 'zaro']
    }),
    HtmlWebpackPlugin: fs.readdirSync(basePath).map(dirName => new HtmlWebpackPlugin({
      filename: `${dirName}.html`,
      chunks: [dirName, 'zaro'],
      title: dirName,
      template: './src/template/basic.html'
    }))
  };
};

const plugins = [
  new CleanWebpackPlugin('build'),
  new webpack.HotModuleReplacementPlugin(),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'zaro',
    minChunks: Infinity,
    filename: 'zaro.js'
  }),
  new OpenBrowserPlugin({
    url: 'http://localhost:8080/sample.html'
  }),
  new LocalServer({
    port: 9090
  })
].concat(getEntry().HtmlWebpackPlugin);

module.exports = {
  entry: getEntry().jsEntry,
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'build')
  },
  plugins,
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: [
        'babel-loader'
      ]
    }, {
      test: /\.css$/,
      exclude: /node_modules/,
      use: [
        'style-loader',
        'css-loader'
      ]
    }, {
      test: /(\.jp(e)g|\.png|\.gif|\.svg)$/,
      exclude: /node_modules/,
      use: {
        loader: 'file-loader',
        query: {
          name: '[name].[ext]'
        },
      }
    }]
  },
  devtool: 'source-map',
  devServer: {
    proxy: {
      '/api/**': 'http://127.0.0.1:9090'
    }
  }
};