Consolidate .yml files into webpacker.yml (#403)

* Consolidate yml config into one file webpacker.yml

Setup eager_load

Minor cleanup

Remove behind the scenes

Update template installer

Use filename

Install webpack loader as dependency

Fix spacing

Add watchtoptions

Remove hot

Remove ARGV for dev server

Put back colors

Oops use nil

Use cheap-module-source-map

Minor cleanup

Refactor

Change to default_settings

* Remove enabled

* Change case and move extension out of paths

* Change output directory for test

* Add back argv

* Use 0.0.0.0 for cloud 9

* Remove manifest overide since we don't use different output

* Revert configuration.rb to use default path-per-key

Fix typo

* Add https to dev server

* Move option up

* Remove config and manifest option

* Remove reference to config_path

* Flatten webpacker settings

* Fix extensions

* Update readme

* Update changelog

* Use 0.0.0.0 for host

* Fix typo

* Move dev_server to development env

* Change wording

* Remove contentBase

* Fix typo

* Update changelog and fix compile task

* Add a link break

* Print stdout alongside stderr

* Use puts

* Remove extra puts

CHANGELOG.md

@@ -1,3 +1,5 @@
+## [Unreleased]
+
 ### Fixed
 - Update `.babelrc` to fix compilation issues - [#306](https://github.com/rails/webpacker/issues/306)
 
@@ -7,23 +9,45 @@
 
 - Incorrect asset host when running `webpacker:compile` or `bin/webpack` in development mode - [#397](https://github.com/rails/webpacker/pull/397)
 
+- Update `webpacker:compile` task to use `stdout` and `stderr` for better logging - [#395](https://github.com/rails/webpacker/issues/395)
+
+- ARGV support for `webpack-dev-server` - [#286](https://github.com/rails/webpacker/issues/286)
+
 ### Added
 - [Elm](http://elm-lang.org) support. You can now add Elm support via the following methods:
   - New app: `rails new <app> --webpack=elm`
   - Within an existing app: `rails webpacker:install:elm`
 
-- Support for custom `output` paths independent of `entry` in `paths.yml`. `output` is also now relative to `public/`. - [#397](https://github.com/rails/webpacker/pull/397)
+- Support for custom `public_output_path` paths independent of `source_entry_path` in `config/webpacker.yml`. `output` is also now relative to `public/`. - [#397](https://github.com/rails/webpacker/pull/397)
 
     Before (compile to `public/packs`):
     ```yaml
-    entry: packs              
-    output: public
+      source_entry_path: packs
+      public_output_path: packs
     ```
     After (compile to `public/sweet/js`):
     ```yaml
-    entry: packs
-    output: sweet/js
+      source_entry_path: packs
+      public_output_path: sweet/js
     ```
+
+- `https` option to use `https` mode, particularly on platforms like - https://community.c9.io/t/running-a-rails-app/1615 or locally - [#176](https://github.com/rails/webpacker/issues/176)
+
+
+#### Breaking Change
+
+- Consolidate and flatten `paths.yml` and `development.server.yml` config into one file - `config/webpacker.yml` - [#403](https://github.com/rails/webpacker/pull/403). This is a breaking change and requires you to re-install webpacker and cleanup old configuration files.
+
+  ```bash
+  bundle update webpacker
+  bundle exec rails webpacker:install
+
+  # Remove old/unused configuration files
+  rm config/paths.yml
+  rm config/development.server.yml
+  rm config/development.server.js
+  ```
+
 
 ## [1.2] - 2017-04-27
 Some of the changes made requires you to run below commands to install new changes.

README.md

@@ -101,33 +101,26 @@ and
 ## Advanced Configuration
 
 By default, webpacker offers simple conventions for where the webpack configs, javascript app files and compiled webpack bundles will go in your rails app,
-but all these options are configurable from `config/webpack/paths.yml` file.
+but all these options are configurable from `config/webpacker.yml` file.
 
 ```yml
-# config/webpack/paths.yml
-source: app/javascript
-entry: packs
-output: public
-config: config/webpack
-node_modules: node_modules
+# config/webpacker.yml
+source_path: app/assets/javascript
+source_entry_path: entries
+public_output_path: entries
 ```
 
-*Note:* Behind the scenes, webpacker will use same `entry` directory name inside `output`
-directory to emit bundles. For ex, `public/packs`
-
 Similary, you can also control and configure `webpack-dev-server` settings from
-`config/webpack/development.server.yml` file
+`config/webpacker.yml` file
 
 ```yml
-# config/webpack/development.server.yml
-enabled: true
-host: localhost
-port: 8080
+# config/webpacker.yml
+dev_server:
+  host: 0.0.0.0
+  port: 8080
+  https: false
 ```
 
-By default, `webpack-dev-server` uses `output` option specified in
-`paths.yml` as `contentBase`.
-
 ## Linking to static assets
 
 Static assets like images, fonts and stylesheets support is enabled out-of-box so, you can link them into your javascript app code and have them compiled automatically.

lib/install/angular.rb

@@ -1,6 +1,6 @@
 require "webpacker/configuration"
 
-puts "Copying angular loader to #{Webpacker::Configuration.config_path}/loaders"
+puts "Copying angular loader to config/webpack/loaders"
 copy_file "#{__dir__}/config/loaders/installers/angular.js", "config/webpack/loaders/angular.js"
 
 puts "Copying angular example entry file to #{Webpacker::Configuration.entry_path}"

lib/install/bin/webpack-dev-server.tt

@@ -10,24 +10,32 @@ RAILS_ENV = ENV["RAILS_ENV"]
 ENV["NODE_ENV"] ||= RAILS_ENV
 NODE_ENV = ENV["NODE_ENV"]
 
-APP_PATH = File.expand_path("../", __dir__)
+APP_PATH          = File.expand_path("../", __dir__)
+CONFIG_FILE       = File.join(APP_PATH, "config/webpacker.yml")
+NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
+WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/development.js")
+
+def args(key)
+  index = ARGV.index(key)
+  index ? ARGV[index + 1] : nil
+end
+
+begin
+  dev_server = YAML.load_file(CONFIG_FILE)["development"]["dev_server"]
+
+  DEV_SERVER_HOST = "http#{"s" if args('--https') || dev_server["https"]}://#{args('--host') || dev_server["host"]}:#{args('--port') || dev_server["port"]}"
 
-def load_yaml_config(config_file)
-  YAML.load_file(File.join(APP_PATH, config_file))[NODE_ENV]
 rescue Errno::ENOENT, NoMethodError
-  puts "Configuration not found in #{config_file}."
+  puts "Webpack dev_server configuration not found in #{CONFIG_FILE}."
   puts "Please run bundle exec rails webpacker:install to install webpacker"
   exit!
 end
 
-paths = load_yaml_config("config/webpack/paths.yml")
-NODE_MODULES_PATH = File.join(APP_PATH, paths["node_modules"])
-WEBPACK_CONFIG = File.join(APP_PATH, paths["config"], "development.server.js")
-
-dev_server = load_yaml_config("config/webpack/development.server.yml")
-DEV_SERVER_HOST = "http#{"s" if dev_server["https"]}://#{dev_server["host"]}:#{dev_server["port"]}"
+newenv = {
+  "NODE_PATH" => NODE_MODULES_PATH.shellescape,
+  "ASSET_HOST" => DEV_SERVER_HOST.shellescape
+}.freeze
 
-newenv = { "NODE_PATH" => NODE_MODULES_PATH.shellescape, "ASSET_HOST" => DEV_SERVER_HOST.shellescape }
 cmdline = ["yarn", "run", "webpack-dev-server", "--", "--progress", "--color", "--config", WEBPACK_CONFIG] + ARGV
 
 Dir.chdir(APP_PATH) do

lib/install/bin/webpack.tt

@@ -10,21 +10,17 @@ RAILS_ENV = ENV["RAILS_ENV"]
 ENV["NODE_ENV"] ||= RAILS_ENV
 NODE_ENV = ENV["NODE_ENV"]
 
-APP_PATH = File.expand_path("../", __dir__)
+APP_PATH          = File.expand_path("../", __dir__)
+NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
+WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js")
 
-def load_yaml_config(config_file)
-  YAML.load_file(File.join(APP_PATH, config_file))[NODE_ENV]
-rescue Errno::ENOENT, NoMethodError
-  puts "Configuration not found in #{config_file}."
+unless File.exist?(WEBPACK_CONFIG)
+  puts "Webpack configuration not found."
   puts "Please run bundle exec rails webpacker:install to install webpacker"
   exit!
 end
 
-paths = load_yaml_config("config/webpack/paths.yml")
-NODE_MODULES_PATH = File.join(APP_PATH, paths["node_modules"])
-WEBPACK_CONFIG = File.join(APP_PATH, paths["config"], "#{NODE_ENV}.js")
-
-newenv = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
+newenv  = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
 cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV
 
 Dir.chdir(APP_PATH) do

lib/install/config/webpack/configuration.js

@@ -1,14 +1,13 @@
-// Common configuration for webpacker loaded from config/webpack/paths.yml
+// Common configuration for webpacker loaded from config/webpacker.yml
 
 const { join, resolve } = require('path')
 const { env } = require('process')
 const { safeLoad } = require('js-yaml')
 const { readFileSync } = require('fs')
 
-const configPath = resolve('config', 'webpack')
+const configPath = resolve('config', 'webpacker.yml')
 const loadersDir = join(__dirname, 'loaders')
-const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]
-const devServer = safeLoad(readFileSync(join(configPath, 'development.server.yml'), 'utf8'))[env.NODE_ENV]
+const settings = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV]
 
 function removeOuterSlashes(string) {
   return string.replace(/^\/*/, '').replace(/\/*$/, '')
@@ -24,14 +23,13 @@ function formatPublicPath(host = '', path = '') {
 }
 
 const output = {
-  path: resolve('public', paths.output),
-  publicPath: formatPublicPath(env.ASSET_HOST, paths.output)
+  path: resolve('public', settings.public_output_path),
+  publicPath: formatPublicPath(env.ASSET_HOST, settings.public_output_path)
 }
 
 module.exports = {
-  devServer,
+  settings,
   env,
-  paths,
   loadersDir,
   output
 }

lib/install/config/webpack/development.js

@@ -2,15 +2,31 @@
 
 const merge = require('webpack-merge')
 const sharedConfig = require('./shared.js')
+const { settings, output } = require('./configuration.js')
 
 module.exports = merge(sharedConfig, {
-  devtool: 'sourcemap',
+  devtool: 'cheap-eval-source-map',
 
   stats: {
     errorDetails: true
   },
 
   output: {
     pathinfo: true
+  },
+
+  devServer: {
+    clientLogLevel: 'none',
+    https: settings.dev_server.https,
+    host: settings.dev_server.host,
+    port: settings.dev_server.port,
+    contentBase: output.path,
+    publicPath: output.publicPath,
+    compress: true,
+    headers: { 'Access-Control-Allow-Origin': '*' },
+    historyApiFallback: true,
+    watchOptions: {
+      ignored: /node_modules/
+    }
   }
 })

lib/install/config/webpack/shared.js

@@ -9,16 +9,17 @@ const { sync } = require('glob')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const ManifestPlugin = require('webpack-manifest-plugin')
 const extname = require('path-complete-extname')
-const { env, paths, output, loadersDir } = require('./configuration.js')
+const { env, settings, output, loadersDir } = require('./configuration.js')
 
-const extensionGlob = `**/*{${paths.extensions.join(',')}}*`
-const packPaths = sync(join(paths.source, paths.entry, extensionGlob))
+const extensionGlob = `**/*{${settings.extensions.join(',')}}*`
+const entryPath = join(settings.source_path, settings.source_entry_path)
+const packPaths = sync(join(entryPath, extensionGlob))
 
 module.exports = {
   entry: packPaths.reduce(
     (map, entry) => {
       const localMap = map
-      const namespace = relative(join(paths.source, paths.entry), dirname(entry))
+      const namespace = relative(join(entryPath), dirname(entry))
       localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry)
       return localMap
     }, {}
@@ -38,21 +39,20 @@ module.exports = {
     new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
     new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'),
     new ManifestPlugin({
-      fileName: paths.manifest,
       publicPath: output.publicPath,
       writeToFileEmit: true
     })
   ],
 
   resolve: {
-    extensions: paths.extensions,
+    extensions: settings.extensions,
     modules: [
-      resolve(paths.source),
-      resolve(paths.node_modules)
+      resolve(settings.source_path),
+      'node_modules'
     ]
   },
 
   resolveLoader: {
-    modules: [paths.node_modules]
+    modules: ['node_modules']
   }
 }