Consolidate .yml files into webpacker.yml

CHANGELOG.md

@@ -12,11 +12,11 @@
   - 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 `output` paths independent of `entry` 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              
+    entry: packs
     output: public
     ```
     After (compile to `public/sweet/js`):

README.md

@@ -101,32 +101,28 @@ 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
+# config/webpacker.yml
 source: app/javascript
 entry: packs
 output: public
 config: config/webpack
-node_modules: node_modules
 ```
 
-*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
+# config/webpacker.yml
 host: localhost
 port: 8080
+https: false
 ```
 
 By default, `webpack-dev-server` uses `output` option specified in
-`paths.yml` as `contentBase`.
+`webpacker.yml` as `contentBase`.
 
 ## Linking to static assets
 

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

@@ -10,24 +10,34 @@ 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")
+
+def args(key)
+  index = ARGV.index(key)
+  index ? ARGV[index + 1] : nil
+end
+
+begin
+  yaml_config = YAML.load_file(CONFIG_FILE)[NODE_ENV]
+  paths       = yaml_config["paths"]
+  dev_server  = yaml_config["dev_server"]
+
+  WEBPACK_CONFIG  = File.join(APP_PATH, paths["config"], "development.js")
+  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 "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,23 @@ 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")
+
+begin
+  yaml_config = YAML.load_file(CONFIG_FILE)[NODE_ENV]
+  paths       = yaml_config["paths"]
+
+  WEBPACK_CONFIG = File.join(APP_PATH, paths["config"], "#{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}."
+  puts "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"], "#{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 { dev_server, extensions, paths } = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV]
 
 function removeOuterSlashes(string) {
   return string.replace(/^\/*/, '').replace(/\/*$/, '')
@@ -29,8 +28,9 @@ const output = {
 }
 
 module.exports = {
-  devServer,
+  dev_server,
   env,
+  extensions,
   paths,
   loadersDir,
   output

lib/install/config/webpack/development.js

@@ -2,15 +2,30 @@
 
 const merge = require('webpack-merge')
 const sharedConfig = require('./shared.js')
+const { dev_server, output } = require('./configuration.js')
 
 module.exports = merge(sharedConfig, {
-  devtool: 'sourcemap',
+  devtool: 'cheap-module-source-map',
 
   stats: {
     errorDetails: true
   },
 
   output: {
     pathinfo: true
+  },
+
+  devServer: {
+    clientLogLevel: 'none',
+    host: dev_server.host,
+    port: 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,9 +9,9 @@ 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, extensions, paths, output, loadersDir } = require('./configuration.js')
 
-const extensionGlob = `**/*{${paths.extensions.join(',')}}*`
+const extensionGlob = `**/*{${extensions.join(',')}}*`
 const packPaths = sync(join(paths.source, paths.entry, extensionGlob))
 
 module.exports = {
@@ -45,14 +45,14 @@ module.exports = {
   ],
 
   resolve: {
-    extensions: paths.extensions,
+    extensions,
     modules: [
       resolve(paths.source),
-      resolve(paths.node_modules)
+      'node_modules'
     ]
   },
 
   resolveLoader: {
-    modules: [paths.node_modules]
+    modules: ['node_modules']
   }
 }

lib/install/config/webpacker.yml

@@ -0,0 +1,46 @@
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  dev_server:                 # https://webpack.js.org/configuration/dev-server/
+    host: localhost           # Dev server host
+    port: 8080
+    https: false
+
+  paths:                       # ~ = Rails.root
+    source: app/javascript     # ~/:source
+    entry: packs               # ~/:source/:entry
+    output: packs              # ~/public/:output
+    manifest: manifest.json    # ~/public/:output/:manifest
+    config: config/webpack     # ~/:config
+
+  extensions:
+    - .coffee
+    - .js
+    - .jsx
+    - .ts
+    - .vue
+    - .sass
+    - .scss
+    - .css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+    - .jpg
+
+development:
+  <<: *default
+
+test:
+  <<: *default
+
+  paths:
+    output: packs-test
+
+production:
+  <<: *default
+
+  dev_server:
+    host: 0.0.0.0 # Cloud9
+    port: 8080
+    https: true

lib/install/elm.rb

@@ -12,8 +12,8 @@
           "#{Webpacker::Configuration.entry_path}/hello_elm.js"
 
 puts "Installing all elm dependencies"
-run "yarn add elm"
-run "yarn add --dev elm-hot-loader elm-webpack-loader"
+run "yarn add elm elm-webpack-loader"
+run "yarn add --dev elm-hot-loader"
 run "yarn run elm package install -- --yes"
 
 puts "Updating Webpack paths to include Elm file extension"

lib/install/template.rb

@@ -1,11 +1,19 @@
 # Install webpacker
+copy_file "#{__dir__}/config/webpacker.yml", "config/webpacker.yml"
+
 puts "Copying webpack core config and loaders"
 directory "#{__dir__}/config/webpack", "config/webpack"
 directory "#{__dir__}/config/loaders/core", "config/webpack/loaders"
-copy_file "#{__dir__}/config/.postcssrc.yml", ".postcssrc.yml"
 
-puts "Copying .babelrc to app root directory"
-copy_file "#{__dir__}/config/.babelrc", ".babelrc"
+unless File.exist?(".postcssrc.yml")
+  puts "Copying .postcssrc.yml to app root directory"
+  copy_file "#{__dir__}/config/.postcssrc.yml", ".postcssrc.yml"
+end
+
+unless File.exist?(".babelrc")
+  puts "Copying .babelrc to app root directory"
+  copy_file "#{__dir__}/config/.babelrc", ".babelrc"
+end
 
 puts "Creating javascript app source directory"
 directory "#{__dir__}/javascript", "#{Webpacker::Configuration.source}"

lib/tasks/webpacker/verify_install.rake

@@ -7,7 +7,7 @@ namespace :webpacker do
       puts "Webpacker is installed 🎉 🍰"
       puts "Using #{Webpacker::Configuration.file_path} file for setting up webpack paths"
     else
-      puts "Configuration config/webpack/paths.yml file not found. \n"\
+      puts "Configuration config/webpacker.yml file not found. \n"\
            "Make sure webpacker:install is run successfully before " \
            "running dependent tasks"
       exit!