Webpacker is Rails' way of integrating Webpack, and version 4 has been released just a few days ago, allowing us to use Webpack 4.
I successfully upgraded an existing real-world Webpack 3 application. Below are notes on everything that I encountered.
Note that we prefer not using the Rails asset pipeline at all and serving all assets through Webpack for the sake of consistency.
bundle update webpackerand
Work through the
npx babel-upgrade --writewhich will download and run to auto-fix some config files (including some you may not need)
.browserslistrcin your project's root directory
extract_css: trueto the
defaultsection make sure CSS files are still built by Webpacker.
babel.config.js. I suggest you take the and compare it with your
.babelrcplugins list and add missing ones. You may remove the environment switches in
babel.config.jsand function wrapper.
postcss.config.js. Use the and add any missing plugins.
node_modules. Apparently this could fix some issues but also cause others. Webpack 3 did not do that and if everything was fine before, maybe just by adding
postcss-cssnextbefore, add it to your
package.json(it's no longer provided by default).
'postcss-cssnext' has been deprecated in favor of 'postcss-preset-env'.
Read more at
Read through the
uglifyOptions.ecma = 5, remove that line from your pack's
.browserslistrcshould define the required ECMAScript level implicitly.
import 'babel-polyfill'before. You now need to say this to avoid build errors like
Module not found: Error: Can't resolve 'babel-polyfill'(see ):
import "core-js/shim"; // included < Stage 4 proposals import "regenerator-runtime/runtime";
babel-upgradeshould have changed package names for you, and the default files also use Babel 7's package names.
Webpack 4 also namespaces files compiled files inside a pack
jsand images inside
<webpack-root>/your-pack-name/images(which was possible with Webpack 3) note that you can no longer do that because Webpacker's view helpers won't be able to locate files.
requirestatements need to be adjusted accordingly.
<webpack-root>/your-pack-name/index.jsand move everything into the pack manifest at
resolve_path_to_image. See .
bin/webpack-dev-serverto see if Webpack compiles properly.
rails serverand check if your application responds and everything looks okay.