From c61195b71feb36cae97c21c3498d0abd5ae91e48 Mon Sep 17 00:00:00 2001 From: Martin Hradil Date: Thu, 11 May 2017 11:58:49 +0000 Subject: [PATCH] webpack-1.2 - update all files to webpack 1.2 defaults --- .babelrc | 5 +++ bin/webpack | 11 ++---- bin/webpack-dev-server | 4 +-- bin/webpack-watcher | 10 ------ config/webpack/configuration.js | 13 ++++--- config/webpack/development.js | 2 +- config/webpack/development.server.yml | 21 ++++++++--- config/webpack/loaders/assets.js | 2 +- config/webpack/loaders/babel.js | 7 +--- config/webpack/loaders/erb.js | 2 +- config/webpack/loaders/sass.js | 7 +++- config/webpack/paths.yml | 52 +++++++++++++++++---------- config/webpack/production.js | 3 +- config/webpack/shared.js | 23 ++++++------ config/webpack/test.js | 6 ++++ lib/tasks/manageiq/ui_tasks.rake | 6 ---- package.json | 2 +- 17 files changed, 100 insertions(+), 76 deletions(-) create mode 100644 .babelrc delete mode 100755 bin/webpack-watcher create mode 100644 config/webpack/test.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000000..a8211d329f6 --- /dev/null +++ b/.babelrc @@ -0,0 +1,5 @@ +{ + "presets": [ + ["env", { "modules": false } ] + ] +} diff --git a/bin/webpack b/bin/webpack index 42d5ccebf0c..a871ce77bc7 100755 --- a/bin/webpack +++ b/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 diff --git a/bin/webpack-dev-server b/bin/webpack-dev-server index 378e36f433f..870d8e6b2e4 100755 --- a/bin/webpack-dev-server +++ b/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 diff --git a/bin/webpack-watcher b/bin/webpack-watcher deleted file mode 100755 index a984f7c44a4..00000000000 --- a/bin/webpack-watcher +++ /dev/null @@ -1,10 +0,0 @@ -#!/usr/bin/env ruby - -ENV['RAILS_ENV'] ||= 'development' -ENV['NODE_ENV'] ||= ENV['RAILS_ENV'] - -BIN_PATH = File.expand_path('.', __dir__) - -Dir.chdir(BIN_PATH) do - exec "./webpack --watch --progress --color #{ARGV.join(" ")}" -end diff --git a/config/webpack/configuration.js b/config/webpack/configuration.js index 3041d685e24..db1047f7fd9 100644 --- a/config/webpack/configuration.js +++ b/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 } diff --git a/config/webpack/development.js b/config/webpack/development.js index d98ec5b13f6..7dfa2df11f0 100644 --- a/config/webpack/development.js +++ b/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') diff --git a/config/webpack/development.server.yml b/config/webpack/development.server.yml index 5dbfb7c8809..ee588a88852 100644 --- a/config/webpack/development.server.yml +++ b/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 diff --git a/config/webpack/loaders/assets.js b/config/webpack/loaders/assets.js index c859daf0b5b..595f073fc33 100644 --- a/config/webpack/loaders/assets.js +++ b/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: { diff --git a/config/webpack/loaders/babel.js b/config/webpack/loaders/babel.js index 82481e15e76..c608e708f37 100644 --- a/config/webpack/loaders/babel.js +++ b/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' } diff --git a/config/webpack/loaders/erb.js b/config/webpack/loaders/erb.js index c1a6cc15823..4cd7d684955 100644 --- a/config/webpack/loaders/erb.js +++ b/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' } } diff --git a/config/webpack/loaders/sass.js b/config/webpack/loaders/sass.js index faba9d5b0c6..2cb0e759a6f 100644 --- a/config/webpack/loaders/sass.js +++ b/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' + ] }) } diff --git a/config/webpack/paths.yml b/config/webpack/paths.yml index 4bf2671bbc2..26ab8facc5e 100644 --- a/config/webpack/paths.yml +++ b/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 diff --git a/config/webpack/production.js b/config/webpack/production.js index 82e2e9ff689..056ccdbfdc5 100644 --- a/config/webpack/production.js +++ b/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') diff --git a/config/webpack/shared.js b/config/webpack/shared.js index 39492aa44de..035e1e00817 100644 --- a/config/webpack/shared.js +++ b/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: { diff --git a/config/webpack/test.js b/config/webpack/test.js new file mode 100644 index 00000000000..e002d0cdc5e --- /dev/null +++ b/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, {}) diff --git a/lib/tasks/manageiq/ui_tasks.rake b/lib/tasks/manageiq/ui_tasks.rake index 640171c8ebf..83ecc3d4dd1 100644 --- a/lib/tasks/manageiq/ui_tasks.rake +++ b/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 diff --git a/package.json b/package.json index fe3139638e1..be3185ea407 100644 --- a/package.json +++ b/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",