Skip to content
Branch: master
Find file Copy path
Find file Copy path
912 lines (601 sloc) 27.9 KB

Please note that Webpacker 3.1.0 and 3.1.1 have some serious bugs so please consider using either 3.0.2 or 3.2.0

[4.0.7] - 2019-06-03

[4.0.6] - 2019-05-30

  • Webpack should not be transpiled #2111

[4.0.5] - 2019-05-30

  • Don't let babel & core-js transpile each other #2110

[4.0.4] - 2019-05-28

  • Remove bundler version constraint

[4.0.3] - 2019-05-28

Please see the diff

Breaking changes (for pre-existing apps)

In each of your /packs/*.js files, change this:

import "@babel/polyfill";

to this:

import "core-js/stable";
import "regenerator-runtime/runtime";

Don't forget install those dependencies directly!

yarn add --save core-js regenerator-runtime

[4.0.2] - 2019-03-06

  • Bump the version on npm

[4.0.1] - 2019-03-04


  • Pre-release version installer

[4.0.0] - 2019-03-04

No changes in this release. See RC releases for changes.

[4.0.0.rc.8] - 2019-03-03


  • Re-enable source maps in production to make debugging in production easier. Enabling source maps doesn't have drawbacks for most of the applications since maps are compressed by default and aren't loaded by browsers unless Dev Tools are opened.

Source maps can be disabled in any environment configuration, e.g:

// config/webpack/production.js

const environment = require('./environment')
environment.config.merge({ devtool: 'none' })

module.exports = environment.toWebpackConfig()
  • Reintroduced context to the file loader. Reverting the simpler paths change

  • Updated file loader to have filename based on the path. This change keeps the old behaviour intact i.e. let people use namespaces for media inside app/javascript and also include media outside of app/javascript with simpler paths, for example from node_modules or app/assets

# Files inside app/javascript (i.e. packs source path)
# media/[full_path_relative_to_app_javascript]/name_of_the_asset_with_digest

# Files outside app/javascript (i.e. packs source path)
# media/[containing_folder_name]/name_of_the_asset_with_digest

This change is done so we don't end up paths like media/_/assets/images/rails_assets-f0f7bbb5ef00110a0dcef7c2cb7d34a6.png or media/_/_/node_modules/foo-f0f7bbb5ef00110a0dcef7c2cb7d34a6.png for media outside of app/javascript

[4.0.0.rc.7] - 2019-01-25


  • Webpacker builds test app assets #1908

[4.0.0.rc.6] - 2019-01-25


  • Remove context from file loader in favour of simpler paths
# before
"_/assets/images/avatar.png": "/packs/_/assets/images/avatar-057862c747f0fdbeae506bdd0516cad1.png"

# after
"media/avatar.png": "/packs/media/avatar-057862c747f0fdbeae506bdd0516cad1.png"

To get old behaviour:

// config/webpack/environment.js

const { environment, config } = require('@rails/webpacker')
const { join } = require('path')

const fileLoader = environment.loaders.get('file')
fileLoader.use[0] = '[path][name]-[hash].[ext]'
fileLoader.use[0].options.context = join(config.source_path) // optional if you don't want to expose full paths


  • Namespaces for compiled packs in the public directory
# before
"runtime~hello_react" => "/packs/runtime~hello_react-da2baf7fd07b0e8b6d17.js"

# after
"runtime~hello_react" => "/packs/js/runtime~hello_react-da2baf7fd07b0e8b6d17.js"

[4.0.0.rc.5] - 2019-01-21


  • Gems and node dependencies

[4.0.0.rc.4] - 2019-01-21


  • stylesheet_packs_with_chunks_tag helper, similar to javascript helper but for loading stylesheets chunks.
<%= stylesheet_packs_with_chunks_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %>

<link rel="stylesheet" media="screen" href="/packs/3-8c7ce31a.chunk.css" />
<link rel="stylesheet" media="screen" href="/packs/calendar-8c7ce31a.chunk.css" />
<link rel="stylesheet" media="screen" href="/packs/map-8c7ce31a.chunk.css" />

Important: Pass all your pack names when using stylesheet_packs_with_chunks_tag helper otherwise you will get duplicated chunks on the page.

<%# DO %>
# <%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %>
<%# DON'T %>
# <%= stylesheet_packs_with_chunks_tag 'calendar' %>
# <%= stylesheet_packs_with_chunks_tag 'map' %>

[4.0.0.rc.3] - 2019-01-17


  • Issue with javascript_pack_tag asset duplication #1898


  • javascript_packs_with_chunks_tag helper, which creates html tags for a pack and all the dependent chunks, when using splitchunks.
<%= javascript_packs_with_chunks_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %>

<script src="/packs/vendor-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
<script src="/packs/calendar~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
<script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
<script src="/packs/map~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
<script src="/packs/map-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>

Important: Pass all your pack names when using javascript_packs_with_chunks_tag helper otherwise you will get duplicated chunks on the page.

<%# DO %>
<%= javascript_packs_with_chunks_tag 'calendar', 'map' %>

<%# DON'T %>
<%= javascript_packs_with_chunks_tag 'calendar' %>
<%= javascript_packs_with_chunks_tag 'map' %>

[4.0.0.rc.2] - 2018-12-15


  • Disable integrity hash generation #1835

[4.0.0.rc.1] - 2018-12-14

Breaking changes

  • Order of rules changed so you might have to change append to prepend, depending on how you want to process packs #1823
  • Separate CSS extraction from build environment #1625
# Extract and emit a css file
extract_css: true
  • Separate rule to compile node modules (fixes cases where ES6 libraries were included in the app code) #1823.

    In previous versions only application code was transpiled. Now everything in node_modules is transpiled with Babel. In some cases it could break your build (known issue with mapbox-gl package being broken by Babel,

    nodeModules loader ignores config.babel.js and uses hard-coded '@babel/preset-env', { modules: false } config.

    To keep previous behavior, remove nodeModules loader specifying environment.loaders.delete('nodeModules'); in your config/webpack/environment.js file.

  • File loader extensions API #1823

# webpacker.yml
  - .pdf
  # etc..


  • Move .babelrc and .postcssrc to .js variant #1822
  • Use postcss safe parser when optimising css assets #1822
  • Add split chunks api (undocumented)
const { environment } = require('@rails/webpacker')
// Enable with default config
// Configure via a callback
environment.splitChunks((config) => Object.assign({}, config, { optimization: { splitChunks: false }}))
  • Allow changing static file extensions using webpacker.yml (undocumented)

[4.0.0-pre.3] - 2018-10-01


Breaking changes

  • postcss-next is replaced with postcss-preset-env
  • babel@7


  • Bring back test env #1563

Please see a list of commits

[4.0.0-pre.2] - 2018-04-2


  • Webpack dev server version in installer

[4.0.0-pre.1] - 2018-04-2

Pre-release to try out webpack 4.0 support


  • Webpack 4.0 support #1376


  • Remove compilation digest file if webpack command fails#1398

Please refer to 3-x-stable branch for further releases and changelogs:

[3.4.1] - 2018-03-24


  • Yarn integrity check in development #1374

[3.4.0] - 2018-03-23

Please use 3.4.1 instead


  • Support for custom Rails environments #1359

This could break the compilation if you set NODE_ENV to custom environment. Now, NODE_ENV only understands production or development mode

[3.3.1] - 2018-03-12


  • Use webpack dev server 2.x until webpacker supports webpack 4.x #1338

[3.3.0] - 2018-03-03


  • Separate task for installing/updating binstubs
  • CSS modules support #1248
  • Pass relative_url_root to webpacker config #1236

Breaking changes

  • Fixes #1281 by installing binstubs only as local executables. To upgrade:
bundle exec rails webpacker:binstubs
  • set function is now removed from plugins and loaders, please use append or prepend
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')

environment.loaders.append('json', {
  test: /\.json$/,
  use: 'json-loader'


  • Limit ts-loader to 3.5.0 until webpack 4 support #1308
  • Custom env support #1304

[3.2.2] - 2018-02-11


bundle exec rails webpacker:install:stimulus
  • Upgrade gems and npm packages #1254

And, bunch of bug fixes See changes

[3.2.1] - 2018-01-21

  • Disable dev server running? check if no dev server config is present in that environment #1179

  • Fix checking 'webpack' binstub on Windows #1123

  • silence yarn output if checking is successful #1131

  • Update uglifyJs plugin to support ES6 #1194

  • Add typescript installer #1145

  • Update default extensions and move to installer #1181

  • Revert file loader #1196

[3.2.0] - 2017-12-16

To upgrade:

bundle update webpacker
yarn upgrade @rails/webpacker

Breaking changes

If you are using react, vue, angular, elm, erb or coffeescript inside your packs/ please re-run the integration installers as described in the README.

bundle exec rails webpacker:install:react
bundle exec rails webpacker:install:vue
bundle exec rails webpacker:install:angular
bundle exec rails webpacker:install:elm
bundle exec rails webpacker:install:erb
bundle exec rails webpacker:install:coffee

Or simply copy required loaders used in your app from into your config/webpack/loaders/ directory and add it to webpack build from config/webpack/environment.js

const erb =  require('./loaders/erb')
const elm =  require('./loaders/elm')
const typescript =  require('./loaders/typescript')
const vue =  require('./loaders/vue')
const coffee =  require('./loaders/coffee')

environment.loaders.append('coffee', coffee)
environment.loaders.append('vue', vue)
environment.loaders.append('typescript', typescript)
environment.loaders.append('elm', elm)
environment.loaders.append('erb', erb)

In .postcssrc.yml you need to change the plugin name from postcss-smart-import to postcss-import:

  postcss-import: {}
  postcss-cssnext: {}

Added (npm module)

  • Upgrade gems and webpack dependencies

  • postcss-import in place of postcss-smart-import

Removed (npm module)

  • postcss-smart-import, coffee-loader, url-loader, rails-erb-loader as dependencies

  • publicPath from file loader #1107

Fixed (npm module)

  • Return native array type for ConfigList #1098

Added (Gem)

  • New asset_pack_url helper #1102

  • New installers for coffee and erb

bundle exec rails webpacker:install:erb
bundle exec rails webpacker:install:coffee
  • Resolved paths from webpacker.yml to compiler watched list

[3.1.1] - 2017-12-11


  • Include default webpacker.yml config inside npm package

[3.1.0] - 2017-12-11

Added (npm module)

  • Expose base config from environment
environment.config.set('resolve.extensions', ['.foo', '.bar'])
environment.config.set('output.filename', '[name].js')
environment.config.merge({ output: {
    filename: '[name].js'
  • Expose new API's for loaders and plugins to insert at position
const jsonLoader =  {
  test: /\.json$/,
  exclude: /node_modules/,
  loader: 'json-loader'

environment.loaders.append('json', jsonLoader)
environment.loaders.prepend('json', jsonLoader)
environment.loaders.insert('json', jsonLoader, { after: 'style' } )
environment.loaders.insert('json', jsonLoader, { before: 'babel' } )

// Update a plugin
const manifestPlugin = environment.plugins.get('Manifest')
manifestPlugin.opts.writeToFileEmit = false

// Update coffee loader to use coffeescript 2
const babelLoader = environment.loaders.get('babel')
environment.loaders.insert('coffee', {
  test: /\.coffee(\.erb)?$/,
  use:  babelLoader.use.concat(['coffee-loader'])
}, { before: 'json' })
  • Expose resolve.modules paths like loaders and plugins
environment.resolvedModules.append('vendor', 'vendor')
  • Enable sourcemaps in style and css loader

  • Separate css and sass loader for easier configuration. style loader is now css loader, which resolves .css files and sass loader resolves .scss and .sass files.

// Enable css modules with sass loader
const sassLoader = environment.loaders.get('sass')
const cssLoader = sassLoader.use.find(loader => loader.loader === 'css-loader')

cssLoader.options = Object.assign({}, cssLoader.options, {
  modules: true,
  localIdentName: '[path][name]__[local]--[hash:base64:5]'
  • Expose rest of configurable dev server options from webpacker.yml
quiet: false
  'Access-Control-Allow-Origin': '*'
  ignored: /node_modules/
  • pretty option to disable/enable color and progress output when running dev server
  pretty: false
  • Enforce deterministic loader order in desc order, starts processing from top to bottom

  • Enforce the entire path of all required modules match the exact case of the actual path on disk using case sensitive paths plugin.

  • Add url loader to process and embed smaller static files


  • resolve url loader #1042

Added (Gem)

  • Allow skipping webpacker compile using an env variable
WEBPACKER_PRECOMPILE=false bundle exec rails assets:precompile

  • Alias webpacker:compile task to assets:precompile if is not defined so it works without sprockets

[3.0.2] - 2017-10-04


  • Allow dev server connect timeout (in seconds) to be configurable, default: 0.01
# Change to 1s
Webpacker.dev_server.connect_timeout = 1
  • Restrict the source maps generated in production #770

  • Binstubs #833

  • Allow dev server settings to be overridden by env variables #843

  • A new lookup method to manifest to perform lookup without raise and return nil

# => nil
# => raises Webpacker::Manifest::MissingEntryError
  • Catch all exceptions in DevServer.running? and return false #878


  • Inline CLI args for dev server binstub, use env variables instead

  • Coffeescript as core dependency. You have to manually add coffeescript now, if you are using it in your app.

yarn add coffeescript@1.12.7

# OR coffeescript 2.0
yarn add coffeescript

[3.0.1] - 2017-09-01


  • Missing node_modules/.bin/* files by bumping minimum Yarn version to 0.25.2 #727

  • webpacker:compile task so that fails properly when webpack compilation fails #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


  • Allow webpack dev server listen host/ip to be configurable using additional --listen-host option

    ./bin/webpack-dev-server --listen-host --host localhost


  • watchContentBase from devServer config so it doesn't unncessarily trigger live reload when manifest changes. If you have applied this workaround from #724, please revert the change from config/webpack/development.js since this is now fixed.

[3.0.0] - 2017-08-30


  • resolved_paths option to allow adding additional paths webpack should lookup when resolving modules
  # config/webpacker.yml
  # Additional paths webpack should lookup modules
  resolved_paths: [] # empty by default
  • Webpacker::Compiler.fresh? and Webpacker::Compiler.stale? answer the question of whether compilation is needed. The old Webpacker::Compiler.compile? predicate is deprecated.

  • Dev server config class that exposes config options through singleton.

  • Rack middleware proxies webpacker requests to dev server so we can always serve from same-origin and the lookup works out of the box - no more paths prefixing

  • env attribute on Webpacker::Compiler allows setting custom environment variables that the compilation is being run with

    Webpacker::Compiler.env['FRONTEND_API_KEY'] = 'your_secret_key'

Breaking changes

Note: requires running bundle exec rails webpacker:install


  • The majority of this config moved to the @rails/webpacker npm package. webpacker:install only creates config/webpack/{environment,development,test,production}.js now so if you're upgrading from a previous version you can remove all other files.


  • Move dev-server config options under defaults so it's transparently available in all environments

  • Add new HMR option for hot-module-replacement

  • Add HTTPS


  • Host info from manifest.json, now looks like this:

      "hello_react.js": "/packs/hello_react.js"


  • Update to respect RAILS_ENV and NODE_ENV values #502
  • Use as default listen address for webpack-dev-server
  • Serve assets using localhost from dev server - #424
    host: localhost
  • On Windows, ruby bin/webpacker and ruby bin/webpacker-dev-server will now bypass yarn, and execute via node_modules/.bin directly - #584

Breaking changes

  • Add compile and cache_path options to config/webpacker.yml for configuring lazy compilation of packs when a file under tracked paths is changed #503. To enable expected behavior, update config/webpacker.yml:

      default: &default
        cache_path: tmp/cache/webpacker
        compile: true
        compile: true
        compile: false
  • Make test compilation cacheable and configurable so that the lazy compilation only triggers if files are changed under tracked paths. Following paths are watched by default -

      ["app/javascript/**/*", "yarn.lock", "package.json", "config/webpack/**/*"]

    To add more paths:

    # config/initializers/webpacker.rb or config/application.rb
    Webpacker::Compiler.watched_paths << 'bower_components'

[2.0] - 2017-05-24


  • Update .babelrc to fix compilation issues - #306

  • Duplicated asset hosts - #320, #397

  • Missing asset host when defined as a Proc or on ActionController::Base.asset_host directly - #397

  • Incorrect asset host when running webpacker:compile or bin/webpack in development mode - #397

  • Update webpacker:compile task to use stdout and stderr for better logging - #395

  • ARGV support for webpack-dev-server - #286


  • Elm support. You can now add Elm support via the following methods:

    • New app: rails new <app> --webpack=elm
    • Within an existing app: rails webpacker:install:elm
  • Support for custom public_output_path paths independent of source_entry_path in config/webpacker.yml. output is also now relative to public/. - #397

    Before (compile to public/packs):

      source_entry_path: packs
      public_output_path: packs

    After (compile to public/sweet/js):

      source_entry_path: packs
      public_output_path: sweet/js
  • https option to use https mode, particularly on platforms like - or locally - #176

  • [Babel] Dynamic import() and Class Fields and Static Properties babel plugin to .babelrc

  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": "> 1%",
        "uglify": true
      "useBuiltIns": true

  "plugins": [
    "transform-class-properties", { "spec": true }
  • Source-map support for production bundle

Breaking Change

  • Consolidate and flatten paths.yml and development.server.yml config into one file - config/webpacker.yml - #403. This is a breaking change and requires you to re-install webpacker and cleanup old configuration files.

    bundle update webpacker
    bundle exec rails webpacker:install
    # Remove old/unused configuration files
    rm config/webpack/paths.yml
    rm config/webpack/development.server.yml
    rm config/webpack/development.server.js

    Warning: For now you also have to add a pattern in .gitignore by hand.


[1.2] - 2017-04-27

Some of the changes made requires you to run below commands to install new changes.

bundle update webpacker
bundle exec rails webpacker:install


  • Support Spring - #205

    Spring.after_fork { Webpacker.bootstrap } if defined?(Spring)
  • Check node version and yarn before installing webpacker - #217

  • Include webpacker helper to views - #172

  • Webpacker installer on windows - #245

  • Yarn duplication - #278

  • Add back Spring for rails-erb-loader - #216

  • Move babel presets and plugins to .babelrc - #202


  • A changelog - #211

  • Minimize CSS assets - #218

  • Pack namespacing support - #201

    For example:

  • Add tree-shaking support - #250

  • Add initial test case by @kimquy #259

  • Compile assets before test:controllers and test:system


  • Webpack watcher - #295

[1.1] - 2017-03-24

This release requires you to run below commands to install new features.

bundle update webpacker
bundle exec rails webpacker:install

# if installed react, vue or angular
bundle exec rails webpacker:install:[react, angular, vue]

Added (breaking changes)

  • Static assets support - #153
  • Advanced webpack configuration - #153


config.x.webpacker[:digesting] = true
You can’t perform that action at this time.