Compatibility with Webpack 5 (#2802)

Author: gauravtiwari

.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: 'airbnb',
+  extends: ['airbnb', 'prettier'],
   rules: {
     'comma-dangle': ['error', 'never'],
     'import/no-unresolved': 'off',

.gitignore

@@ -10,3 +10,4 @@ yarn-error.log*
 .yarn-integrity
 /log
 gemfiles/*.lock
+.DS_Store

.node-version

@@ -1 +1 @@
-10.17.0
+10.22.1

docs/css.md

@@ -1,6 +1,5 @@
 # CSS, Sass and SCSS
 
-
 Webpacker supports importing CSS, Sass and SCSS files directly into your JavaScript files.
 
 Importing and loading styles is a two step process:
@@ -15,7 +14,6 @@ Importing and loading styles is a two step process:
 
    When you do `<%= stylesheet_pack_tag 'application' %>`, that's a run-time inclusion from Rails, where Rails gets the correct "asset path" to that file from webpack.
 
-
 ## Import global styles into your JS app
 
 ### Importing CSS as a multi-file pack (Webpacker v5)
@@ -60,7 +58,6 @@ Given your application installs an NPM package that provides CSS, such as `flatp
 @import "flatpickr/dist/flatpickr.css"
 ```
 
-
 ### Importing CSS from JS
 
 ```sass
@@ -79,9 +76,9 @@ import React from 'react'
 import helloIcon from '../hello_react/images/icon.png'
 import '../hello_react/styles/hello-react'
 
-const Hello = props => (
-  <div className="hello-react">
-    <img src={helloIcon} alt="hello-icon" />
+const Hello = (props) => (
+  <div className='hello-react'>
+    <img src={helloIcon} alt='hello-icon' />
     <p>Hello {props.name}!</p>
   </div>
 )
@@ -94,7 +91,7 @@ Given your application installs an NPM package that provides CSS, such as `flatp
 ```js
 // app/javascript/packs/application.js
 
-import "flatpickr/dist/flatpickr.css"
+import 'flatpickr/dist/flatpickr.css'
 ```
 
 ## Import scoped styles into your JS app
@@ -117,9 +114,9 @@ import React from 'react'
 import helloIcon from '../hello_react/images/icon.png'
 import styles from '../hello_react/styles/hello-react'
 
-const Hello = props => (
+const Hello = (props) => (
   <div className={styles.helloReact}>
-    <img src={helloIcon} alt="hello-icon" />
+    <img src={helloIcon} alt='hello-icon' />
     <p>Hello {props.name}!</p>
   </div>
 )
@@ -142,7 +139,7 @@ Using CSS modules with a TypeScript application requires a few differences from
 There must also be a type definition file for these styles:
 
 ```typescript
-export const helloReact: string;
+export const helloReact: string
 ```
 
 You can then import the styles like this:
@@ -155,9 +152,9 @@ import React from 'react'
 import helloIcon from '../hello_react/images/icon.png'
 import * as styles from '../hello_react/styles/hello-react.module.sass'
 
-const Hello = props => (
+const Hello = (props) => (
   <div className={styles.helloReact}>
-    <img src={helloIcon} alt="hello-icon" />
+    <img src={helloIcon} alt='hello-icon' />
     <p>Hello {props.name}!</p>
   </div>
 )
@@ -180,7 +177,6 @@ Then by adding these lines to your `package.json`:
 
 You can generate the typings for the stylesheet by running the command `yarn gen-typings` when you've finished writing CSS, or run `yarn watch-typings` to have it automatically generate them as you go.
 
-
 ## Link styles from your Rails views
 
 Under the hood webpack uses
@@ -192,8 +188,6 @@ a separate `[pack_name].css` bundle so that in your view you can use the
 <%= stylesheet_pack_tag 'hello_react' %>
 ```
 
-Webpacker emits css files only if `extract_css` is set to true in webpacker.yml otherwise `stylesheet_pack_tag` returns nil.
-
 ## Add bootstrap
 
 You can use Yarn to add bootstrap or any other modules available on npm:
@@ -218,7 +212,6 @@ Or in your app/javascript/packs/application.sass file:
 @import '~bootstrap/dist/css/bootstrap-theme'
 ```
 
-
 ## Post-Processing CSS
 
 Webpacker out-of-the-box provides CSS post-processing using
@@ -244,8 +237,8 @@ module.exports = {
 ## Using CSS with [vue-loader](https://github.com/vuejs/vue-loader)
 
 Vue templates require loading the stylesheet in your application in
-order for CSS to work.  This is in addition to loading the JavaScript
-file for the entry point.  Loading the stylesheet will also load the
+order for CSS to work. This is in addition to loading the JavaScript
+file for the entry point. Loading the stylesheet will also load the
 CSS for any nested components.
 
 ```erb
@@ -257,7 +250,6 @@ CSS for any nested components.
 
 Since `Sass/libsass` does not provide url rewriting, all linked assets must be relative to the output. Add the missing url rewriting using the resolve-url-loader. Place it directly after the sass-loader in the loader chain.
 
-
 ```bash
 yarn add resolve-url-loader
 ```
@@ -269,7 +261,7 @@ const { environment } = require('@rails/webpacker')
 // resolve-url-loader must be used before sass-loader
 environment.loaders.get('sass').use.splice(-1, 0, {
   loader: 'resolve-url-loader'
-});
+})
 
 module.exports = environment
 ```
@@ -280,13 +272,14 @@ In order to get CSS to work with typescript you have two options.
 You can either use `require` to bypass typescript special `import`.
 
 ```ts
-const styles = require('../hello_react/styles/hello-react');
+const styles = require('../hello_react/styles/hello-react')
 ```
+
 You may also use the package [typings-for-css-modules-loader](https://github.com/Jimdo/typings-for-css-modules-loader) instead of `css-loader` to automatically generate typescript `.d.ts` files in order to help resolve any css/scss styles. To do that:
 
 ```js
 // app/javascript/packs/hello_react.jsx
-import * as styles from '../hello_react.styles/hello-react.module.scss';
+import * as styles from '../hello_react.styles/hello-react.module.scss'
 ```
 
 ```bash
@@ -298,11 +291,13 @@ yarn add --dev typings-for-css-modules-loader
 const { environment } = require('@rails/webpacker')
 
 // replace css-loader with typings-for-css-modules-loader
-environment.loaders.get('moduleSass').use = environment.loaders.get('moduleSass').use.map((u) => {
-  if(u.loader == 'css-loader') {
-    return { ...u, loader: 'typings-for-css-modules-loader' };
-  } else {
-    return u;
-  }
-});
+environment.loaders.get('moduleSass').use = environment.loaders
+  .get('moduleSass')
+  .use.map((u) => {
+    if (u.loader == 'css-loader') {
+      return { ...u, loader: 'typings-for-css-modules-loader' }
+    } else {
+      return u
+    }
+  })
 ```

docs/webpack-dev-server.md

@@ -1,6 +1,5 @@
 # webpack-dev-server
 
-
 ## HTTPS
 
 If you're using the `webpack-dev-server` in development, you can serve your packs over HTTPS
@@ -13,23 +12,21 @@ so your web browser will display a warning/exception upon accessing the page. If
 in your console, simply open the link in your browser and accept the SSL exception.
 Now if you refresh your Rails view everything should work as expected.
 
-
 ## Hot Module Replacement
 
 Webpacker out-of-the-box supports HMR with `webpack-dev-server` and
 you can toggle it by setting options in `config/webpacker.yml`:
 
 ```yaml
 development:
-  # ...
-  extract_css: false
   # ...
   dev_server:
     # ...
     hmr: true
     inline: true
     # ...
 ```
+
 `dev_server/hmr` option inside `webpacker.yml`.
 
 Check out this guide for more information:
@@ -83,9 +80,8 @@ server {
 ## Customizing Logging
 
 By default, the dev server will display a colored progress notification while
-your code is being compiled.  (Under the hood, we are using `webpack-dev-server
---progress --color`).  However, this might cause issues if you don't use
-`foreman` and/or try to log webpack-dev-server's output to a file.  You can
+your code is being compiled. (Under the hood, we are using `webpack-dev-server --progress --color`). However, this might cause issues if you don't use
+`foreman` and/or try to log webpack-dev-server's output to a file. You can
 disable this stylized output by adding `pretty: false` to your `dev_server`
 config:
 

lib/install/angular.rb

@@ -0,0 +1,3 @@
+const { webpackConfig } = require('@rails/webpacker')
+
+module.exports = webpackConfig

lib/install/coffee.rb

@@ -1,5 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-const environment = require('./environment')
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig()
+module.exports = webpackConfig

lib/install/config/postcss.config.js

@@ -1,5 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'production'
 
-const environment = require('./environment')
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig()
+module.exports = webpackConfig

lib/install/config/webpack/base.js

@@ -1,5 +1,5 @@
 process.env.NODE_ENV = process.env.NODE_ENV || 'development'
 
-const environment = require('./environment')
+const webpackConfig = require('./base')
 
-module.exports = environment.toWebpackConfig()
+module.exports = webpackConfig

lib/install/config/webpack/development.js

@@ -15,45 +15,10 @@ default: &default
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
 
-  # Extract and emit a css file
-  extract_css: true
-
-  static_assets_extensions:
-    - .jpg
-    - .jpeg
-    - .png
-    - .gif
-    - .tiff
-    - .ico
-    - .svg
-    - .eot
-    - .otf
-    - .ttf
-    - .woff
-    - .woff2
-
-  extensions:
-    - .mjs
-    - .js
-    - .sass
-    - .scss
-    - .css
-    - .module.sass
-    - .module.scss
-    - .module.css
-    - .png
-    - .svg
-    - .gif
-    - .jpeg
-    - .jpg
-
 development:
   <<: *default
   compile: true
 
-  # Set to false if using HMR for CSS
-  extract_css: true
-
   # Reference: https://webpack.js.org/configuration/dev-server/
   dev_server:
     https: false
@@ -81,7 +46,6 @@ development:
     watch_options:
       ignored: '**/node_modules/**'
 
-
 test:
   <<: *default
   compile: true