webpacker 4.0.0.pre.3 → 4.0.0.rc.1

data/docs/es6.md

@@ -5,7 +5,7 @@
 
 Webpacker ships with [babel](https://babeljs.io/) - a JavaScript compiler so
 you can use next generation JavaScript, today. The Webpacker installer sets up a
-standard `.babelrc` file in your app root, which will work great in most cases
+standard `babel.config.js` file in your app root, which will work great in most cases
 because of [@babel/preset-env](https://github.com/babel/babel/tree/master/packages/babel-preset-env).
 
 Following ES6/7 features are supported out of the box:

data/docs/troubleshooting.md

@@ -86,7 +86,7 @@ chmod +x $HOME/your_rails_app/node_modules/.bin/elm-make
 ```
 
 ## Rake assets:precompile fails. ExecJS::RuntimeError
-This error occurs because you are trying to uglify a pack that's already been minified by Webpacker. To avoid this conflict and prevent appearing of ExecJS::RuntimeError error, you will need to disable uglifier from Rails config:
+This error occurs because you are trying to minify by terser a pack that's already been minified by Webpacker. To avoid this conflict and prevent appearing of ExecJS::RuntimeError error, you will need to disable uglifier from Rails config:
 
 ```ruby
 // production.rb

data/docs/webpack.md

@@ -256,7 +256,48 @@ const { environment } = require('@rails/webpacker')
 environment.resolvedModules.append('vendor', 'vendor')
 ```
 
-### Add common chunks
+### Add SplitChunks (Webpack V4)
+Originally, chunks (and modules imported inside them) were connected by a parent-child relationship in the internal webpack graph. The CommonsChunkPlugin was used to avoid duplicated dependencies across them, but further optimizations were not possible
+
+Since webpack v4, the CommonsChunkPlugin was removed in favor of optimization.splitChunks.
+
+For the full configuration options of SplitChunks, see the [Webpack documentation](https://webpack.js.org/plugins/split-chunks-plugin/).
+
+```js
+// config/webpack/environment.js
+const WebpackAssetsManifest = require('webpack-assets-manifest');
+
+const splitChunks = {
+  optimization: {
+    splitChunks: {
+      chunks: 'all'
+    },
+  },
+};
+
+environment.config.merge(splitChunks);
+
+// Should override the existing manifest plugin
+environment.plugins.insert(
+  'Manifest',
+  new WebpackAssetsManifest({
+    entrypoints: true, // default in rails is false
+    writeToDisk: true, // rails defaults copied from webpacker
+    publicPath: true // rails defaults copied from webpacker
+  })
+)
+```
+
+To use the `javascript_pack_tag` or the `stylesheet_pack_tag` with `SplitChunks` or `RuntimeChunks` you can refer to the packs as usual.
+
+```erb
+javascript_pack_tag "your-entrypoint-javascript-file"
+stylesheet_pack_tag "your-entrypoint-stylesheet-file"
+```
+
+For the old configuration with the CommonsChunkPlugin see below. **Note** that this functionality is deprecated in Webpack V4.
+
+### Add common chunks (deprecated in Webpack V4)
 
 The CommonsChunkPlugin is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points. By separating common modules from bundles, the resulting chunked file can be loaded once initially, and stored in the cache for later use. This results in page speed optimizations as the browser can quickly serve the shared code from the cache, rather than being forced to load a larger bundle whenever a new page is visited.
 

data/gemfiles/Gemfile-rails-edge

@@ -7,7 +7,7 @@ gem "webpacker", path: ".."
 gem "rails", github: "rails/rails"
 gem "arel", github: "rails/arel"
 gem "rake", ">= 11.1"
-gem "rubocop", ">= 0.49", require: false
+gem "rubocop", git: "https://github.com/rubocop-hq/rubocop.git", require: false
 gem "rack-proxy", require: false
 gem "minitest", "~> 5.0"
 gem "byebug"

data/gemfiles/Gemfile-rails.4.2.x

@@ -4,7 +4,7 @@ gem "webpacker", path: ".."
 
 gem "rails", "~> 4.2.0"
 gem "rake", ">= 11.1"
-gem "rubocop", ">= 0.49", require: false
+gem "rubocop", git: "https://github.com/rubocop-hq/rubocop.git", require: false
 gem "rack-proxy", require: false
 gem "minitest", "~> 5.0"
 gem "byebug"

data/gemfiles/Gemfile-rails.5.0.x

@@ -4,7 +4,7 @@ gem "webpacker", path: ".."
 
 gem "rails", "~> 5.0.0"
 gem "rake", ">= 11.1"
-gem "rubocop", ">= 0.49", require: false
+gem "rubocop", git: "https://github.com/rubocop-hq/rubocop.git", require: false
 gem "rack-proxy", require: false
 gem "minitest", "~> 5.0"
 gem "byebug"

data/gemfiles/Gemfile-rails.5.1.x

@@ -4,7 +4,7 @@ gem "webpacker", path: ".."
 
 gem "rails", "~> 5.1.0"
 gem "rake", ">= 11.1"
-gem "rubocop", ">= 0.49", require: false
+gem "rubocop", git: "https://github.com/rubocop-hq/rubocop.git", require: false
 gem "rack-proxy", require: false
 gem "minitest", "~> 5.0"
 gem "byebug"

data/gemfiles/Gemfile-rails.5.2.x

@@ -4,7 +4,7 @@ gem "webpacker", path: ".."
 
 gem "rails", "~> 5.2.0"
 gem "rake", ">= 11.1"
-gem "rubocop", ">= 0.49", require: false
+gem "rubocop", git: "https://github.com/rubocop-hq/rubocop.git", require: false
 gem "rack-proxy", require: false
 gem "minitest", "~> 5.0"
 gem "byebug"

data/lib/install/coffee.rb

@@ -9,11 +9,11 @@ insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   after: "require('@rails/webpacker')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.loaders.append('coffee', coffee)\n",
+  "environment.loaders.prepend('coffee', coffee)\n",
   before: "module.exports"
 
 say "Updating webpack paths to include .coffee file extension"
-insert_into_file Webpacker.config.config_path, "- .coffee\n".indent(4), after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .coffee\n".indent(4), after: /\s+extensions:\n/
 
 say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/coffee/hello_coffee.coffee",

data/lib/install/config/babel.config.js

@@ -0,0 +1,70 @@
+module.exports = function(api) {
+  var validEnv = ['development', 'test', 'production']
+  var currentEnv = api.env()
+  var isDevelopmentEnv = api.env('development')
+  var isProductionEnv = api.env('production')
+  var isTestEnv = api.env('test')
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      'Please specify a valid `NODE_ENV` or ' +
+        '`BABEL_ENV` environment variables. Valid values are "development", ' +
+        '"test", and "production". Instead, received: ' +
+        JSON.stringify(currentEnv) +
+        '.'
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        require('@babel/preset-env').default,
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        require('@babel/preset-env').default,
+        {
+          forceAllTransforms: true,
+          useBuiltIns: 'entry',
+          modules: false,
+          exclude: ['transform-typeof-symbol']
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      require('babel-plugin-macros'),
+      require('@babel/plugin-syntax-dynamic-import').default,
+      isTestEnv && require('babel-plugin-dynamic-import-node'),
+      require('@babel/plugin-transform-destructuring').default,
+      [
+        require('@babel/plugin-proposal-class-properties').default,
+        {
+          loose: true
+        }
+      ],
+      [
+        require('@babel/plugin-proposal-object-rest-spread').default,
+        {
+          useBuiltIns: true
+        }
+      ],
+      [
+        require('@babel/plugin-transform-runtime').default,
+        {
+          helpers: false,
+          regenerator: true
+        }
+      ],
+      [
+        require('@babel/plugin-transform-regenerator').default,
+        {
+          async: false
+        }
+      ]
+    ].filter(Boolean)
+  }
+}

data/lib/install/config/postcss.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    require('postcss-import'),
+    require('postcss-flexbugs-fixes'),
+    require('postcss-preset-env')({
+      autoprefixer: {
+        flexbox: 'no-2009'
+      },
+      stage: 3
+    })
+  ]
+}

data/lib/install/config/webpacker.yml

@@ -6,6 +6,7 @@ default: &default
   public_output_path: packs
   cache_path: tmp/cache/webpacker
   check_yarn_integrity: false
+  webpack_compile_output: false
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
@@ -14,7 +15,25 @@ default: &default
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
+  # Extract and emit a css file
+  extract_css: false
+
+  static_assets_extensions:
+    - .jpg
+    - .jpeg
+    - .png
+    - .gif
+    - .tiff
+    - .ico
+    - .svg
+    - .eot
+    - .otf
+    - .ttf
+    - .woff
+    - .woff2
+
   extensions:
+    - .mjs
     - .js
     - .sass
     - .scss
@@ -68,5 +87,8 @@ production:
   # Production depends on precompilation of packs prior to booting for performance.
   compile: false
 
+  # Extract and emit a css file
+  extract_css: true
+
   # Cache manifest.json for performance
   cache_manifest: true

data/lib/install/elm.rb

@@ -9,7 +9,7 @@ insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   after: "require('@rails/webpacker')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.loaders.append('elm', elm)\n",
+  "environment.loaders.prepend('elm', elm)\n",
   before: "module.exports"
 
 say "Copying Elm example entry file to #{Webpacker.config.source_entry_path}"
@@ -27,7 +27,7 @@ run "yarn run elm init"
 run "yarn run elm make"
 
 say "Updating webpack paths to include .elm file extension"
-insert_into_file Webpacker.config.config_path, "- .elm\n".indent(4), after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .elm\n".indent(4), after: /\s+extensions:\n/
 
 say "Updating Elm source location"
 gsub_file "elm.json", /\"\src\"\n/,

data/lib/install/erb.rb

@@ -9,11 +9,11 @@ insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
   after: "require('@rails/webpacker')\n"
 
 insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.loaders.append('erb', erb)\n",
+  "environment.loaders.prepend('erb', erb)\n",
   before: "module.exports"
 
 say "Updating webpack paths to include .erb file extension"
-insert_into_file Webpacker.config.config_path, "- .erb\n".indent(4), after: /extensions:\n/
+insert_into_file Webpacker.config.config_path, "- .erb\n".indent(4), after: /\s+extensions:\n/
 
 say "Copying the example entry file to #{Webpacker.config.source_entry_path}"
 copy_file "#{__dir__}/examples/erb/hello_erb.js.erb",

data/lib/install/examples/elm/Main.elm

@@ -1,5 +1,6 @@
 module Main exposing (..)
 
+import Browser
 import Html exposing (Html, h1, text)
 import Html.Attributes exposing (style)
 
@@ -21,7 +22,7 @@ view : Model -> Html Message
 view model =
   -- The inline style is being used for example purposes in order to keep this example simple and
   -- avoid loading additional resources. Use a proper stylesheet when building your own app.
-  h1 [style [("display", "flex"), ("justify-content", "center")]]
+  h1 [style "display" "flex", style "justify-content" "center"]
      [text "Hello Elm!"]
 
 -- MESSAGE
@@ -43,11 +44,11 @@ subscriptions model =
 
 -- MAIN
 
-main : Program Never Model Message
+main : Program (Maybe {}) Model Message
 main =
-  Html.program
+  Browser.element
     {
-      init = init,
+      init = always init,
       view = view,
       update = update,
       subscriptions = subscriptions

data/lib/install/examples/elm/hello_elm.js

@@ -2,11 +2,15 @@
 // head of your layout file, like app/views/layouts/application.html.erb.
 // It will render "Hello Elm!" within the page.
 
-import Elm from '../Main'
+import {
+  Elm
+} from '../Main'
 
 document.addEventListener('DOMContentLoaded', () => {
   const target = document.createElement('div')
 
   document.body.appendChild(target)
-  Elm.Main.embed(target)
+  Elm.Main.init({
+    node: target
+  })
 })

data/lib/install/examples/react/babel.config.js

@@ -0,0 +1,83 @@
+module.exports = function(api) {
+  var validEnv = ['development', 'test', 'production']
+  var currentEnv = api.env()
+  var isDevelopmentEnv = api.env('development')
+  var isProductionEnv = api.env('production')
+  var isTestEnv = api.env('test')
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      'Please specify a valid `NODE_ENV` or ' +
+        '`BABEL_ENV` environment variables. Valid values are "development", ' +
+        '"test", and "production". Instead, received: ' +
+        JSON.stringify(env) +
+        '.'
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        require('@babel/preset-env').default,
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        require('@babel/preset-env').default,
+        {
+          forceAllTransforms: true,
+          useBuiltIns: 'entry',
+          modules: false,
+          exclude: ['transform-typeof-symbol']
+        }
+      ],
+      [
+        require('@babel/preset-react').default,
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      require('babel-plugin-macros'),
+      require('@babel/plugin-syntax-dynamic-import').default,
+      isTestEnv && require('babel-plugin-dynamic-import-node'),
+      require('@babel/plugin-transform-destructuring').default,
+      [
+        require('@babel/plugin-proposal-class-properties').default,
+        {
+          loose: true
+        }
+      ],
+      [
+        require('@babel/plugin-proposal-object-rest-spread').default,
+        {
+          useBuiltIns: true
+        }
+      ],
+      [
+        require('@babel/plugin-transform-runtime').default,
+        {
+          helpers: false,
+          regenerator: true
+        }
+      ],
+      [
+        require('@babel/plugin-transform-regenerator').default,
+        {
+          async: false
+        }
+      ],
+      isProductionEnv && [
+        require('babel-plugin-transform-react-remove-prop-types').default,
+        {
+          removeImport: true
+        }
+      ]
+    ].filter(Boolean)
+  }
+}

data/lib/install/examples/vue/hello_vue.js

@@ -48,9 +48,9 @@ document.addEventListener('DOMContentLoaded', () => {
 //
 //
 //
-// If the using turbolinks, install 'vue-turbolinks':
+// If the project is using turbolinks, install 'vue-turbolinks':
 //
-// yarn add 'vue-turbolinks'
+// yarn add vue-turbolinks
 //
 // Then uncomment the code block below:
 //
@@ -63,8 +63,10 @@ document.addEventListener('DOMContentLoaded', () => {
 // document.addEventListener('turbolinks:load', () => {
 //   const app = new Vue({
 //     el: '#hello',
-//     data: {
-//       message: "Can you say hello?"
+//     data: () => {
+//       return {
+//         message: "Can you say hello?"
+//       }
 //     },
 //     components: { App }
 //   })