There are several substantial changes in Webpacker 6 that you need to manually account for when coming from Webpacker 5. This guide will help you through it.
By default, Webpacker 6 is focused on compiling and bundling JavaScript. This pairs with the existing asset pipeline in Rails that's setup to transpile CSS and static images using Sprockets. For most developers, that's the recommended combination. But if you'd like to use Webpacker for CSS and static assets as well, please see integrations for more information.
Webpacker used to configure Webpack indirectly, which lead to a complicated secondary configuration process. This was done in order to provide default configurations for the most popular frameworks, but ended up creating more complexity than it cured. So now Webpacker delegates all configuration directly to Webpack's default configuration setup.
This means you have to configure integration with frameworks yourself, but webpack-merge helps with this. See this example for Vue.
- Move your
app/javascript/packs/application.js
toapp/javascript/application.js
- Rename
config/webpack
toconfig/webpack_old
- Rename
config/webpacker.yml
toconfig/webpacker_old.yml
- Uninstall the current version of
webpack-dev-server
:yarn remove webpack-dev-server
- Remove .browserslistrc from the root of your Rails app
- Upgrade the Webpacker Ruby gem and NPM package
Note: Check the releases page to verify the latest version, and make sure to install identical version numbers of webpacker gem and @rails/webpacker
npm package. (Gems use a period and packages use a dot between the main version number and the beta version.)
Example going to a specific version:
# Gemfile
gem 'webpacker', '6.0.0.rc.5'
bundle install
yarn add @rails/[email protected] --exact
bundle exec rails webpacker:install
- Update API usage of the view helpers by changing
javascript_packs_with_chunks_tag
andstylesheet_packs_with_chunks_tag
tojavascript_pack_tag
andstylesheet_pack_tag
. Ensure that your layouts and views will only have at most one call tojavascript_pack_tag
orstylesheet_pack_tag
. You can now pass multiple bundles to these view helper methods. If you fail to changes this, you may experience performance issues, and other bugs related to multiple copies of React, like issue 2932. If you expose jquery globally withexpose-loader,
by usingimport $ from "expose-loader?exposes=$,jQuery!jquery"
in yourapp/javascript/application.js
, pass the optiondefer: false
to yourjavascript_pack_tag
. - If you are using any integrations like
css
,React
orTypeScript
. Please see https://github.com/rails/webpacker#integrations section on how they work in v6. - Copy over any custom webpack config from
config/webpack_old
. Common code previously called 'environment' should be changed to 'base', and importenvironment
changed towebpackConfig
.
// config/webpack/base.js
const { webpackConfig, merge } = require('@rails/webpacker')
const customConfig = require('./custom')
module.exports = merge(webpackConfig, customConfig)
-
Copy over custom browserlist config from
.browserslistrc
if it exists into the"browserslist"
key inpackage.json
and remove.browserslistrc
. -
Remove
babel.config.js
if you never changed it. Be sure to have this config in yourpackage.json
:
"babel": {
"presets": [
"./node_modules/@rails/webpacker/package/babel/preset.js"
]
}
- Remove
postcss.config.js
if you don't usePostCSS
. extensions
was removed from thewebpacker.yml
file. Move custom extensions to your configuration by merging an object like this. For more details, see docs for Webpack Configuration
{
resolve: {
extensions: ['.ts', '.tsx', '.vue', '.css']
}
}