⚙️ Make webpack-dev-server configurable, fixes #24

README.md

@@ -48,20 +48,17 @@ module.exports = buildWebpackConfig([
 ])
 ```
 
-To add a loader, for example, TypeScript Loader:
-
+For example, this is the way to customize the webpack-dev-server options.
 ```js
 const buildWebpackConfig = require('webpack-preset-accurapp')
-
-function tsLoader() {
-  return (context, { addLoader }) => addLoader({
-    test: /\.tsx?$/,
-    loader: 'ts-loader',
-  })
-}
+const { env, devServer } = require('webpack-blocks')
 
 module.exports = buildWebpackConfig([
-  tsLoader(),
+  env('development', [
+    devServer({
+      // your custom options here
+    }),
+  ]),
 ])
 ```
 

packages/accurapp-scripts/package.json

@@ -31,7 +31,6 @@
     "path": "^0.12.7",
     "react-dev-utils": "6.0.0-next.9754a231",
     "semver": "^5.5.0",
-    "strip-ansi": "^4.0.0",
     "webpack": "^3.10.0",
     "webpack-dev-server": "^2.11.1"
   },

packages/accurapp-scripts/scripts/_utils.js

@@ -7,7 +7,6 @@ const boxen = require('boxen')
 const outdent = require('outdent')
 const filesize = require('filesize')
 const gzipSize = require('gzip-size').sync
-const stripAnsi = require('strip-ansi')
 const indentString = require('indent-string')
 const columnify = require('columnify')
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages')
@@ -63,7 +62,7 @@ function listLine(text, color = i => i) {
   return indent(text, '   ', color('\n • '))
 }
 
-function readWebpackConfig() {
+export function readWebpackConfig() {
   const cwd = process.cwd()
   return require(path.join(cwd, 'webpack.config.js'))
 }

packages/accurapp-scripts/scripts/start.js

@@ -9,35 +9,22 @@ const detect = require('detect-port')
 const WebpackDevServer = require('webpack-dev-server')
 const openOrRefreshBrowser = require('react-dev-utils/openBrowser')
 const { prepareUrls } = require('react-dev-utils/WebpackDevServerUtils')
-const { log, createWebpackCompiler, coloredBanner } = require('./_utils')
+const { log, createWebpackCompiler, readWebpackConfig, coloredBanner } = require('./_utils')
 
 const HOST = process.env.HOST || '0.0.0.0'
 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8000
 
-function buildDevServerConfig(lanUrl) {
-  return {
-    compress: true,
-    clientLogLevel: 'none',
-    historyApiFallback: true,
-    hot: true,
-    contentBase: './public/',
-    quiet: true,
-    watchOptions: {
-      ignored: /node_modules/,
-    },
-    host: HOST,
-    overlay: false,
-    public: lanUrl,
-  }
-}
-
 function runDevServer(port) {
   const urls = prepareUrls('http', HOST, port)
   const compiler = createWebpackCompiler(() => {
     log.info(`The app is running at: ${chalk.cyan(urls.localUrlForTerminal)}`)
     log.info(`Or on your network at: ${chalk.cyan(urls.lanUrlForTerminal)}`)
   })
-  const devServerConfig = buildDevServerConfig(urls.lanUrlForConfig)
+
+  const devServerConfig = Object.assign({
+    host: HOST,
+    public: urls.lanUrlForConfig,
+  }, readWebpackConfig().devServer)
   const devServer = new WebpackDevServer(compiler, devServerConfig)
   devServer.listen(port, HOST, err => {
     if (err) return log.err(err)

packages/webpack-preset-accurapp/index.js

@@ -3,6 +3,7 @@ const {
   createConfig,
   addPlugins,
   customConfig,
+  devServer,
   entryPoint,
   setOutput,
   env,
@@ -91,10 +92,19 @@ function accuPreset(config = []) {
     //
     env('development', [
       prependEntry('react-dev-utils/webpackHotDevClient'),
+      devServer({
+        compress: true,
+        clientLogLevel: 'none',
+        contentBase: './public/',
+        watchContentBase: true,
+        quiet: true,
+        watchOptions: {
+          ignored: /node_modules/,
+        },
+        overlay: false,
+      }),
       eslintLoader(),
       addPlugins([
-        // This is necessary to emit hot updates (currently CSS only)
-        new webpack.HotModuleReplacementPlugin(),
         // Automatic rediscover of packages after `npm install`
         new WatchMissingNodeModulesPlugin('node_modules'),
       ]),