para-bridge-demo/webpack.config.js

a bridge api for js-ios/andriod rest

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin')
const WebpackDeepScopeAnalyserPlugin = require('webpack-deep-scope-plugin').default;

const settings = {
  distPath: path.join(__dirname, 'public'),
  srcPath: path.join(__dirname, 'src'),
  templatePath: path.join(__dirname, 'templates'),
};

module.exports = (env, options) => {
  process.env.NODE_ENV = options.mode;
  const isDevMode = options.mode === 'development';
  const webpackConfig = {
    devtool: isDevMode ? 'source-map' : false,
    stats: 'minimal',
    externals: {
      'Inferno': 'inferno',
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js'],
    },
    output: {
      publicPath: '',
      filename: `[name]/bundle.js`,
      // chunkFilename: '[name]/vendor.js',
      path: settings.distPath,
    },
    entry: {
      [`bridge`]: ['./src/client/index.tsx'],
    },
    devServer: {
      disableHostCheck: true,
      contentBase: settings.templatePath,
      compress: true,
      port: 20001,
      public: 'me.para.com:20001',
      overlay: {
        warnings: true,
        errors: true
      },
      // stats: 'errors-only',
      // before(app, server) {
      // app.use('/admin/api', require('./mock')(app));
      // }
      proxy: {
        '/admin/api': 'http://localhost:4000'
      }
    },
    module: {
      rules: [
        {
          test: /\.less$/,
          use: [
            isDevMode ? 'style-loader' : { loader: MiniCssExtractPlugin.loader, options: { publicPath: '../' } },
            { loader: 'css-loader', options: { sourceMap: isDevMode } },
            { loader: 'venus-px2rem-loader', options: { remUnit: 100, remPrecision: 8 } },
            { loader: 'postcss-loader', options: { plugins: [require('autoprefixer')()], sourceMap: isDevMode } },
            { loader: 'less-loader', options: { sourceMap: isDevMode } }
          ]
        },
        { test: /\.css$/, use: ['style-loader', { loader: 'css-loader', options: { sourceMap: isDevMode } }] },
        { test: /\.(js|jsx|tsx|ts)$/, use: [{ loader: 'babel-loader' }] },
        {
          test: /\.md$/, use: [{ loader: 'html-loader' }, {
            loader: 'markdown-loader', options: {
              highlight: (code) => {
                return require('highlight.js').highlightAuto(code).value + '|code|' + code;
              },
            }
          }], exclude: /node_modules/
        },
        {
          test: /\.(ttf|eot|woff|woff2)$/,
          use: { loader: 'file-loader', options: { name: 'fonts/[name].[ext]' } },
        },
        {
          test: /\.(jpe?g|png|gif|svg|ico)$/i,
          use: [{ loader: 'file-loader', options: { outputPath: 'assets/' } }]
        }
      ]
    },
    optimization: {
      splitChunks: {
        chunks: 'all'
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        'Infero': 'inferno',
      }),
      new ForkTsCheckerWebpackPlugin(),
      new HtmlWebpackPlugin({
        minify: !isDevMode,
        template: path.join(settings.templatePath, isDevMode ? 'index-dev.html' : 'index.html')
      }),
    ]
  };
  // For production mode.
  if (!isDevMode) {
    webpackConfig.plugins.push(
      new CleanWebpackPlugin({
        verbose: true
      })
    );
    webpackConfig.plugins.push(
      new CopyWebpackPlugin([
        { from: 'templates/inferno.min.js', to: `${settings.distPath}/inferno.min.js`, toType: 'file' },
      ]),
    );
    webpackConfig.plugins.push(
      new MiniCssExtractPlugin({
        filename: `[name]/bundle.css`
      }),
    );
    webpackConfig.plugins.push(
      new WebpackDeepScopeAnalyserPlugin(),
    );
  }
  return webpackConfig;
};