webpack-1.2 - update all files to webpack 1.2 defaults

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    ["env", { "modules": false } ]
+  ]
+}

bin/webpack

@@ -12,21 +12,14 @@ NODE_ENV    = ENV["NODE_ENV"]
 
 APP_PATH               = File.expand_path("../", __dir__)
 CONFIG_PATH            = File.join(APP_PATH, "config/webpack/paths.yml")
-DEV_SERVER_CONFIG_PATH = File.join(APP_PATH, "config/webpack/development.server.yml")
 
 begin
-  paths            = YAML.load(File.read(CONFIG_PATH))
-  dev_server = YAML.load(File.read(DEV_SERVER_CONFIG_PATH))
+  paths            = YAML.load(File.read(CONFIG_PATH))[NODE_ENV]
 
   NODE_MODULES_PATH   = File.join(APP_PATH.shellescape, paths["node_modules"])
   WEBPACK_CONFIG_PATH = File.join(APP_PATH.shellescape, paths["config"])
-
-  if NODE_ENV == "development" && dev_server["enabled"]
-    puts "Warning: webpack-dev-server is currently enabled in #{DEV_SERVER_CONFIG_PATH}. " \
-      "Disable to serve assets directly from public/packs directory"
-  end
 rescue Errno::ENOENT, NoMethodError
-  puts "Configuration not found in config/webpack/paths.yml or config/webpack/development.server.yml."
+  puts "Configuration not found in config/webpack/paths.yml"
   puts "Please run bundle exec rails webpacker:install to install webpacker"
   exit!
 end

bin/webpack-dev-server

@@ -11,7 +11,7 @@ ENV["NODE_ENV"] ||= RAILS_ENV
 NODE_ENV = ENV["NODE_ENV"]
 
 APP_PATH    = File.expand_path("../", __dir__)
-CONFIG_PATH = File.join(APP_PATH, "config/webpack/paths.yml")
+CONFIG_PATH = File.join(APP_PATH, "config/webpack/paths.yml")[NODE_ENV]
 
 begin
   paths = YAML.load(File.read(CONFIG_PATH))
@@ -29,5 +29,5 @@ end
 
 Dir.chdir(APP_PATH) do
   exec "NODE_PATH=#{NODE_MODULES_PATH} #{WEBPACK_BIN} --progress --color " \
-    "--config #{DEV_SERVER_CONFIG}"
+    "--config #{DEV_SERVER_CONFIG} #{ARGV.join(" ")}"
 end

config/webpack/configuration.js

@@ -8,10 +8,14 @@ const { execSync } = require('child_process')
 
 const configPath = resolve('config', 'webpack')
 const loadersDir = join(__dirname, 'loaders')
-const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))
-const devServer = safeLoad(readFileSync(join(configPath, 'development.server.yml'), 'utf8'))
-const publicPath = env.NODE_ENV !== 'production' && devServer.enabled ?
-  `http://${devServer.host}:${devServer.port}/` : `/${paths.entry}/`
+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]
+
+// Compute public path based on environment and ASSET_HOST in production
+const ifHasCDN = env.ASSET_HOST !== undefined && env.NODE_ENV === 'production'
+const devServerUrl = `http://${devServer.host}:${devServer.port}/${paths.entry}/`
+const publicUrl = ifHasCDN ? `${env.ASSET_HOST}/${paths.entry}/` : `/${paths.entry}/`
+const publicPath = env.NODE_ENV !== 'production' ? devServerUrl : publicUrl
 
 // override paths.output to use Rails.root
 const outputPrefix = execSync('rake webpacker:output', { encoding: 'utf8' }).trim();
@@ -22,5 +26,6 @@ module.exports = {
   env,
   paths,
   loadersDir,
+  publicUrl,
   publicPath
 }

config/webpack/development.js

@@ -1,4 +1,4 @@
-// Note: You must restart bin/webpack-watcher for changes to take effect
+// Note: You must restart bin/webpack-dev-server for changes to take effect
 
 const merge = require('webpack-merge')
 const sharedConfig = require('./shared.js')

config/webpack/development.server.yml

@@ -1,4 +1,17 @@
-# Restart webpack-dev-server if you make changes here
-enabled: true
-host: localhost
-port: 8080
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  enabled: true
+  host: localhost
+  port: 8080
+
+development:
+  <<: *default
+
+test:
+  <<: *default
+  enabled: false
+
+production:
+  <<: *default
+  enabled: false

config/webpack/loaders/assets.js

@@ -1,7 +1,7 @@
 const { env, publicPath } = require('../configuration.js')
 
 module.exports = {
-  test: /\.(jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
+  test: /\.(jpg|jpeg|png|gif|svg|eot|ttf|woff|woff2)$/i,
   use: [{
     loader: 'file-loader',
     options: {

config/webpack/loaders/babel.js

@@ -1,10 +1,5 @@
 module.exports = {
   test: /\.js(\.erb)?$/,
   exclude: /node_modules/,
-  loader: 'babel-loader',
-  options: {
-    presets: [
-      ['env', { modules: false }]
-    ]
-  }
+  loader: 'babel-loader'
 }

config/webpack/loaders/erb.js

@@ -4,6 +4,6 @@ module.exports = {
   exclude: /node_modules/,
   loader: 'rails-erb-loader',
   options: {
-    runner: 'DISABLE_SPRING=1 bin/rails runner'
+    runner: 'bin/rails runner'
   }
 }

config/webpack/loaders/sass.js

@@ -1,9 +1,14 @@
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const { env } = require('../configuration.js')
 
 module.exports = {
   test: /\.(scss|sass|css)$/i,
   use: ExtractTextPlugin.extract({
     fallback: 'style-loader',
-    use: ['css-loader', 'postcss-loader', 'sass-loader']
+    use: [
+      { loader: 'css-loader', options: { minimize: env.NODE_ENV === 'production' } },
+      'postcss-loader',
+      'sass-loader'
+    ]
   })
 }

config/webpack/paths.yml

@@ -1,19 +1,33 @@
-# Restart webpack-watcher or webpack-dev-server if you make changes here
-config: config/webpack
-entry: packs
-output: public
-node_modules: node_modules
-source: app/javascript
-extensions:
-  - .coffee
-  - .js
-  - .jsx
-  - .ts
-  - .vue
-  - .sass
-  - .scss
-  - .css
-  - .png
-  - .svg
-  - .gif
-  - .jpeg
+# Note: You must restart bin/webpack-dev-server for changes to take effect
+
+default: &default
+  config: config/webpack
+  entry: packs
+  output: public
+  manifest: manifest.json
+  node_modules: node_modules
+  source: app/javascript
+  extensions:
+    - .coffee
+    - .js
+    - .jsx
+    - .ts
+    - .vue
+    - .sass
+    - .scss
+    - .css
+    - .png
+    - .svg
+    - .gif
+    - .jpeg
+    - .jpg
+
+development:
+  <<: *default
+
+test:
+  <<: *default
+  manifest: manifest-test.json
+
+production:
+  <<: *default

config/webpack/production.js

@@ -1,5 +1,6 @@
+// Note: You must restart bin/webpack-dev-server for changes to take effect
+
 /* eslint global-require: 0 */
-// Note: You must run bin/webpack for changes to take effect
 
 const webpack = require('webpack')
 const merge = require('webpack-merge')

config/webpack/shared.js

@@ -1,40 +1,43 @@
-// Note: You must restart bin/webpack-watcher for changes to take effect
+// Note: You must restart bin/webpack-dev-server for changes to take effect
+
 /* eslint global-require: 0 */
 /* eslint import/no-dynamic-require: 0 */
 
 const webpack = require('webpack')
-const { basename, join, resolve } = require('path')
+const { basename, dirname, join, relative, resolve } = require('path')
 const { sync } = require('glob')
-const { readdirSync } = require('fs')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const ManifestPlugin = require('webpack-manifest-plugin')
 const extname = require('path-complete-extname')
 const { env, paths, publicPath, loadersDir } = require('./configuration.js')
 
-const extensionGlob = `*{${paths.extensions.join(',')}}*`
+const extensionGlob = `**/*{${paths.extensions.join(',')}}*`
 const packPaths = sync(join(paths.source, paths.entry, extensionGlob))
 
 module.exports = {
   entry: packPaths.reduce(
     (map, entry) => {
       const localMap = map
-      localMap[basename(entry, extname(entry))] = resolve(entry)
+      const namespace = relative(join(paths.source, paths.entry), dirname(entry))
+      localMap[join(namespace, basename(entry, extname(entry)))] = resolve(entry)
       return localMap
     }, {}
   ),
 
-  output: { filename: '[name].js', path: resolve(paths.output, paths.entry) },
+  output: {
+    filename: '[name].js',
+    path: resolve(paths.output, paths.entry),
+    publicPath
+  },
 
   module: {
-    rules: readdirSync(loadersDir).map(file => (
-      require(join(loadersDir, file))
-    ))
+    rules: sync(join(loadersDir, '*.js')).map(loader => require(loader))
   },
 
   plugins: [
     new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
     new ExtractTextPlugin(env.NODE_ENV === 'production' ? '[name]-[hash].css' : '[name].css'),
-    new ManifestPlugin({ fileName: 'manifest.json', publicPath, writeToFileEmit: true })
+    new ManifestPlugin({ fileName: paths.manifest, publicPath, writeToFileEmit: true })
   ],
 
   resolve: {

config/webpack/test.js

@@ -0,0 +1,6 @@
+// Note: You must restart bin/webpack-dev-server for changes to take effect
+
+const merge = require('webpack-merge')
+const sharedConfig = require('./shared.js')
+
+module.exports = merge(sharedConfig, {})

lib/tasks/manageiq/ui_tasks.rake

@@ -34,12 +34,6 @@ namespace :webpack do
       system("bin/webpack-dev-server") || abort("\n== webpack-dev-server failed ==")
     end
   end
-
-  task :watcher do
-    Dir.chdir ManageIQ::UI::Classic::Engine.root do
-      system("bin/webpack-watcher") || abort("\n== webpack-watcher failed ==")
-    end
-  end
 end
 
 # needed by config/webpack/configuration.js

package.json

@@ -30,7 +30,7 @@
     "autoprefixer": "~6.7.7",
     "babel-core": "~6.24.1",
     "babel-eslint": "~6.0.4",
-    "babel-loader": "~6.4.1",
+    "babel-loader": "~7.0",
     "babel-preset-env": "~1.4.0",
     "coffee-loader": "~0.7.3",
     "coffee-script": "~1.12.5",