webpacker 3.0.0 → 3.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: d46b2ad0a755995989397dd57d6a3f62fd8b6e29
-  data.tar.gz: 3bc409359bdb19b000d18a85e43d5e32c53c2160
+  metadata.gz: 6509ab0499053e37d9af22b79262832b33f8cd91
+  data.tar.gz: 869403b35f9178ea48884343782822282b91afde
 SHA512:
-  metadata.gz: b6b403b49ea4bd344acb77cf3d02f4d05cee50ace386f05d598f70583ba6f19d3f6114fcec33944e46dd8d7bbaccf6590598225ec0d6159168fe1d016844f9d6
-  data.tar.gz: 48d1d6686da5d7a9127bff68a26827e95c772b6f7966960b9ee0000707c0579b86db76bfae232dd4cfb74fbfc062b24940147eae270058f8bb8bcdf4ee4cf75c
+  metadata.gz: 8fd1e44cf21efb3ab7cb0e581c09e7ace7e3cb73412b227592885db69b5ffb57379f4386635f3937d1211e52aca75e907b4a417c7f2d255b2419e75681716cbc
+  data.tar.gz: 1c2cf1efddda9af825334f9e1cace219082ab6b24dbb1db307721c516533474b7451363c3b089819082adec696daea40967a0c55d4cfbe82d66d664b51b645a9

data/.gitignore

@@ -4,3 +4,5 @@
 node_modules
 .byebug_history
 /test/test_app/tmp
+Gemfile.lock
+yarn.lock

data/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [3.0.1] - 2017-09-01
+
+### Fixed
+
+- Missing `node_modules/.bin/*` files by bumping minimum Yarn version to 0.25.2 [#727](https://github.com/rails/webpacker/pull/727)
+
+- `webpacker:compile` task so that fails properly when webpack compilation fails [#728](https://github.com/rails/webpacker/pull/728)
+
+- Rack dev server proxy middleware when served under another proxy (example: pow), which uses `HTTP_X_FORWARDED_HOST` header resulting in `404` for webpacker assets
+
+- Make sure tagged logger works with rails < 5 [#716](https://github.com/rails/webpacker/pull/716)
+
+### Added
+
+- Allow webpack dev server listen host/ip to be configurable using additional `--listen-host` option
+
+  ```bash
+  ./bin/webpack-dev-server --listen-host 0.0.0.0 --host localhost
+  ```
+
+### Removed
+
+- `watchContentBase` from devServer config so it doesn't unncessarily trigger
+live reload when manifest changes. If you have applied this workaround from [#724](https://github.com/rails/webpacker/issues/724), please revert the change from `config/webpack/development.js` since this is now fixed.
+
+
 ## [3.0.0] - 2017-08-30
 
 ### Added

data/README.md

@@ -42,7 +42,7 @@ in which case you may not even need the asset pipeline. This is mostly relevant
 * Ruby 2.2+
 * Rails 4.2+
 * Node.js 6.0.0+
-* Yarn 0.20.1+
+* Yarn 0.25.2+
 
 
 ## Features
@@ -162,6 +162,15 @@ precedence over the ones already set in the configuration file.
 ./bin/webpack-dev-server --host example.com --inline true --hot false
 ```
 
+By default, webpack dev server listens on `localhost` in development for security
+but if you want your app to be available over local LAN IP or VM instance like vagrant
+you can pass an additional config option `--listen-host`
+when running `./bin/webpack-dev-server` binstub:
+
+```bash
+./bin/webpack-dev-server --listen-host 0.0.0.0
+```
+
 **Note:** Don't forget to prefix `ruby` when running these binstubs on windows
 
 ## Integrations

data/docs/env.md

@@ -35,20 +35,23 @@ yarn add dotenv
 // config/webpack/environment.js
 
 ...
-const dotenv = require('dotenv');
+const { environment } = require('@rails/webpacker')
+const webpack = require('webpack')
+const dotenv = require('dotenv')
 
 const dotenvFiles = [
   `.env.${process.env.NODE_ENV}.local`,
   '.env.local',
   `.env.${process.env.NODE_ENV}`,
   '.env'
-];
+]
 dotenvFiles.forEach((dotenvFile) => {
-  dotenv.config({ path: dotenvFile, silent: true });
-});
+  dotenv.config({ path: dotenvFile, silent: true })
+})
 
-module.exports = {
-  ...
+environment.plugins.set('Environment', new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(process.env))))
+
+module.exports = environment
 ```
 
 **Warning:** using Foreman/Invoker and npm dotenv at the same time can result in

data/docs/webpack.md

@@ -12,6 +12,33 @@ By default, you shouldn't have to make any changes to `config/webpack/*.js`
 files since it's all standard production-ready configuration. However,
 if you do need to customize or add a new loader, this is where you would go.
 
+Here is how you can modify webpack configuration:
+
+```js
+// config/webpack/custom.js
+module.exports = {
+  resolve: {
+    alias: {
+      jquery: 'jquery/src/jquery',
+      vue: 'vue/dist/vue.js',
+      React: 'react',
+      ReactDOM: 'react-dom',
+      vue_resource: 'vue-resource/dist/vue-resource',
+    }
+  }
+}
+
+// config/webpack/development.js
+const merge = require('webpack-merge')
+const environment = require('./environment')
+const customConfig = require('./custom')
+
+module.exports = merge(environment.toWebpackConfig(), customConfig)
+```
+
+**Note:** You will have to merge custom config to all env where you want that config
+to be available. In above case, it will be applied to development environment.
+
 
 ## Loaders
 
@@ -26,7 +53,7 @@ yarn add json-loader
 // config/webpack/environment.js
 const { environment } = require('@rails/webpacker')
 
-environment.loaders.add('json', {
+environment.loaders.set('json', {
   test: /\.json$/,
   use: 'json-loader'
 })
@@ -60,12 +87,25 @@ for loaders above:
 ```js
 // config/webpack/environment.js
 const { environment } = require('@rails/webpacker')
+const webpack = require('webpack')
 
 // Get a pre-configured plugin
 environment.plugins.get('ExtractText') // Is an ExtractTextPlugin instance
 
-// Add an additional plugin of your choosing
-environment.plugins.add('Fancy', new MyFancyWebpackPlugin)
+// Add an additional plugin of your choosing : ProvidePlugin
+environment.plugins.set(
+  'Provide',
+  new webpack.ProvidePlugin({
+    $: 'jquery',
+    jQuery: 'jquery',
+    jquery: 'jquery',
+    'window.Tether': 'tether',
+    Popper: ['popper.js', 'default'],
+    ActionCable: 'actioncable',
+    Vue: 'vue',
+    VueResource: 'vue-resource',
+  })
+)
 
 module.exports = environment
 ```
@@ -78,18 +118,26 @@ The CommonsChunkPlugin is an opt-in feature that creates a separate file (known
 Add the plugins in `config/webpack/environment.js`:
 
 ```js
-environment.plugins.add('CommonsChunkVendor', new webpack.optimize.CommonsChunkPlugin({
-  name: 'vendor',
-  minChunks: (module) => {
-    // this assumes your vendor imports exist in the node_modules directory
-    return module.context && module.context.indexOf('node_modules') !== -1;
-  }
-}))
-
-environment.plugins.add('CommonsChunkManifest', new webpack.optimize.CommonsChunkPlugin({
-  name: 'manifest',
-  minChunks: Infinity
-}))
+const webpack = require('webpack')
+
+environment.plugins.set(
+  'CommonsChunkVendor',
+  new webpack.optimize.CommonsChunkPlugin({
+    name: 'vendor',
+    minChunks: (module) => {
+      // this assumes your vendor imports exist in the node_modules directory
+      return module.context && module.context.indexOf('node_modules') !== -1;
+    }
+  })
+)
+
+environment.plugins.set(
+  'CommonsChunkManifest',
+  new webpack.optimize.CommonsChunkPlugin({
+    name: 'manifest',
+    minChunks: Infinity
+  })
+)
 ```
 
 Now, add these files to your `layouts/application.html.erb`:
@@ -97,12 +145,12 @@ Now, add these files to your `layouts/application.html.erb`:
 ```erb
 <%# Head %>
 
-<%= javascript_pack_tag 'manifest' %>
-<%= javascript_pack_tag 'vendor' %>
+<%= javascript_pack_tag "manifest" %>
+<%= javascript_pack_tag "vendor" %>
 
 <%# If importing any styles from node_modules in your JS app %>
 
-<%= stylesheet_pack_tag 'vendor' %>
+<%= stylesheet_pack_tag "vendor" %>
 ```
 
 More detailed guides available here: [Webpack guides](https://webpack.js.org/guides/)

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

@@ -16,7 +16,7 @@ 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/#{NODE_ENV}.js")
 
-LISTEN_HOST_ADDR = NODE_ENV == 'development' ? 'localhost' : '0.0.0.0'
+DEFAULT_LISTEN_HOST_ADDR = NODE_ENV == 'development' ? 'localhost' : '0.0.0.0'
 
 def args(key)
   index = ARGV.index(key)
@@ -26,10 +26,11 @@ end
 begin
   dev_server = YAML.load_file(CONFIG_FILE)[RAILS_ENV]["dev_server"]
 
-  HOSTNAME        = args('--host') || dev_server["host"]
-  PORT            = args('--port') || dev_server["port"]
-  HTTPS           = ARGV.include?('--https') || dev_server["https"]
-  DEV_SERVER_ADDR = "http#{"s" if HTTPS}://#{HOSTNAME}:#{PORT}"
+  HOSTNAME          = args('--host') || dev_server["host"]
+  PORT              = args('--port') || dev_server["port"]
+  HTTPS             = ARGV.include?('--https') || dev_server["https"]
+  DEV_SERVER_ADDR   = "http#{"s" if HTTPS}://#{HOSTNAME}:#{PORT}"
+  LISTEN_HOST_ADDR  = args('--listen-host') || DEFAULT_LISTEN_HOST_ADDR
 
 rescue Errno::ENOENT, NoMethodError
   $stdout.puts "Webpack dev_server configuration not found in #{CONFIG_FILE}."
@@ -46,8 +47,8 @@ rescue Errno::EADDRINUSE
   exit!
 end
 
-# Delete supplied host and port CLI arguments
-["--host", "--port"].each do |arg|
+# Delete supplied host, port and listen-host CLI arguments
+["--host", "--port", "--listen-host"].each do |arg|
   ARGV.delete(args(arg))
   ARGV.delete(arg)
 end

data/lib/install/config/webpacker.yml

@@ -49,7 +49,7 @@ test:
 production:
   <<: *default
 
-  # Production demands on precompilation of packs prior to booting for performance.
+  # Production depends on precompilation of packs prior to booting for performance.
   compile: false
 
   # Cache manifest.json for performance

data/lib/install/examples/angular/hello_angular/index.ts

@@ -3,4 +3,6 @@ import './polyfills.ts';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
 
-platformBrowserDynamic().bootstrapModule(AppModule);
+document.addEventListener('DOMContentLoaded', () => {
+  platformBrowserDynamic().bootstrapModule(AppModule);
+});

data/lib/install/examples/angular/hello_angular/polyfills.ts

@@ -1,19 +1,73 @@
-// This file includes polyfills needed by Angular and is loaded before
-// the app. You can add your own extra polyfills to this file.
-import 'core-js/es6/symbol';
-import 'core-js/es6/object';
-import 'core-js/es6/function';
-import 'core-js/es6/parse-int';
-import 'core-js/es6/parse-float';
-import 'core-js/es6/number';
-import 'core-js/es6/math';
-import 'core-js/es6/string';
-import 'core-js/es6/date';
-import 'core-js/es6/array';
-import 'core-js/es6/regexp';
-import 'core-js/es6/map';
-import 'core-js/es6/set';
-import 'core-js/es6/reflect';
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
 
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
 import 'core-js/es7/reflect';
+
+
+/**
+ * Required to support Web Animations `@angular/animation`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
 import 'zone.js/dist/zone';
+// import 'zone.js/dist/long-stack-trace-zone' // async stack traces with zone.js
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import 'intl/locale-data/jsonp/en';

data/lib/tasks/webpacker/check_node.rake

@@ -4,12 +4,16 @@ namespace :webpacker do
     begin
       node_version = `node -v`
       node_version = `nodejs -v` if node_version.blank?
-      required_node_version = "6.0"
-
       raise Errno::ENOENT if node_version.blank?
 
-      if Gem::Version.new(node_version.strip.tr("v", "")) < Gem::Version.new(required_node_version)
-        $stderr.puts "Webpacker requires Node.js >= v#{required_node_version} and you are using #{node_version}"
+      pkg_path = Pathname.new("#{__dir__}/../../../package.json").realpath
+      node_requirement = JSON.parse(pkg_path.read)["engines"]["node"]
+
+      requirement = Gem::Requirement.new(node_requirement)
+      version = Gem::Version.new(node_version.strip.tr("v", ""))
+
+      unless requirement.satisfied_by?(version)
+        $stderr.puts "Webpacker requires Node.js #{requirement} and you are using #{version}"
         $stderr.puts "Please upgrade Node.js https://nodejs.org/en/download/"
         $stderr.puts "Exiting!" && exit!
       end

data/lib/tasks/webpacker/check_yarn.rake

@@ -1,14 +1,23 @@
 namespace :webpacker do
-  desc "Verifies if yarn is installed"
+  desc "Verifies if Yarn is installed"
   task :check_yarn do
-    required_yarn_version = "0.20.1"
-
     begin
       yarn_version = `yarn --version`
+      raise Errno::ENOENT if yarn_version.blank?
+
+      pkg_path = Pathname.new("#{__dir__}/../../../package.json").realpath
+      yarn_requirement = JSON.parse(pkg_path.read)["engines"]["yarn"]
+
+      requirement = Gem::Requirement.new(yarn_requirement)
+      version = Gem::Version.new(yarn_version)
 
-      raise Errno::ENOENT if yarn_version.blank? || Gem::Version.new(yarn_version) < Gem::Version.new(required_yarn_version)
+      unless requirement.satisfied_by?(version)
+        $stderr.puts "Webpacker requires Yarn #{requirement} and you are using #{version}"
+        $stderr.puts "Please upgrade Yarn https://yarnpkg.com/lang/en/docs/install/"
+        $stderr.puts "Exiting!" && exit!
+      end
     rescue Errno::ENOENT
-      $stderr.puts "Webpacker requires Yarn version >= #{required_yarn_version}. Please download and install the latest version from https://yarnpkg.com/lang/en/docs/install/"
+      $stderr.puts "Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/"
       $stderr.puts "Exiting!" && exit!
     end
   end

data/lib/webpacker/commands.rb

@@ -16,7 +16,8 @@ class Webpacker::Commands
   end
 
   def compile
-    compiler.compile
-    manifest.refresh
+    compiler.compile.tap do |success|
+      manifest.refresh if success
+    end
   end
 end

data/lib/webpacker/compiler.rb

@@ -20,6 +20,8 @@ class Webpacker::Compiler
     if stale?
       record_compilation_digest
       run_webpack
+    else
+      true
     end
   end