chore: add 'webpack' to 'lint' tasks, small refactors

Author: matteocng

package.json

@@ -26,9 +26,9 @@
     "start:classes": "cross-env USE_CSS_MODULES=false babel-node webpack/server.js",
     "flow": "flow; test $? -eq 0 -o $? -eq 2",
     "lint": "npm run lint:js && npm run lint:css",
-    "lint:js": "eslint src cmrh.conf.js",
+    "lint:js": "eslint src webpack cmrh.conf.js",
     "lint:css": "sass-lint 'src/**/*.scss' -v -q",
-    "lint:fix": "eslint src --fix",
+    "lint:fix": "eslint src webpack --fix",
     "pre-commit": "npm run lint && npm run flow"
   },
   "pre-commit": [

webpack/server.js

@@ -1,13 +1,9 @@
 import WebpackDevServer from 'webpack-dev-server'
 import webpack from 'webpack'
-import path from 'path'
-
-import configMaker, { outputPath } from './webpack.config.js'
+import configMaker, { outputPath } from './webpack.config'
 
 const config = configMaker()
-var compiler = webpack(config)
-
-
+const compiler = webpack(config)
 
 const server = new WebpackDevServer(compiler, {
   contentBase: outputPath,

webpack/webpack.config.js

@@ -11,50 +11,52 @@ const CSS_REGEX = /\.css$|\.scss$/
 const context = path.join(__dirname, '../src/js')
 export const outputPath = 'www'
 
+type GetRulesInputType = { useCssModules: boolean }
 
-const getRules = options => {
-  const useCssModules = JSON.parse(process.env.USE_CSS_MODULES)
-
-  return [
-    {
-      test: JS_REGEX,
-      loaders: ['babel-loader'],
-      exclude: /node_modules/
-    },
-    {
-      test: CSS_REGEX,
-      loader: ExtractTextPlugin.extract({
-        fallback: "style-loader",
-        use: [
-          { loader: 'css-loader', query: {
+const getRules = ({ useCssModules }: GetRulesInputType): {}[] => [
+  {
+    test: JS_REGEX,
+    loaders: ['babel-loader'],
+    exclude: /node_modules/
+  },
+  {
+    test: CSS_REGEX,
+    loader: ExtractTextPlugin.extract({
+      fallback: 'style-loader',
+      use: [
+        { loader: 'css-loader',
+          query: {
             modules: useCssModules,
             importLoaders: useCssModules ? 2 : '',
             localIdentName: useCssModules ? '[name]__[local]__[hash:base64:5]' : ''
           } },
-          { loader: 'postcss-loader', options: {
+        { loader: 'postcss-loader',
+          options: {
             plugins: [
               autoprefixer({ browsers: ['last 4 versions'] }),
             ],
           } },
           { loader: 'sass-loader', options: {} }
-        ]
-      }),
-    },
-    {
-      test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-      loader: "file-loader"
-    },
-    {
-      test: /\.json$/,
-      loader: "json-loader"
-    }
- ]
-}
+      ]
+    }),
+  },
+  {
+    test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+    loader: 'file-loader'
+  },
+  {
+    test: /\.json$/,
+    loader: 'json-loader'
+  }
+]
 
 
-const config = options => {
+const config = (options: {}): {} => {
+  const useCssModules = JSON.parse(process.env.USE_CSS_MODULES)
+  const computedOptions = { useCssModules, ...options }
+
   return {
-    context: context,
+    context,
     entry: [
       `webpack-dev-server/client?http://0.0.0.0:${port}/`,
       path.join(context, 'index.js'),
@@ -79,12 +81,12 @@ const config = options => {
       })
     ],
     node: {
-      fs: "empty"
+      fs: 'empty'
     },
     module: {
-      rules: getRules(options)
-   }
- }
+      rules: getRules(computedOptions)
+    }
+  }
 }
 
 export default config