webpacker 2.0 → 3.0.0

data/lib/webpacker/manifest.rb

@@ -1,51 +1,75 @@
-# Singleton registry for accessing the packs path using generated manifest.
+# Singleton registry for accessing the packs path using a generated manifest.
 # This allows javascript_pack_tag, stylesheet_pack_tag, asset_pack_path to take a reference to,
 # say, "calendar.js" or "calendar.css" and turn it into "/packs/calendar.js" or
-# "/packs/calendar.css" in development. In production mode, it returns compiles
-# files, # "/packs/calendar-1016838bab065ae1e314.js" and
-# "/packs/calendar-1016838bab065ae1e314.css" for long-term caching
+# "/packs/calendar.css" in development.
+#
+# In production mode, it returns compiles files, like
+# "/packs/calendar-1016838bab065ae1e314.js" and "/packs/calendar-1016838bab065ae1e314.css",
+# for long-term caching.
+#
+# When the configuration is set to on-demand compilation, with the `compile: true` option in
+# the webpacker.yml file, any lookups will be preceeded by a compilation if one is needed.
+class Webpacker::Manifest
+  class MissingEntryError < StandardError; end
 
-require "webpacker/file_loader"
+  delegate :config, :compiler, :dev_server, to: :@webpacker
 
-class Webpacker::Manifest < Webpacker::FileLoader
-  class << self
-    def file_path
-      Webpacker::Configuration.manifest_path
-    end
+  def initialize(webpacker)
+    @webpacker = webpacker
+  end
 
-    def lookup(name)
-      load if Webpacker.env.development?
+  def refresh
+    @data = load
+  end
 
-      if Webpacker.env.test?
-        find(name) || compile_and_find!(name)
-      else
-        find!(name)
-      end
+  def lookup(name)
+    compile if compiling?
+    find name
+  end
+
+  private
+    def compiling?
+      config.compile? && !dev_server.running?
     end
 
-    def lookup_path(name)
-      Rails.root.join(File.join(Webpacker::Configuration.public_path, lookup(name)))
+    def compile
+      Webpacker.logger.tagged("Webpacker") { compiler.compile }
     end
 
-    private
-      def find(name)
-        instance.data[name.to_s] if instance
-      end
+    def find(name)
+      data[name.to_s] || handle_missing_entry(name)
+    end
 
-      def find!(name)
-        raise Webpacker::FileLoader::FileLoaderError.new("Webpacker::Manifest.load must be called first") unless instance
-        instance.data[name.to_s] || raise(Webpacker::FileLoader::NotFoundError.new("Can't find #{name} in #{file_path}. Is webpack still compiling?"))
-      end
+    def handle_missing_entry(name)
+      raise Webpacker::Manifest::MissingEntryError, missing_file_from_manifest_error(name)
+    end
 
-      def compile_and_find!(name)
-        Webpacker.compile
-        find!(name)
+    def missing_file_from_manifest_error(bundle_name)
+      msg = <<-MSG
+Webpacker can't find #{bundle_name} in #{config.public_manifest_path}. Possible causes:
+1. You want to set wepbacker.yml value of compile to true for your environment
+   unless you are using the `webpack -w` or the webpack-dev-server.
+2. Webpack has not yet re-run to reflect updates.
+3. You have misconfigured Webpacker's config/webpacker.yml file.
+4. Your Webpack configuration is not creating a manifest.
+Your manifest contains:
+#{JSON.pretty_generate(@data)}
+      MSG
+    end
+
+    def data
+      if config.cache_manifest?
+        @data ||= load
+      else
+        refresh
       end
-  end
+    end
 
-  private
     def load
-      return super unless File.exist?(@path)
-      JSON.parse(File.read(@path))
+      if config.public_manifest_path.exist?
+        JSON.parse config.public_manifest_path.read
+      else
+        {}
+      end
     end
 end

data/lib/webpacker/railtie.rb

@@ -1,9 +1,18 @@
 require "rails/railtie"
 
 require "webpacker/helper"
+require "webpacker/dev_server_proxy"
 
 class Webpacker::Engine < ::Rails::Engine
-  initializer :webpacker do |app|
+  initializer "webpacker.proxy" do |app|
+    if Rails.env.development?
+      app.middleware.insert_before 0,
+        Rails::VERSION::MAJOR >= 5 ?
+          Webpacker::DevServerProxy : "Webpacker::DevServerProxy", ssl_verify_none: true
+    end
+  end
+
+  initializer "webpacker.helper" do |app|
     ActiveSupport.on_load :action_controller do
       ActionController::Base.helper Webpacker::Helper
     end
@@ -11,8 +20,18 @@ class Webpacker::Engine < ::Rails::Engine
     ActiveSupport.on_load :action_view do
       include Webpacker::Helper
     end
+  end
+
+  initializer "webpacker.logger" do
+    config.after_initialize do |app|
+      Webpacker.logger = ::Rails.logger
+    end
+  end
 
-    Webpacker.bootstrap
-    Spring.after_fork { Webpacker.bootstrap } if defined?(Spring)
+  initializer "webpacker.bootstrap" do
+    if defined?(Rails::Server) || defined?(Rails::Console)
+      Webpacker.bootstrap
+      Spring.after_fork { Webpacker.bootstrap } if defined?(Spring)
+    end
   end
 end

data/lib/webpacker/version.rb

@@ -1,3 +1,4 @@
 module Webpacker
-  VERSION = "2.0".freeze
+  # Change the version in package.json too, please!
+  VERSION = "3.0.0".freeze
 end

data/package.json

@@ -1,12 +1,42 @@
 {
-  "name": "webpacker",
-  "version": "1.0.0",
-  "description": "Webpacker makes it easy to use the JavaScript preprocessor and bundler [Webpack](https://webpack.github.io) to manage application-like JavaScript in Rails. It coexists with the asset pipeline, as the purpose is only to use Webpack for app-like JavaScript, not images, css, or even JavaScript Sprinkles (that all continues to live in app/assets).",
-  "main": "index.js",
+  "name": "@rails/webpacker",
+  "version": "3.0.0",
+  "description": "Use Webpack to manage app-like JavaScript modules in Rails",
+  "main": "package/index.js",
+  "files": [
+    "package"
+  ],
   "engines": {
-    "node": ">= 6.4.0"
+    "node": ">= 6.0.0"
+  },
+  "dependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.6.0",
+    "coffee-loader": "^0.8.0",
+    "coffee-script": "^1.12.7",
+    "compression-webpack-plugin": "^1.0.0",
+    "css-loader": "^0.28.5",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^0.11.2",
+    "glob": "^7.1.2",
+    "js-yaml": "^3.9.1",
+    "node-sass": "^4.5.3",
+    "path-complete-extname": "^0.1.0",
+    "postcss-cssnext": "^3.0.2",
+    "postcss-loader": "^2.0.6",
+    "postcss-smart-import": "^0.7.5",
+    "rails-erb-loader": "^5.2.1",
+    "resolve-url-loader": "^2.1.0",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.18.2",
+    "webpack": "^3.5.5",
+    "webpack-manifest-plugin": "^1.3.1"
   },
-  "dependencies": {},
   "devDependencies": {
     "eslint": "^3.16.1",
     "eslint-config-airbnb": "^14.1.0",
@@ -16,7 +46,7 @@
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "lint": "yarn run eslint lib/"
+    "lint": "eslint {package,lib}/"
   },
   "repository": {
     "type": "git",

data/package/asset_host.js

@@ -0,0 +1,21 @@
+const config = require('./config')
+const { resolve } = require('path')
+
+function removeOuterSlashes(string) {
+  return string.replace(/^\/*/, '').replace(/\/*$/, '')
+}
+
+function formatPublicPath(host = '', path = '') {
+  let formattedHost = removeOuterSlashes(host)
+  if (formattedHost && !/^http/i.test(formattedHost)) {
+    formattedHost = `//${formattedHost}`
+  }
+  const formattedPath = removeOuterSlashes(path)
+  return `${formattedHost}/${formattedPath}/`
+}
+
+module.exports = {
+  path: resolve('public', config.public_output_path),
+  publicPath: `/${config.public_output_path}/`.replace(/([^:]\/)\/+/g, '$1'),
+  publicPathWithHost: formatPublicPath(process.env.ASSET_HOST, config.public_output_path)
+}

data/package/config.js

@@ -0,0 +1,8 @@
+const { resolve } = require('path')
+const { safeLoad } = require('js-yaml')
+const { readFileSync } = require('fs')
+
+const filePath = resolve('config', 'webpacker.yml')
+const config = safeLoad(readFileSync(filePath), 'utf8')
+
+module.exports = config[process.env.NODE_ENV]

data/package/environment.js

@@ -0,0 +1,95 @@
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+const config = require('./config')
+const assetHost = require('./asset_host')
+
+const { basename, dirname, join, relative, resolve } = require('path')
+const { sync } = require('glob')
+const extname = require('path-complete-extname')
+
+const webpack = require('webpack')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const ManifestPlugin = require('webpack-manifest-plugin')
+
+function getLoaderMap() {
+  const result = new Map()
+  const paths = sync(resolve(__dirname, 'loaders', '*.js'))
+  paths.forEach((path) => {
+    const name = basename(path, extname(path))
+    result.set(name, require(path))
+  })
+  return result
+}
+
+function getPluginMap() {
+  const result = new Map()
+  result.set('Environment', new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env))))
+  result.set('ExtractText', new ExtractTextPlugin('[name]-[contenthash].css'))
+  result.set('Manifest', new ManifestPlugin({ publicPath: assetHost.publicPath, writeToFileEmit: true }))
+  return result
+}
+
+function getExtensionsGlob() {
+  const { extensions } = config
+  if (!extensions.length) {
+    throw new Error('You must configure at least one extension to compile in webpacker.yml')
+  }
+  return extensions.length === 1 ? `**/${extensions[0]}` : `**/*{${extensions.join(',')}}`
+}
+
+function getEntryObject() {
+  const result = {}
+  const glob = getExtensionsGlob()
+  const rootPath = join(config.source_path, config.source_entry_path)
+  const paths = sync(join(rootPath, glob))
+  paths.forEach((path) => {
+    const namespace = relative(join(rootPath), dirname(path))
+    const name = join(namespace, basename(path, extname(path)))
+    result[name] = resolve(path)
+  })
+  return result
+}
+
+function getModulePaths() {
+  let result = [resolve(config.source_path), 'node_modules']
+  if (config.resolved_paths) {
+    result = result.concat(config.resolved_paths)
+  }
+  return result
+}
+
+module.exports = class Environment {
+  constructor() {
+    this.loaders = getLoaderMap()
+    this.plugins = getPluginMap()
+  }
+
+  toWebpackConfig() {
+    return {
+      entry: getEntryObject(),
+
+      output: {
+        filename: '[name]-[chunkhash].js',
+        chunkFilename: '[name]-[chunkhash].chunk.js',
+        path: assetHost.path,
+        publicPath: assetHost.publicPath
+      },
+
+      module: {
+        rules: Array.from(this.loaders.values())
+      },
+
+      plugins: Array.from(this.plugins.values()),
+
+      resolve: {
+        extensions: config.extensions,
+        modules: getModulePaths()
+      },
+
+      resolveLoader: {
+        modules: ['node_modules']
+      }
+    }
+  }
+}

data/package/environments/development.js

@@ -0,0 +1,47 @@
+const Environment = require('../environment')
+const { dev_server } = require('../config')
+const assetHost = require('../asset_host')
+const webpack = require('webpack')
+
+module.exports = class extends Environment {
+  constructor() {
+    super()
+
+    if (dev_server.hmr) {
+      this.plugins.set('HotModuleReplacement', new webpack.HotModuleReplacementPlugin())
+      this.plugins.set('NamedModules', new webpack.NamedModulesPlugin())
+    }
+  }
+
+  toWebpackConfig() {
+    const result = super.toWebpackConfig()
+    if (dev_server.hmr) {
+      result.output.filename = '[name]-[hash].js'
+    }
+    result.output.pathinfo = true
+    result.devtool = 'cheap-eval-source-map'
+    result.devServer = {
+      host: dev_server.host,
+      port: dev_server.port,
+      https: dev_server.https,
+      hot: dev_server.hmr,
+      contentBase: assetHost.path,
+      publicPath: assetHost.publicPath,
+      clientLogLevel: 'none',
+      compress: true,
+      historyApiFallback: true,
+      headers: {
+        'Access-Control-Allow-Origin': '*'
+      },
+      overlay: true,
+      watchContentBase: true,
+      watchOptions: {
+        ignored: /node_modules/
+      },
+      stats: {
+        errorDetails: true
+      }
+    }
+    return result
+  }
+}

data/package/environments/production.js

@@ -0,0 +1,34 @@
+const Environment = require('../environment')
+const webpack = require('webpack')
+const CompressionPlugin = require('compression-webpack-plugin')
+
+module.exports = class extends Environment {
+  constructor() {
+    super()
+
+    this.plugins.set('ModuleConcatenation', new webpack.optimize.ModuleConcatenationPlugin())
+
+    this.plugins.set('UglifyJs', new webpack.optimize.UglifyJsPlugin({
+      sourceMap: true,
+      compress: {
+        warnings: false
+      },
+      output: {
+        comments: false
+      }
+    }))
+
+    this.plugins.set('Compression', new CompressionPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
+    }))
+  }
+
+  toWebpackConfig() {
+    const result = super.toWebpackConfig()
+    result.devtool = 'source-map'
+    result.stats = 'normal'
+    return result
+  }
+}

data/package/environments/test.js

@@ -0,0 +1,3 @@
+const Environment = require('../environment')
+
+module.exports = class extends Environment {}

data/package/index.js

@@ -0,0 +1,16 @@
+/* eslint global-require: 0 */
+/* eslint import/no-dynamic-require: 0 */
+
+const Environment = require('./environment')
+const { resolve } = require('path')
+const { existsSync } = require('fs')
+
+function createEnvironment() {
+  const path = resolve(__dirname, 'environments', `${process.env.NODE_ENV}.js`)
+  const constructor = existsSync(path) ? require(path) : Environment
+  return new constructor()
+}
+
+const environment = createEnvironment()
+
+module.exports = { environment, Environment }