Tidy up webpack config (#1058)

CHANGELOG.md

@@ -65,6 +65,27 @@ cssLoader.options = Object.assign(cssLoader.options, {
 })
 ```
 
+- Expose rest of configurable dev server options from webpacker.yml
+
+```yml
+quiet: false
+headers:
+  'Access-Control-Allow-Origin': '*'
+watch_options:
+  ignored: /node_modules/
+```
+
+- Enforce deterministic loader order in desc order, starts processing from top to bottom
+
+- Enforce the entire path of all required modules match the exact case of the actual path on disk using [case sensitive paths plugin](https://github.com/Urthen/case-sensitive-paths-webpack-plugin).
+
+- Add url loader to process and embed smaller static files
+
+
+### Removed
+
+- resolve url loader [#1042](https://github.com/rails/webpacker/issues/1042)
+
 ### Added (Gem)
 
 - Allow skipping webpacker compile using an env variable

lib/install/config/webpacker.yml

@@ -43,8 +43,15 @@ development:
     # Inline should be set to true if using HMR
     inline: true
     overlay: true
+    compress: true
     disable_host_check: true
     use_local_ip: false
+    quiet: false
+    headers:
+      'Access-Control-Allow-Origin': '*'
+    watch_options:
+      ignored: /node_modules/
+
 
 test:
   <<: *default

package.json

@@ -18,6 +18,7 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
+    "case-sensitive-paths-webpack-plugin": "^2.1.1",
     "coffee-loader": "^0.9.0",
     "compression-webpack-plugin": "^1.0.1",
     "css-loader": "^0.28.7",
@@ -31,9 +32,9 @@
     "postcss-loader": "^2.0.9",
     "postcss-smart-import": "^0.7.5",
     "rails-erb-loader": "^5.2.1",
-    "resolve-url-loader": "^2.2.0",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.0",
+    "url-loader": "^0.6.2",
     "webpack": "^3.8.1",
     "webpack-manifest-plugin": "^1.3.2"
   },

package/config.js

@@ -1,10 +1,15 @@
 const { resolve } = require('path')
 const { safeLoad } = require('js-yaml')
 const { readFileSync } = require('fs')
+const deepMerge = require('./utils/deep_merge')
 
+const defaultFilePath = require.resolve('../lib/install/config/webpacker.yml')
 const filePath = resolve('config', 'webpacker.yml')
+
 const environment = process.env.NODE_ENV || 'development'
-const config = safeLoad(readFileSync(filePath), 'utf8')[environment]
+const defaultConfig = safeLoad(readFileSync(defaultFilePath), 'utf8')[environment]
+const appConfig = safeLoad(readFileSync(filePath), 'utf8')[environment]
+const config = deepMerge(defaultConfig, appConfig)
 
 const isBoolean = str => /^true/.test(str) || /^false/.test(str)
 

package/environment.js

@@ -10,6 +10,7 @@ const extname = require('path-complete-extname')
 const webpack = require('webpack')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const ManifestPlugin = require('webpack-manifest-plugin')
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 
 const { ConfigList, ConfigObject } = require('./config_types')
 const rules = require('./rules')
@@ -25,6 +26,7 @@ const getLoaderList = () => {
 const getPluginList = () => {
   const result = new ConfigList()
   result.append('Environment', new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env))))
+  result.append('CaseSensitivePaths', new CaseSensitivePathsPlugin())
   result.append('ExtractText', new ExtractTextPlugin('[name]-[contenthash].css'))
   result.append('Manifest', new ManifestPlugin({ publicPath: assetHost.publicPath, writeToFileEmit: true }))
   return result
@@ -76,6 +78,14 @@ const getBaseConfig = () =>
 
     resolveLoader: {
       modules: ['node_modules']
+    },
+
+    node: {
+      dgram: 'empty',
+      fs: 'empty',
+      net: 'empty',
+      tls: 'empty',
+      child_process: 'empty'
     }
   })
 
@@ -93,7 +103,10 @@ module.exports = class Environment {
       entry: this.entry.toObject(),
 
       module: {
-        rules: this.loaders.values()
+        strictExportPresence: true,
+        rules: [
+          { oneOf: this.loaders.values() }
+        ]
       },
 
       plugins: this.plugins.values(),

package/environments/development.js

@@ -20,7 +20,8 @@ module.exports = class extends Environment {
       },
       devServer: {
         clientLogLevel: 'none',
-        compress: true,
+        compress: devServer.compress,
+        quiet: devServer.quiet,
         disableHostCheck: devServer.disable_host_check,
         host: devServer.host,
         port: devServer.port,
@@ -31,17 +32,15 @@ module.exports = class extends Environment {
         useLocalIp: devServer.use_local_ip,
         public: devServer.public,
         publicPath: assetHost.publicPath,
-        historyApiFallback: true,
-        headers: {
-          'Access-Control-Allow-Origin': '*'
+        historyApiFallback: {
+          disableDotRule: true
         },
+        headers: devServer.headers,
         overlay: devServer.overlay,
-        watchOptions: {
-          ignored: /node_modules/
-        },
         stats: {
           errorDetails: true
-        }
+        },
+        watchOptions: devServer.watch_options
       }
     })
   }

package/environments/production.js

@@ -10,11 +10,16 @@ module.exports = class extends Environment {
 
     this.plugins.append('UglifyJs', new webpack.optimize.UglifyJsPlugin({
       sourceMap: true,
+      mangle: {
+        safari10: true
+      },
       compress: {
-        warnings: false
+        warnings: false,
+        comparisons: false
       },
       output: {
-        comments: false
+        comments: false,
+        ascii_only: true
       }
     }))
 

package/rules/coffee.js

@@ -1,4 +1,6 @@
 module.exports = {
   test: /\.coffee(\.erb)?$/,
-  use: ['coffee-loader']
+  use: [{
+    loader: 'coffee-loader'
+  }]
 }

package/rules/css.js

@@ -19,9 +19,8 @@ const styleLoader = {
 const extractOptions = {
   fallback: styleLoader,
   use: [
-    { loader: 'css-loader', options: { minimize: isProduction, sourceMap: true, importLoaders: 3 } },
-    { loader: 'postcss-loader', options: { sourceMap: true, config: { path: postcssConfigPath } } },
-    { loader: 'resolve-url-loader', options: { attempts: 1 } }
+    { loader: 'css-loader', options: { minimize: isProduction, sourceMap: true, importLoaders: 2 } },
+    { loader: 'postcss-loader', options: { sourceMap: true, config: { path: postcssConfigPath } } }
   ]
 }
 

package/rules/elm.js

@@ -19,5 +19,5 @@ const elmWebpackLoader = {
 module.exports = {
   test: /\.elm(\.erb)?$/,
   exclude: [/elm-stuff/, /node_modules/],
-  use: isProduction ? [elmWebpackLoader] : ['elm-hot-loader', elmWebpackLoader]
+  use: isProduction ? [elmWebpackLoader] : [{ loader: 'elm-hot-loader' }, elmWebpackLoader]
 }

package/rules/file.js

@@ -3,7 +3,7 @@ const { source_path } = require('../config')
 const assetHost = require('../asset_host')
 
 module.exports = {
-  test: /\.(jpg|jpeg|png|gif|tiff|ico|svg|eot|otf|ttf|woff|woff2)$/i,
+  exclude: /\.(js|jsx|coffee|ts|tsx|vue|elm|scss|sass|css|html|json)?(\.erb)?$/,
   use: [{
     loader: 'file-loader',
     options: {

package/rules/index.js

@@ -3,12 +3,14 @@ const coffee = require('./coffee')
 const elm = require('./elm')
 const erb = require('./erb')
 const file = require('./file')
+const url = require('./url')
 const css = require('./css')
 const sass = require('./sass')
 const typescript = require('./typescript')
 const vue = require('./vue')
 
 module.exports = {
+  url,
   babel,
   coffee,
   elm,

package/rules/sass.js

@@ -6,7 +6,10 @@ let sassLoader = JSON.parse(JSON.stringify(cssLoader))
 
 sassLoader = deepMerge(sassLoader, {
   test: /\.(scss|sass)$/i,
-  use: [{ loader: 'sass-loader', options: { sourceMap: true } }]
+  use: [{
+    loader: 'sass-loader',
+    options: { sourceMap: true }
+  }]
 })
 
 module.exports = sassLoader

package/rules/typescript.js

@@ -1,4 +1,6 @@
 module.exports = {
   test: /\.(ts|tsx)?(\.erb)?$/,
-  use: ['ts-loader']
+  use: [{
+    loader: 'ts-loader'
+  }]
 }

package/rules/url.js

@@ -0,0 +1,13 @@
+const assetHost = require('../asset_host')
+
+module.exports = {
+  test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+  use: [{
+    loader: 'url-loader',
+    options: {
+      limit: 10000,
+      name: '[name]-[hash].[ext]',
+      publicPath: assetHost.publicPathWithHost
+    }
+  }]
+}

package/utils/deep_merge.js

@@ -1,8 +1,10 @@
-const { isObject, isArray, isEqual } = require('./helpers')
+const {
+  isObject, isArray, isEqual, isEmpty
+} = require('./helpers')
 
 const deepMerge = (target, source) => {
-  if (!target) return source
-  if (!source) return target
+  if (isEmpty(target)) return source
+  if (isEmpty(source)) return target
   if (isEqual(target, source)) return source
   if (isArray(target) && isArray(source)) return [...new Set([...target, ...source])]
   if (!(isObject(target) && isObject(source))) return source

package/utils/helpers.js

@@ -4,6 +4,8 @@ const isObject = value => (
   (value.length === undefined || value.length === null)
 )
 
+const isEmpty = value => (value === null || value === undefined)
+
 const isString = key => key && typeof key === 'string'
 
 const isStrPath = (key) => {
@@ -23,6 +25,7 @@ module.exports = {
   isObject,
   isArray,
   isEqual,
+  isEmpty,
   isStrPath,
   canMerge,
   prettyPrint