ae-biu/src/config/webpack.config.dev.js

Born For AE, Born To Do

// @flow
import path from 'path'
import webpack from 'webpack'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import CopyWebpackPlugin from 'copy-webpack-plugin'
import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin'
import flat from 'flat'
import logger from '../utils/logger'
import getPostcssConfig from './postcss.config'
import lessOptions from './less.config'
import { workDir, srcDir, tplPath } from '../utils/paths'
import getPolyfills from '../utils/get-polyfills'
import pkg from '../utils/package'
import webpackCommonConfig from './webpack.common'
import { DEFAULT_LANG_MAP } from '../utils/constants'
import useCDN from '../utils/use-cdn'

console.log()
logger.info('Create configuration for NODE_ENV: development\n')

const SDP_ENV = (process.env.SDP_ENV || 'test').trim()

logger.info(`Project running under SDP_ENV: ${SDP_ENV}\n`)

const polyfills = getPolyfills()

// generate css loader for specific lang
function getCSSLoader (lang, i18nLangs) {
  const loaders = [
    {
      loader: 'style-loader'
    },
    {
      loader: 'css-loader',
      options: {
        importLoaders: 1
      }
    },
    {
      loader: 'postcss-loader',
      options: getPostcssConfig(i18nLangs)
    }
  ]
  if (lang === 'less') {
    loaders.push({
      loader: 'less-loader',
      options: lessOptions
    })
  }
  return loaders
}

const { ae = {} } = pkg
const { languages: LANGS = DEFAULT_LANG_MAP, output: dist = 'dist', org: ORG_NAME } = ae

const webpackConfig = {
  // current only have web
  target: 'web',
  // entry for AE
  entry: {
    app: [
      'webpack-dev-server/client', // for HMR
      'webpack/hot/dev-server', // for HMR
      ...polyfills,
      path.resolve(srcDir, 'index.js')
    ]
  },
  output: {
    path: path.resolve(workDir, dist),
    publicPath: '/', // CAN NOT CHANGE
    filename: '[name].[hash].js',
    chunkFilename: '[id].[hash].js'
  },
  resolve: {
    // treat source directory as root
    modules: [srcDir, 'node_modules'],
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.css', 'less'],
    alias: {
      '~': srcDir,
      ...webpackCommonConfig.alias
    }
  },
  node: {
    fs: 'empty',
    net: 'empty'
  },
  devtool: 'cheap-module-eval-source-map',
  performance: {
    hints: false
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: srcDir,
        use: [{
          loader: 'eslint-loader',
          options: {
            emitWarning: true, // show warning in development, you must solve it
            formatter: require('eslint-friendly-formatter')
          }
        }],
        enforce: 'pre'
      }, {
        test: /\.jsx?$/,
        include: [
          srcDir,
          // AE and ES modules need transform
          /@ae\.sdp\.nd[/\\](?!node_modules)/,
          /[/\\]node_modules.*[/\\]((lodash-)?es)[/\\](?!node_modules)/
        ],
        use: 'babel-loader'
      },
      {
        test: /\.tsx?$/,
        include: [
          srcDir,
          /@ae\.sdp\.nd[/\\](?!node_modules)/
        ],
        use: [{
          loader: 'babel-loader'
        }, {
          loader: 'ts-loader',
          options: {
            transpileOnly: true
          }
        }]
      },
      {
        test: /\.css$/,
        use: getCSSLoader('css', LANGS)
      },
      {
        test: /\.less$/,
        use: getCSSLoader('less', LANGS)
      },
      {
        test: /\.(png|jpg|gif|svg|woff2?|eot|ttf)(\?.*)?$/,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 8192,
            name: '[name].[ext]?[hash:7]'
          }
        }]
      }
    ]
  },
  plugins: [
    ...webpackCommonConfig.plugins,
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development'),
      'process.env.SDP_ENV': JSON.stringify(process.env.SDP_ENV),
      'process.env.LANGS': JSON.stringify(LANGS)
    }),
    new HtmlWebpackPlugin({
      SDP_ENV: process.env.SDP_ENV,
      ORG_NAME,
      CDN: pkg.cdn || {},
      filename: 'index.html',
      template: tplPath,
      title: `${pkg.name} - ${pkg.description}`,
      hash: false,
      inject: !useCDN(pkg.cdn, process.env.SDP_ENV),
      minify: {
        collapseWhitespace: false,
        minifyJS: false
      }
    }),
    new CopyWebpackPlugin([
      {
        from: path.resolve(srcDir, 'static')
      },
      {
        context: path.resolve(srcDir, 'modules'),
        from: '**/*.json',
        to: 'locale',
        transform: content => JSON.stringify(flat(JSON.parse(content)))
      }
    ], {
      ignore: ['README.md']
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.LoaderOptionsPlugin({
      debug: true,
      options: {
        context: workDir
      }
    }),
    new FriendlyErrorsPlugin()
  ]
}

export default webpackConfig