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
Please note that Webpacker 4.1.0 has an installer bug. Please use 4.2.0 or above
[6.0.0] - 2020-TBD
node_modules
will no longer be compiled by default. This primarily fixes rails issue #35501 as well as numerous other webpacker issues. The disabled loader can still be required explicitly via:
const nodeModules = require('@rails/webpacker/rules/node_modules.js')
environment.loaders.append('nodeModules', nodeModules)
- If you have added
environment.loaders.delete('nodeModules')
to yourenvironment.js
, this must be removed or you will receive an error (Item nodeModules not found
). - The install task will now set the
extract_css
default totrue
in all environments and generate a separateapplication.css
file for the defaultapplication
pack, as supported by multiple files per entry introduced in 5.0.0. #2608 - Webpacker's wrapper to the
splitChunks()
API will now defaultruntimeChunk: 'single'
which will help prevent potential issues when using multiple entry points per page #2708. - Changes
@babel/preset-env
modules option to'auto'
per recommendation in the Babel docs #2709
[5.2.1] - 2020-08-17
- Revert #1311.
[5.2.0] - 2020-08-16
- Bump dependencies and fixes. See diff for changes.
[5.1.1] - 2020-04-20
- Update TypeScript documentation and installer to use babel-loader for typescript.(#2541
[5.1.0] - 2020-04-19
- Remove yarn integrity check #2518
- Switch from ts-loader to babel-loader #2449 Please see the TypeScript documentation to upgrade existing projects to use typescript with 5.1
- Resolve multi-word snakecase WEBPACKER_DEV_SERVER env values #2528
[5.0.1] - 2020-03-22
- Upgrade deps and fix sass loader config options bug #2508
[5.0.0] - 2020-03-22
- Bump minimum node version #2428
- Bump minimum ruby/rails version #2415
- Add support for multiple files per entry #2476
entry: {
home: ['./home.js', './home.scss'],
account: ['./account.js', './account.scss']
}
You can now have two entry files with same names inside packs folder, home.scss
and home.js
And, other minor fixes, please see a list of changes here
[4.2.2] - 2019-12-09
- Fixed issue with webpack clean task for nested assets #2391
[4.2.1] - 2019-12-09
- Fixed issue with webpack clean task #2389
[4.2.0] - 2019-11-12
- Fixed installer bug #2366
[4.1.0] - 2019-11-12
- Added favicon_pack_tag to generate favicon links #2281
- Add support for Brotli compression #2273
- Support .(sass|scss).erb #2259
- Elm: Enable production optimizations when compiling in production #2234
- fixes webpacker:clean erroring because of nested hashes #2318
- Revert of production env enforcement #2341
- Add a preload_pack_asset helper #2124
- Record the compilation digest even on webpack error #2117
- See more changes here
[4.0.7] - 2019-06-03
- Prevent
@babel/plugin-transform-runtime
from rewriting babel helpers in core-js. Remove unneeded runtime@babel/runtime-corejs3
#2116- Fix for: #2109 Uncaught TypeError: webpack_require(...) is not a function: If you are upgrading, please check your
babel.config.js
against the defaultbabel.config.js
:@babel/preset-env
should containcorejs: 3
@babel/plugin-transform-runtime
should containcorejs: false
- Fix for: #2109 Uncaught TypeError: webpack_require(...) is not a function: If you are upgrading, please check your
- Removed unneeded runtime
@babel/runtime-corejs3
[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
@babel/polyfill
doesn't make it possible to provide a smooth migration path fromcore-js@2
tocore-js@3
: for this reason, it was decided to deprecate@babel/polyfill
in favor of separate inclusion of required parts ofcore-js
andregenerator-runtime
. #2031
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 to install those dependencies directly!
yarn add core-js regenerator-runtime
- Bump the version on npm
- Pre-release version installer
No changes in this release. See RC releases for changes.
- 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 ofapp/javascript
with simpler paths, for example fromnode_modules
orapp/assets
# Files inside app/javascript (i.e. packs source path)
# media/[full_path_relative_to_app_javascript]/name_of_the_asset_with_digest
media/images/google-97e897b3851e415bec4fd30c265eb3ce.jpg
media/images/rails-45b116b1f66cc5e6f9724e8f9a2db73d.png
media/images/some_namespace/google-97e897b3851e415bec4fd30c265eb3ce.jpg
# Files outside app/javascript (i.e. packs source path)
# media/[containing_folder_name]/name_of_the_asset_with_digest
media/some_assets/rails_assets-f0f7bbb5.png
media/webfonts/fa-brands-400-4b115e11.woff2
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
- Webpacker builds test app assets #1908
- 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].options.name = '[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"
- Gems and node dependencies
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' %>
- 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' %>
- Disable integrity hash generation #1835
- Order of rules changed so you might have to change append to prepend, depending on how you want to process packs #1823
environment.loaders.prepend()
- 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 withmapbox-gl
package being broken by Babel, mapbox/mapbox-gl-js#3422).nodeModules
loader ignoresconfig.babel.js
and uses hard-coded'@babel/preset-env', { modules: false }
config.To keep previous behavior, remove
nodeModules
loader specifyingenvironment.loaders.delete('nodeModules');
in yourconfig/webpack/environment.js
file. -
File loader extensions API #1823
# webpacker.yml
static_assets_extensions:
- .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
environment.splitChunks()
// Configure via a callback
environment.splitChunks(config =>
Object.assign({}, config, { optimization: { splitChunks: false } })
)
- Allow changing static file extensions using webpacker.yml (undocumented)
- Move supported browsers configuration to .browserslistrc
- postcss-next is replaced with postcss-preset-env
- babel@7
- Bring back test env #1563
Please see a list of commits
- Webpack dev server version in installer
Pre-release to try out webpack 4.0 support
- Webpack 4.0 support #1376
- Remove compilation digest file if webpack command fails#1398
See changes: https://github.com/rails/webpacker/compare/88a253ed42966eb2d5c997435e9396881513bce1...3-x-stable
See changes: https://github.com/rails/webpacker/compare/e8b197e36c77181ca2e4765c620faea59dcd0351...3-x-stable
- On CI, sort files & check modified w/ digest intead of mtime#1522
- Relax Javascript package dependencies #1466
- Pin Javascript package to 3.5.x
- Upgraded gems and Javascript packages
- Remove compilation digest file if webpack command fails #1399
- Handle http dev_server setting properly in the proxy #1420
- Use correct protocol #1425
image_pack_tag
helper #1400- devserver proxy for custom environments #1415
- Rails webpacker:info task #1416
- Include
RAILS_RELATIVE_URL_ROOT
environment variable in publicPath #1428
Complete list of changes: #1464
- Lock webpacker version in installer #1401
- Yarn integrity check in development #1374
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
- Use webpack dev server 2.x until webpacker supports webpack 4.x #1338
- Separate task for installing/updating binstubs
- CSS modules support #1248
- Pass
relative_url_root
to webpacker config #1236
- 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
orprepend
// config/webpack/environment.js
const { environment } = require('@rails/webpacker')
environment.loaders.append('json', {
test: /\.json$/,
use: 'json-loader'
})
- Stimulus example https://stimulusjs.org/
bundle exec rails webpacker:install:stimulus
- Upgrade gems and npm packages #1254
And, bunch of bug fixes See changes
-
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
bundle update webpacker
yarn upgrade @rails/webpacker
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
https://github.com/rails/webpacker/tree/master/lib/install/loaders
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
:
plugins:
postcss-import: {}
postcss-cssnext: {}
-
Upgrade gems and webpack dependencies
-
postcss-import
in place ofpostcss-smart-import
-
postcss-smart-import
,coffee-loader
,url-loader
,rails-erb-loader
as dependencies -
publicPath
from file loader #1107
- Return native array type for
ConfigList
#1098
-
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
- Include default webpacker.yml config inside npm package
- Expose base config from environment
environment.config.set('resolve.extensions', ['.foo', '.bar'])
environment.config.set('output.filename', '[name].js')
environment.config.delete('output.chunkFilename')
environment.config.get('resolve')
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
andcss
loader -
Separate
css
andsass
loader for easier configuration.style
loader is nowcss
loader, which resolves.css
files andsass
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
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: /node_modules/
pretty
option to disable/enable color and progress output when running dev server
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
- Allow skipping webpacker compile using an env variable
WEBPACKER_PRECOMPILE=no|false|n|f
WEBPACKER_PRECOMPILE=false bundle exec rails assets:precompile
-
Use
WEBPACKER_ASSET_HOST
instead ofASSET_HOST
for CDN -
Alias
webpacker:compile
task toassets:precompile
if is not defined so it works without sprockets
- 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 returnnil
Webpacker.manifest.lookup('foo.js')
# => nil
Webpacker.manifest.lookup!('foo.js')
# => 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 [email protected]
# OR coffeescript 2.0
yarn add coffeescript
-
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 in404
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 0.0.0.0 --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 fromconfig/webpack/development.js
since this is now fixed.
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?
andWebpacker::Compiler.stale?
answer the question of whether compilation is needed. The oldWebpacker::Compiler.compile?
predicate is deprecated. -
Dev server config class that exposes config options through singleton.
Webpacker.dev_server.running?
-
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 onWebpacker::Compiler
allows setting custom environment variables that the compilation is being run withWebpacker::Compiler.env['FRONTEND_API_KEY'] = 'your_secret_key'
Note: requires running bundle exec rails webpacker:install
config/webpack/**/*.js
:
- The majority of this config moved to the @rails/webpacker npm package.
webpacker:install
only createsconfig/webpack/{environment,development,test,production}.js
now so if you're upgrading from a previous version you can remove all other files.
webpacker.yml
:
-
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
webpack-dev-server.tt
to respect RAILS_ENV and NODE_ENV values #502 - Use
0.0.0.0
as default listen address forwebpack-dev-server
- Serve assets using
localhost
from dev server - #424
dev_server:
host: localhost
- On Windows,
ruby bin/webpacker
andruby bin/webpacker-dev-server
will now bypass yarn, and execute vianode_modules/.bin
directly - #584
-
Add
compile
andcache_path
options toconfig/webpacker.yml
for configuring lazy compilation of packs when a file under tracked paths is changed #503. To enable expected behavior, updateconfig/webpacker.yml
:default: &default cache_path: tmp/cache/webpacker test: compile: true development: compile: true production: 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'
-
Update
.babelrc
to fix compilation issues - #306 -
Missing asset host when defined as a
Proc
or onActionController::Base.asset_host
directly - #397 -
Incorrect asset host when running
webpacker:compile
orbin/webpack
in development mode - #397 -
Update
webpacker:compile
task to usestdout
andstderr
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
- New app:
-
Support for custom
public_output_path
paths independent ofsource_entry_path
inconfig/webpacker.yml
.output
is also now relative topublic/
. - #397Before (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 usehttps
mode, particularly on platforms like - https://community.c9.io/t/running-a-rails-app/1615 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": [
"syntax-dynamic-import",
"transform-class-properties",
{ "spec": true }
]
}
- Source-map support for production bundle
-
Consolidate and flatten
paths.yml
anddevelopment.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./public/packs +/public/packs-test /node_modules
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:
app/javascript/packs/admin/hello_vue.js app/javascript/packs/admin/hello.vue app/javascript/packs/hello_vue.js app/javascript/packs/hello.vue
-
Add tree-shaking support - #250
-
Add initial test case by @kimquy #259
-
Compile assets before test:controllers and test:system
- Webpack watcher - #295
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]
config.x.webpacker[:digesting] = true