webpack.development.js

const webpack = require('webpack')
const Config = require('webpack-config').Config
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const exclude = /node_modules/

console.log('NODE_ENV', process.env.NODE_ENV)

const tailwindConfig = require('./tailwind.js')

const APP_TITLE = 'Sample'
const HOST_IP = 'localhost'
const HOST_PORT = '8080'
const CLIENT_PATH = __dirname + '/src/client'
const LIB_PATH = __dirname + '/src/client/lib'
const SCHEMA_PATH = __dirname + '/src/schema'
const DATA_PATH = __dirname + '/src/client/data'
const envVars = {
  'process.env.NODE_ENV': `"${process.env.NODE_ENV}"`,
  'process.env.APP_TITLE': `"${APP_TITLE}"`,
  'process.env.ROOT_VIEW': `"app"`,
  'process.env.ROOT_ELEMENT_ID': `"app"`,
  'process.env.RESPONSIVE': `${JSON.stringify(tailwindConfig.screens)}`
}

module.exports = new Config().merge({
  cache: true,
  node: {
    fs: 'empty'
  },
  mode: 'development',
  devtool: 'inline-eval-cheap-source-map',
  output: {
    filename: '[name].js',
    chunkFilename: '[name]-[chunkhash].js',
    path: __dirname + '/www',
    pathinfo: true,
    publicPath: `http://${HOST_IP}:${HOST_PORT}/`
  },
  resolve: {
    alias: {
      lib: LIB_PATH,
      controllers: `${CLIENT_PATH}/controllers`,
      models: `${CLIENT_PATH}/models`,
      views: `${CLIENT_PATH}/views`,
      model: `${CLIENT_PATH}/model`,
      db: `${CLIENT_PATH}/db`,
      controller: `${CLIENT_PATH}/controller`,
      view: `${CLIENT_PATH}/view`,
      schema: `${SCHEMA_PATH}`,
      data: `${DATA_PATH}`,
      assets: `${CLIENT_PATH}/assets`,
      css: `${CLIENT_PATH}/assets/css`,
      fonts: `${CLIENT_PATH}/assets/fonts`,
      js: `${CLIENT_PATH}/assets/js`,
      images: `${CLIENT_PATH}/assets/images`
    },
    modules: [CLIENT_PATH, 'node_modules'],
    extensions: [
      '.webpack.js',
      '.web.js',
      '.ts',
      '.js',
      '.css',
      '.tag',
      '.yml',
      '.yaml'
    ]
  },
  entry: {
    server: [
      `webpack-dev-server/client?http://${HOST_IP}:${HOST_PORT}`,
      'webpack/hot/dev-server'
    ],
    app: [`${CLIENT_PATH}/app`]
  },
  plugins: [
    new webpack.DefinePlugin(envVars),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    new HtmlWebpackPlugin({
      inject: false,
      template: `${CLIENT_PATH}/assets/index.development.ejs`,
      mobile: true,
      baseHref: HOST_IP,
      appMountId: 'app',
      devServer: `http://${HOST_IP}:${HOST_PORT}`,
      title: APP_TITLE,
      hash: true
    })
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'initial',
          name: 'vendor',
          test: 'vendor',
          enforce: true
        }
      }
    },
    runtimeChunk: true
  },
  devServer: {
    contentBase: `${CLIENT_PATH}/assets`,
    compress: false,
    port: HOST_PORT,
    host: HOST_IP,
    historyApiFallback: true,
    hot: true,
    inline: true,
    stats: {
      timings: true,
      chunks: false,
      assets: false,
      hash: false,
      cached: false,
      chunkModules: false,
      entrypoints: false,
      modules: false,
      usedExports: false,
      version: false
    }
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.yml|\.yaml$/,
        exclude: exclude,
        loaders: ['json-loader', 'yaml-loader']
      },
      {
        enforce: 'pre',
        test: /\.png$/,
        exclude: exclude,
        loader: 'url-loader?limit=5000'
      },
      {
        enforce: 'pre',
        test: /\.css$/,
        exclude: exclude,
        use: [
          'style-loader',
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: loader => [
                require('postcss-import'),
                require('tailwindcss')(__dirname + '/tailwind.js'),
                require('autoprefixer')
              ]
            }
          }
        ]
      },
      {
        enforce: 'pre',
        test: /\.jpg$/,
        exclude: exclude,
        loader: 'url-loader?prefix=img/&limit=5000'
      },
      {
        enforce: 'pre',
        test: /\.gif$/,
        exclude: exclude,
        loader: 'url-loader?prefix=img/&limit=5000'
      },
      {
        enforce: 'pre',
        test: /\.woff/,
        exclude: exclude,
        loader: 'url-loader?prefix=font/&limit=5000'
      },
      {
        enforce: 'pre',
        test: /\.woff2/,
        exclude: exclude,
        loader: 'url-loader?prefix=font/&limit=5000'
      },
      {
        enforce: 'pre',
        test: /\.eot/,
        exclude: exclude,
        loader: 'file-loader?prefix=font/'
      },
      {
        enforce: 'pre',
        test: /\.ttf/,
        exclude: exclude,
        loader: 'file-loader?prefix=font/'
      },
      {
        enforce: 'pre',
        test: /\.svg/,
        exclude: exclude,
        loader: 'file-loader?prefix=font/'
      },
      {
        enforce: 'pre',
        test: /\.pug$/,
        exclude: exclude,
        loader: 'jsonmvc-pug-view-loader'
      },
      {
        enforce: 'pre',
        test: /\.html$/,
        exclude: exclude,
        loader: 'html-loader',
        query: { minimize: true }
      },
      {
        test: /\.js$/,
        exclude: exclude,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
})