Consolidate .yml files into webpacker.yml

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,43 @@
 
 - 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']
   }
 }