Create upgrade-v4.md

[justin808]

No description provided.

[danielpowell4]

With pre3 it'd also likely be helpful to note the changes to .postcssrc.yml
Held me up for a bit this PM

- postcss-cssnext: {}
+ postcss-preset-env: {}

[justin808]

@danielpowell4 I added:

1. Merge changes from the new default postcssrc.ym. Specifically, rename postcss-cssnext to postcss-preset-env.

[justin808]

@gauravtiwari does this matter it's not passing CI if it's only a MD file?

[justin808]

@gauravtiwari what do you need to get this merged?

[palkan]

Just upgraded this week, so I'd like to add to this guide a few more things)

I wish I had upgrade notes before I started to doing the upgrade, this guide could be very helpful.

Maybe, I configuration a bit specific, but these are the two main breaking changes we had.

babel

Most plugins have new names (that was the most painful part of the upgrade – figure out which plugins to rename and what are the new names).

Our changelog:

• env -> @babel/env
• react -> @babel/react
• transform-object-rest-spread -> @babel/plugin-proposal-object-rest-spread
• transform-runtime -> @babel/transform-runtime
• syntax-dynamic-import -> @babel/plugin-syntax-dynamic-import
• transform-class-properties -> @babel/plugin-proposal-class-properties

chunks

CommonsChunks plugin is deprecated (here is a helpful gist https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693).

We had:

environment.plugins.append(		
  'CommonsChunk',		
   new CommonsChunkPlugin({		
      name: 'something-vendor',
      chunks: [''something'],
      minChunks(module) {		
        return module.context && module.context.includes('node_modules');		
      },		
  }),
);

Now we have:

environment.config.optimization.splitChunks = {
    cacheGroups: {
      vendor: {
        name: 'something-vendor',
        chunks: chunk => chunk.name === something',
        reuseExistingChunk: true,
        priority: 1,
        test: /[\\/]node_modules[\\/]/,
        minChunks: 1,
        minSize: 0,
      },
    },
  };

[agis]

Shouldn't this be merged before 4.0.0 is out?

[danielpowell4]

@agis As far as I can tell, the write up provided by @justin808 is no longer 💯.

#1822 migrates babelrc and postcssrc to js so the listed copy and replace strategy doesn't get you to a fresh feeling use case

@gauravtiwari have you thought about a how-to-upgrade post when 4 is all the way ready? Seems like it is getting close! If so, what is the timeline? Aiming to release with Rails 6 or as-ready?

[arkhamRejek]

Any news on when v4.0.0 will be released @gauravtiwari

[connorshea]

If someone can put together a guide with whatever's currently missing from this one, I have a Rails app I can use to verify that the upgrade works.

Also, shouldn't the upgrade guide include a link to the webpack changelog for 4.0?

[gauravtiwari]

@justin808 Sorry for the late response. Please update the pr and I will merge 👍

[connorshea]

@gauravtiwari I've made #1905 with some more current upgrade notes.

Thank you for the base I worked from @justin808! I hope this is okay with you 🙇