feat(docz-bundler-webpack): improve webpack config

Author: pedronauck

.prettierignore

@@ -0,0 +1 @@
+packages/docz-bundler-webpack/src/config.ts

packages/docz-bundler-webpack/package.json

@@ -8,36 +8,40 @@
   "typings": "./dist/index.d.ts",
   "license": "MIT",
   "scripts": {
-    "clean": "trash dist",
-    "compile": "tsc -p tsconfig.json",
-    "dev": "libundler watch --ts --external all",
-    "build": "libundler build --ts --external all --compress --sourcemap",
-    "fix": "run-s fix:*",
+    "dev": "libundler watch --ts -e all",
+    "build": "libundler build --ts -e all -c -sm",
     "fix:prettier": "prettier \"src/**/*.{ts,tsx}\" --write",
-    "fix:tslint": "tslint --fix --project ."
+    "fix:tslint": "yarn run tslint --fix",
+    "tslint": "tslint --project ."
   },
   "dependencies": {
     "@babel/core": "^7.0.0-beta.44",
     "@babel/runtime": "^7.0.0-beta.44",
-    "babel-polyfill": "^7.0.0-beta.3",
     "babel-loader": "^8.0.0-beta.1",
+    "babel-polyfill": "^7.0.0-beta.3",
     "babel-preset-react-app": "^4.0.0-next.b2fd8db8",
+    "express": "^4.16.3",
     "deepmerge": "^2.1.0",
+    "docz-core": "^0.0.1",
+    "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.2.0",
     "load-cfg": "^0.0.1",
-    "docz-core": "^0.0.1",
     "react-dev-utils": "^5.0.1",
     "react-hot-loader": "^4.0.1",
     "thread-loader": "^1.1.5",
+    "url-loader": "^1.0.1",
     "webpack": "^4.5.0",
+    "webpack-chain": "^4.6.0",
     "webpack-dev-middleware": "^3.1.2",
-    "webpack-dev-server": "^3.1.3"
+    "webpack-dev-server": "^3.1.3",
+    "webpackbar": "^2.6.1"
   },
   "devDependencies": {
     "@types/deepmerge": "^2.1.0",
     "@types/html-webpack-plugin": "^2.30.3",
     "@types/node": "9.6.4",
     "@types/webpack": "^4.1.3",
+    "@types/webpack-chain": "^4.0.2",
     "@types/webpack-dev-server": "^2.9.4"
   }
 }

packages/docz-bundler-webpack/src/config.dev.ts

@@ -0,0 +1,197 @@
+import * as path from 'path'
+import * as webpack from 'webpack'
+import { Configuration } from 'webpack'
+import { ConfigArgs } from 'docz-core'
+import { load } from 'load-cfg'
+import Webpackbar from 'webpackbar'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import Config from 'webpack-chain'
+import merge from 'deepmerge'
+
+const INLINE_LIMIT = 10000
+
+export const createConfig = (args: ConfigArgs) => (): Configuration => {
+  const { paths, env, debug } = args
+
+  const isProd = env === 'production'
+  const config = new Config()
+
+  /**
+   * general
+   */
+  config.context(paths.root)
+  config.set('mode', isProd && !debug ? 'production' : 'development')
+
+  config.when(debug, cfg => cfg.devtool('source-map'))
+  config.when(!isProd, cfg => cfg.devtool('cheap-module-eval-source-map'))
+
+  config.node.merge({
+    child_process: 'empty',
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+  })
+
+  /**
+   * output
+   */
+  const outputProd = (output: Config.Output) =>
+    output
+      .filename('static/js/[name].[chunkhash:8].js')
+      .sourceMapFilename('static/js/[name].[chunkhash:8].js.map')
+      .publicPath(paths.servedPath)
+
+  const outputDev = (output: Config.Output) =>
+    output
+      .filename('static/js/[name].js')
+      .sourceMapFilename('static/js/[name].js.map')
+      .publicPath('/')
+
+  config.output
+    .pathinfo(true)
+    .path(paths.dist)
+    .when(isProd, outputProd, outputDev )
+    .crossOriginLoading('anonymous')
+
+  /**
+   * entries
+   */
+
+  const addHotClientEntry = (entry: Config.EntryPoint) =>
+    entry.add(require.resolve('react-dev-utils/webpackHotDevClient'))
+
+  config
+    .entry('app')
+      .when(!isProd, addHotClientEntry)
+      .add(require.resolve('babel-polyfill'))
+      .add(paths.indexJs)
+
+  /**
+   * resolve
+   */
+
+  config.resolve
+    .set('symlinks', true)
+    .alias
+      .set('@babel/runtime', path.dirname(
+        require.resolve('@babel/runtime/package.json')
+      ))
+
+  config.resolve
+    .extensions
+      .merge(['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'])
+      .end()
+    .modules
+      .add('node_modules')
+      .add(paths.root)
+
+  config.resolveLoader
+    .set('symlinks', true)
+    .modules
+      .add('node_modules')
+      .add(paths.root)
+
+  /**
+   * loaders
+   */
+
+  const babelrc = merge(load('babel', null), {
+    babelrc: false,
+    cacheDirectory: true,
+    highlightCode: true,
+    plugins: [require.resolve('react-hot-loader/babel')],
+    presets: [require.resolve('babel-preset-react-app')],
+  })
+
+  config.module
+    .rule('js')
+      .test(/\.js?x$/)
+        .include
+          .add(paths.root)
+          .add(paths.docz)
+          .end()
+        .exclude
+          .add(/node_modules/)
+          .end()
+        .use('thread-loader')
+          .loader(require.resolve('thread-loader'))
+          .end()
+        .use('babel-loader')
+          .loader(require.resolve('babel-loader'))
+          .options(babelrc)
+
+  config.module
+    .rule('images')
+      .test(/\.(png|jpe?g|gif)(\?.*)?$/)
+      .use('url-loader')
+        .loader(require.resolve('url-loader'))
+        .options({
+          limit: INLINE_LIMIT,
+          name: `static/img/[name].[hash:8].[ext]`,
+        })
+
+  config.module
+    .rule('svg')
+      .test(/\.(svg)(\?.*)?$/)
+      .use('file-loader')
+        .loader(require.resolve('file-loader'))
+        .options({
+          name: `static/img/[name].[hash:8].[ext]`,
+        })
+
+  config.module
+    .rule('media')
+      .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
+      .use('url-loader')
+        .loader(require.resolve('url-loader'))
+        .options({
+          limit: INLINE_LIMIT,
+          name: `static/media/[name].[hash:8].[ext]`,
+        })
+
+  config.module
+    .rule('fonts')
+      .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/i)
+      .use('url-loader')
+        .loader(require.resolve('url-loader'))
+        .options({
+          limit: INLINE_LIMIT,
+          name: `static/fonts/[name].[hash:8].[ext]`,
+        })
+
+  /**
+   * plugins
+   */
+
+  config.when(!isProd, cfg =>
+    cfg
+      .plugin('hot-module-replacement-plugin')
+      .use(webpack.HotModuleReplacementPlugin)
+  )
+
+  config
+    .plugin('named-modules-plugin')
+      .use(webpack.NamedModulesPlugin)
+      .end()
+    .plugin('no-emit-errors')
+      .use(webpack.NoEmitOnErrorsPlugin)
+      .end()
+    .plugin('html-webpack-plugin')
+      .use(HtmlWebpackPlugin, [{
+        inject: true,
+        template: paths.indexHtml,
+      }])
+
+  config.when(!debug, cfg =>
+    cfg
+      .plugin('webpackbar')
+      .use(Webpackbar, [{
+        color: '#41b883',
+        compiledIn: false,
+        name: 'Client',
+      }])
+  )
+
+  return config.toConfig()
+}

packages/docz-bundler-webpack/src/config.ts

@@ -2,33 +2,30 @@ import { ConfigArgs } from 'docz-core'
 import { Application } from 'express'
 import errorOverlayMiddleware from 'react-dev-utils/errorOverlayMiddleware'
 
-export const PROTOCOL = process.env.HTTPS === 'true' ? 'https' : 'http'
-export const HOST = process.env.HOST || '0.0.0.0'
-
-export const devServerConfig = ({ paths }: ConfigArgs) => ({
-  compress: true,
+export const devServerConfig = ({ paths, host, protocol }: ConfigArgs) => ({
+  host,
+  before(app: Application): void {
+    app.use(errorOverlayMiddleware())
+  },
   clientLogLevel: 'none',
+  compress: true,
   contentBase: paths.docz,
-  watchContentBase: true,
+  historyApiFallback: {
+    disableDotRule: true,
+  },
   hot: true,
-  quiet: true,
+  https: protocol === 'https',
   noInfo: true,
-  publicPath: '/',
-  https: PROTOCOL === 'https',
-  host: HOST,
   overlay: false,
-  watchOptions: {
-    ignored: /node_modules/,
-  },
+  publicPath: '/',
+  quiet: true,
   stats: {
-    colors: true,
-    chunks: false,
     chunkModules: false,
+    chunks: false,
+    colors: true,
   },
-  historyApiFallback: {
-    disableDotRule: true,
-  },
-  before(app: Application) {
-    app.use(errorOverlayMiddleware())
+  watchContentBase: true,
+  watchOptions: {
+    ignored: /node_modules/,
   },
 })