Stable webpacker 4.0 release

[gauravtiwari]

This PR is final PR to finish up some remaining bits and release Webpacker 4.x.

Apologies it took us a while but looks like Webpacker is now in a great shape. Thanks, everyone for chipping in and making things better.

Things I would like to finish and ship:

• [ ] Integrity hashes for assets - Subresource Integrity #323 (Not done)
• New split chunks API
• New file loader option for adding static extensions
• Basic node modules compilation apart from app code
• CDN support - Use CDN for chunks as well #1084 Perhaps someone can help with this one?
• Engines support - there are two pending PRs Refactor singleton usage #1808 and Resolve errors blocking usage in a mountable Rails engine #1694

Update: Will look into integrity hashes in other PR or perhaps after 4.0 release including engines support.

[gauravtiwari]

Please feel free to link other issues you might think are important and we can work together to either ship them in the initial 4.x release or subsequent 4.x releases.

[gauravtiwari]

Is someone up for helping with docs i.e. if we need to improve or update? Feel free to make PRs

[gauravtiwari]

Also, need to make a list of features that are new/improved in Webpacker 4.0

[gauravtiwari]

Please expect the final release to be made by end of this week (once this PR is merged).

[ytbryan]

You will need yarn add postcss-flexbugs-fixes babel-plugin-macros to have an error free webpack-dev-server

3rd party webpacker libraries should note that #1822 is a breaking change.

[gauravtiwari]

@ytbryan Both included with webpacker and works out of the box: https://github.com/rails/webpacker/blob/master/package.json#L27

[jakeNiemiec]

resetEnv like this might give you more problems than you would expect. I would do:

beforeEach(() => {
  jest.resetModules()
  process.env = {}
  // OR
  // delete process.env.RAILS_ENV
})

[jakeNiemiec]

https://travis-ci.org/rails/webpacker/jobs/465694990#L703 CI is pointing out that you are returning the value of the assignment. I would omit this altogether.

[yvbeek]

Thank you for all the great work and bringing webpack to rails.

Would it perhaps be a good default to rename app/javascripts to app/frontend? With all the styles, images and other resources it could be a bit easier to understand for new users.

I like the customizability of this framework but it is sometimes confusing which config to modify and where to inject, what, to make webpack behave a certain way.

Perhaps we could add a few predefined functions that you can import in the <environment>.js files to set-up common things like TypeScript / Sass loaders, Uglify options, Common chunks etc.

[pdfrod]

Would it perhaps be a good default to rename app/javascripts to app/frontend? With all the styles, images and other resources it could be a bit easier to understand for new users.

This is precisely what I did on the project I'm working on - I got rid of app/javascripts and created an app/frontend folder. It didn't make sense to me still call it javascripts since it's becoming our go-to folder for all of our front-end assets (JavaScripts, CSS, images, etc...).

[yvbeek]

I can also recommend the following webpack dev server settings:

config/webpack/environment.js

const { environment } = require('@rails/webpacker')

// Reduce the output of the Webpack Dev Server
environment.config.merge({
  devServer: {
    stats: {
      entrypoints: false,
      errorDetails: false,
      modules: false,
      moduleTrace: false
    }
  }
});

module.exports = environment

Perhaps a good default? It reduces the output of webpack dev server to just the pack statistics (names, filesizes etc.).

[Morantron]

regexp should be changed slightly

Suggested change

	test: new RegExp(fileExtensions.join('|'), 'i'),
	test: new RegExp(`\\.(${fileExtensions.join('|')})$`, 'i'),

[gauravtiwari]

@Morantron Not sure if we need dot there since extensions already include them?

/.jpg|.jpeg|.png|.gif|.tiff|.ico|.svg|.eot|.otf|.ttf|.woff|.woff2/i

[gauravtiwari]

Changed it to this:

new RegExp(`(${fileExtensions.join('|')})`, 'i') => 
/(.jpg|.jpeg|.png|.gif|.tiff|.ico|.svg|.eot|.otf|.ttf|.woff|.woff2)/i

[Morantron]

True! It's missing the trailing dollar, It could be an issue since without it it can match the extension in the middle of the filename

[gauravtiwari]

Gotcha thanks @Morantron 🙏

[gauravtiwari]

Fixed in #1832

[nickpith]

@gauravtiwari I get the impression that this v4 release is getting held up so that things are in place for Rails 6 to make Webpacker the default asset pipeline. Is that correct?

That said, webpacker's lack of webpack v4 and babel v7 support is causing issues with us upgrading other dependencies that our applications use on the JS side like Storybook. It seems like the v4 release has been a long time in the release candidate state. It's ok if it will take some time to get things ready for Rails 6. I totally understand but is there a middle ground where consumers of Webpacker can utilize a stable version with webpack v4 and babel v7 support sooner rather than later?

[jakeNiemiec]

@nickpith I think that was already merged into master rails/rails#33079 (rails/rails@4838c17#diff-e79a60dc6b85309ae70a6ea8261eaf95R37)

[gauravtiwari]

Published a release candidate, please give it a try and if no issues found, will make a final release this weekend.

[nickpith]

Thanks @gauravtiwari!

[yvbeek]

I've added pull requests for:

Rename of app/javascript to app/frontend: #1833 (see comment)
Reduced webpack-dev-server output: #1834 (see comment)

[gauravtiwari]

Made another release, which fixes a bug (#1835), thanks @Zyphrax for testing and reporting 🙏

[yvbeek]

Thanks @gauravtiwari, the bug has been fixed. Unfortunately the cacheGroups configuration seems to result in duplicate javascript imports in the final HTML. See #1835 for details.