React

workflows

Without Create-React-App

Second Edition

Created by Maria D. Campbell / @letsbsocial1

About This Presentation

This is the second edition of my React Workflows Without CRA. If you want to acquaint yourself with the first edition as well, please visit the React Workflow Presentation repository. For a detailed map of this edition, please visit the README of this edition's repository. To view the source code of this workflow, please visit the speech-to-text-app repository.

Hi There!

I'm Maria.

About Me

I've always been obsessed with development and construction in one way or another.

Background

Fashion design and manufacture.
Graphics/production art.
Now Fullstack JS, with a focus on React.

?

So why am I here today to discuss React workflows?

Simple.

When I started learning React, I was not happy with the fact that virtually all React learning seemed to revolve around using create-react-app to create React applications.

And that meant blindly accepting its extensive boiler-plate.

Why blindly ? Because the workflow is hidden by default. In order to see what is going on, you have to eject out of CRA.

But once you eject, THERE IS NO GOING BACK!

And one thing I know for sure ...

Starting Over

Sometimes it's faster (and easier) to start from scratch than try to manipulate to your needs.

And that's where

webpack

(4 and beyond) come in.

?

So why webpack ?

If done from scratch, it can mean fewer workflow files and lines of code. If you come from task runners like Gulp (I do) or Grunt, you know what I'm talking about.

And if you are familiar with CRA, you know how extensive its boilerplate is.

Nothing wrong with that

if your focus is on writing JSX and JS for the browser.

The Problem

with that approach is that when developers start heavily relying on tools like that, they can lose site of the bigger picture.

Of how things work.
Why they work as they do.
What their options are.

Which can STUNT one's growth as a developer.

🐜

I first got the bug to create my own custom React workflows when I created my first React application using CRA.

Debugging Difficulties

I would get errors in my React projects which I sometimes found difficult to debug. They might or might not have been CRA related.

Custom React Workflows

So I decided to start creating my own React workflows using webpack.

What This React Workflow Supports

Eslint Configuration for React
Jest Testing
Bundle Splitting using the SplitChunksPlugin
Code Splitting using the SplitChunksPlugin and dynamic imports
CSS Modules
.SCSS
Image/File Import

What This React Workflow Uses

React 16.6.3
Webpack 4.3.0
Babel 7
ESLint 5.9.0
Jest 23.6.0

package.json


                {
                    "name": "speech-to-text-app",
                    "version": "0.0.1",
                    "private": true,
                    "description": "\"A voice controlled notes app that allows you to take notes by recording your voice\"",
                    "main": "index.js",
                    "scripts": {
                        "test": "jest",
                        "lint": "eslint .",
                        "clean": "rimraf dist",
                        "cleanSrc": "rimraf dist/src",
                        "start": "webpack-dev-server --mode development --config config/webpack.base.config.js --open --hot
                        --history-api-fallback --env.PLATFORM=local --env.VERSION=stag",
                        "predeploy": "webpack --mode production --config config/webpack.prod.config.js --env.PLATFORM=production
                        --env.VERSION=stag --progress",
                        "deploy": "gh-pages -d dist"
                    },
                    "jest": {
                        "setupFiles": [
                            "raf/polyfill"
                        ],
                        "moduleNameMapper": {
                            "\\.(pdf|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js",
                            "\\.(css|less|scss)$": "identity-obj-proxy"
                        }
                    },
                    "author": "Maria D. Campbell",
                    "license": "ISC",
                    "dependencies": {
                        "@fortawesome/fontawesome-svg-core": "^1.2.8",
                        "@fortawesome/free-brands-svg-icons": "^5.5.0",
                        "@fortawesome/free-regular-svg-icons": "^5.5.0",
                        "@fortawesome/free-solid-svg-icons": "^5.5.0",
                        "@fortawesome/react-fontawesome": "^0.1.3",
                        "core-js": "^2.5.7",
                        "gh-pages": "^2.0.1",
                        "react": "^16.6.3",
                        "react-dom": "^16.6.3"
                    },
                    "devDependencies": {
                        "@babel/core": "^7.1.6",
                        "@babel/plugin-proposal-class-properties": "^7.1.0",
                        "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
                        "@babel/plugin-proposal-throw-expressions": "^7.0.0",
                        "@babel/plugin-syntax-dynamic-import": "^7.0.0",
                        "@babel/polyfill": "^7.0.0",
                        "@babel/preset-env": "^7.1.5",
                        "@babel/preset-react": "^7.0.0",
                        "@babel/register": "^7.0.0",
                        "autoprefixer": "^9.3.1",
                        "babel-core": "^7.0.0-bridge.0",
                        "babel-eslint": "^10.0.1",
                        "babel-jest": "^23.6.0",
                        "babel-loader": "^8.0.4",
                        "clean-webpack-plugin": "^1.0.0",
                        "copy-webpack-plugin": "^4.6.0",
                        "css-loader": "^1.0.1",
                        "enzyme": "^3.7.0",
                        "eslint": "^5.9.0",
                        "eslint-config-airbnb": "^17.1.0",
                        "eslint-loader": "^2.1.1",
                        "eslint-plugin-import": "^2.14.0",
                        "eslint-plugin-jsx-a11y": "^6.1.2",
                        "eslint-plugin-react": "^7.11.1",
                        "file-loader": "^2.0.0",
                        "html-webpack-plugin": "^3.2.0",
                        "identity-obj-proxy": "^3.0.0",
                        "jest": "^23.6.0",
                        "jest-enzyme": "^7.0.1",
                        "mini-css-extract-plugin": "^0.4.4",
                        "node-sass": "^4.10.0",
                        "optimize-css-assets-webpack-plugin": "^5.0.1",
                        "postcss": "^7.0.5",
                        "postcss-loader": "^3.0.0",
                        "prop-types": "^15.6.2",
                        "raf": "^3.4.1",
                        "react-test-renderer": "^16.6.1",
                        "regenerator-runtime": "^0.12.1",
                        "rimraf": "^2.6.2",
                        "sass-loader": "^7.1.0",
                        "style-loader": "^0.23.1",
                        "uglifyjs-webpack-plugin": "^2.0.1",
                        "url-loader": "^1.1.2",
                        "webpack": "^4.3.0",
                        "webpack-cli": "^3.1.2",
                        "webpack-dev-server": "^3.1.10",
                        "webpack-manifest-plugin": "^2.0.4",
                        "webpack-merge": "^4.1.4",
                        "webpack-visualizer-plugin": "^0.1.11"
                    }
                }

Please ignore the closing rootdir tag at the bottom of the package.json.

What Has Not Changed (Jest)


                "jest": {
                    "setupFiles": [
                        "raf/polyfill"
                    ],

React 16+ depends on requestAnimationFrame, even in test environments. First install the raf npm package, and then add this to your package.json. This was the same in my previous workflow.

What Has Changed (Jest)


                "moduleNameMapper": {
                    "\\.(pdf|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js",
                    "\\.(css|less|scss)$": "identity-obj-proxy"
                }

Even though all that has changed here is adding |scss to identity-obj-proxy, so much else changed that resulted in the need to add this to the moduleNameMapper property. Again, please ignore the closing rootdir tag.

What Has Not Changed (Jest devDeps)


                "babel-jest": "^23.6.0",
                "enzyme": "^3.7.0",
                "identity-obj-proxy": "^3.0.0",
                "jest": "^23.6.0",
                "jest-enzyme": "^7.0.1",
                "raf",
                "react-test-renderer": "^16.6.1",
                "regenerator-runtime": "^0.12.1",

What Has Changed (Jest DevDeps)


                "@babel/core": "^7.1.6",
                "babel-core": "^7.0.0-bridge.0",

These packages, along with babel-jest and regenerator-runtime are what is needed now in order to be able to use Jest with Babel 7. To learn more about using Babel with Jest, please visit Using Babel.

Configuring Babel 7

everything changed

Configuring Babel 7

.babelrc


                {
                    "presets": ["env", "react", "stage-1", "stage-2", "jest"]
                }

Previously, the babel config looked something like this.

Configuring Babel 7

.babelrc


                {
                    "presets": [
                        "@babel/preset-env",
                        "@babel/preset-react"
                    ],
                    "plugins": [
                        "@babel/plugin-syntax-dynamic-import",
                        "@babel/plugin-proposal-class-properties",
                        "@babel/plugin-proposal-export-namespace-from",
                        "@babel/plugin-proposal-throw-expressions"
                    ]
                }

Now, the babel config looks something like this.

Babel < 7 Presets

Before Babel 7, proposal plugins were clumped together within their appropriate presets. i.e., stage-0, stage-1, stage-2, etc.

Babel 7 Presets

.babelrc


                    "presets": [
                        "@babel/preset-env",
                        "@babel/preset-react"
                    ],

With Babel 7, presets were removed from the webpack config and only appear in the .babelrc file. Only presets which were actually approved appeared in the presets array.

Babel 7 Presets


                    "@babel/preset-env"

"@babel/preset-env" is the Babel preset which allows you to use the latest JS.

Babel 7 Presets


                    "@babel/preset-react"

"@babel/preset-react" is the Babel preset which allows you to use React code.

Babel 7 Presets

naming

The naming of presets changed with Babel 7 to differentiate between the versions and maintain naming consistency throughout. Instead of simply adding "env" or "react" to the preset array, you now have to add "@babel/preset-env" or "@babel/preset-react", for example.

Babel 7 Plugins

the whys


                    "@babel/plugin-proposal-class-properties": "^7.1.0",

Transforms ES6 class syntax into ES5 constructor functions. But the class syntax feature has not yet been approved, so it is still called a proposal. With Babel 7, we must add the equivalent Babel plugin for each modern JS feature we want to implement in our applications. That's because there are no longer stage presets in Babel 7.

Babel 7 Plugins

the whys


                    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",

ES6 modules allow us to import something from something else:


                    import * as name from "module-name";

Babel 7 Plugins

the whys


                    "@babel/plugin-proposal-export-namespace-from"

However, there was no corresponding export!

Babel 7 Plugins

the whys contd


                    "@babel/plugin-proposal-export-namespace-from"

plugin proposal: export namespace from


                    export * as ns from "mod";

Babel 7 Plugins

the whys contd


                    "@babel/plugin-proposal-throw-expressions": "^7.0.0",

example:


                    function test(param = throw new Error('required!')) {
                        const test = param === true || throw new Error('Falsey!');
                    }

Babel 7 Plugins

the whys contd


                    "@babel/plugin-syntax-dynamic-import": "^7.0.0",

import() returns a promise, so it can be used with async functions. However, doing this requires the "@babel/plugin-syntax-dynamic-import" plugin in Webpack.

Configuring Babel 7

config/webpack.base.config.js


                rules: [{
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader'
                    }
                },

Now .JS$ rules looks like this. No more presets. Only in .babelrc. In addition, I changed the name of the webpack config file. I will talk about that later.

JS$ test property


            	test: /\.js$/,

The test property tells webpack what kind of file to match to the babel-loader. The regex /\.js$/ refers to any extension that matches .js at the end of a filename.

Exclude Property


                exclude: /node_modules/,

The exclude property means that whatever modules match the /node_modules/ regex should be excluded from bundle.js.

JS$ use property


                use: {
                    loader: 'babel-loader',
                },

Then it uses that loader to transform those files before adding it to bundle.js.

Babel 7 Packages

the whys


                @babel/core

This is the Babel core compiler. It makes it possible to use babel-loader. Most babel plugins/top level packages have a peerDependency on @babel/core. Previously it had been babel-core. It is also needed for Jest. To learn more about peerDependencies, click here.

Babel 7 Packages

the whys


                "babel-core": "^7.0.0-bridge.0"

This package is needed for Jest testing if Babel 7 is being used. This package is meant to ease the transition libraries that use "babel-core" as a peerDependency for Babel 6. To learn more, please visit the babel-bridge repo .

Babel 7 Packages

the whys


                "@babel/polyfill": "^7.0.0"

React 16+ depends on collection types Map and Set. @babel/polyfill emulates a full ES2015+ environment and is for applications. You can use built-ins like Promise or WeakMap, static methods like Array.from or Object.assign, instance methods like Array.prototype.includes, and generator functions provided you use the regenerator plugin.

Babel 7 Packages

the whys


                "@babel/register": "^7.0.0",

Allows you to use the require module in your applications.

Configuring ESLint

package.json


                "babel-eslint": "^10.0.1",
                "eslint": "^5.9.0",
                "eslint-loader": "^2.1.1",
                "eslint-plugin-import": "^2.14.0",
                "eslint-plugin-react": "^7.11.1",

Configuring ESLint

.eslintrc.json


                {
                    "parser": "babel-eslint",
                    "env": {
                        "browser": true,
                        "commonjs": true,
                        "es6": true,
                        "node": true,
                        "jest": true
                    },
                    "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:import/recommended"],
                    "settings": {
                        "react": {
                            "pragma": "React",
                            "version": "16.6.3"
                        }
                    },
                    "parserOptions": {
                        "ecmaFeatures": {
                            "jsx": true
                        },
                        "ecmaVersion": 2018,
                        "sourceType": "module"
                    },
                    "plugins": [
                        "import",
                        "react"
                    ],
                    "rules": {
                        "no-unused-vars": 0,
                        "no-console": 0,
                        "max-len": [1, 120, 2, {
                            "ignoreComments": true
                        }],
                        "prop-types": [0],
                        "indent": [
                            0
                        ],
                        "linebreak-style": [
                            "error",
                            "unix"
                        ],
                        "quotes": [
                            0
                        ],
                        "semi": [
                            0
                        ]
                    }
                }

Configuring ESLint

config/webpack.base.config.js


                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loaders: [
                        'babel-loader',
                        'eslint-loader'
                    ]
                },

For my complete write up on configuring ESLint with React, please visit The Importance Of ESlint (And React) . To view the complete webpack.base.config.js file, click here .

Configuring Webpack

much changed

Configuring Webpack

I still have two webpack config files, but now they reside in a config folder and are also named differently.

One file is called webpack.base.config.js and is for webpack configs related to the development environment, some of which also are related to production. The other is webpack.prod.config.js and is for webpack configs related only to the production environment.

Configuring Webpack

why the new configs

Setting up Webpack with these two new configs means drier code. No duplications as before. Click here to visit a repo containing my previous workflow.

Configuring Webpack

what requires/variables have NOT changed (base config)


                const path = require('path');
                const webpack = require('webpack');

As you can see, not much!

Configuring Webpack

what requires/variables have changed (base config)


                const CopyWebpackPlugin = require('copy-webpack-plugin');
                const merge = require('webpack-merge');
                const MiniCssExtractPlugin = require('mini-css-extract-plugin');
                const HtmlWebpackPlugin = require('html-webpack-plugin');
                const CleanWebpackPlugin = require('clean-webpack-plugin');
                const WorkboxPlugin = require('workbox-webpack-plugin');

Configuring Webpack

how module.exports has changed (base config)


                module.exports = env => {

                    const {PLATFORM, VERSION} = env;

                        return merge([
                            {
                                entry: {
                                    main: './src/index.js'
                                },
                                output: {
                                    filename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                                    chunkFilename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                                    path: path.resolve(__dirname, '../dist')
                                },
                                optimization: {
                                    splitChunks: {
                                        chunks: 'all'
                                    }
                                },
                                module: {
                                    rules: [{
                                        test: /\.js$/,
                                        exclude: /node_modules/,
                                        use: {
                                            loader: 'babel-loader'
                                        }
                                    },
                                    {
                                        test: /\.js$/,
                                        exclude: /node_modules/,
                                        loaders: [
                                            'babel-loader',
                                            'eslint-loader'
                                        ]
                                    },
                                    {
                                        test: /\.(scss|sass|css)$/,
                                        exclude: /node_modules/,
                                        loaders: [
                                            PLATFORM === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
                                            {
                                                loader: 'css-loader',
                                                options: {
                                                    modules: true,
                                                    sourceMap: true,
                                                    importLoaders: 1,
                                                    localIdentName: '[local]___[hash:base64:5]'
                                                },
                                            },
                                            'postcss-loader',
                                            'sass-loader'
                                        ]
                                    },
                                    {
                                        test: /\.(jpg|png|gif|svg|pdf|ico)$/,
                                            use: [{
                                                loader: 'file-loader',
                                                options: {
                                                    name: '[path][name].[hash:8].[ext]'
                                                },
                                            }],
                                    },
                                ]
                            },
                            plugins: [
                                new CleanWebpackPlugin(['dist']),
                                new HtmlWebpackPlugin({
                                    template: 'src/index.html',
                                    favicon: 'src/favicon.ico', /* remove */
                                    styles: 'src/styles.css',
                                    inject: true
                                }),
                                new MiniCssExtractPlugin({
                                    filename: PLATFORM === 'production' ? 'styles/[name].[hash].css' : '[name].css',
                                }),
                                new CopyWebpackPlugin([{
                                    from: 'src/static'
                                }]),
                                new WorkboxPlugin.GenerateSW({
                                    swDest: 'sw.js'
                                }),
                                new webpack.DefinePlugin({
                                    'process.env.VERSION': JSON.stringify(env.VERSION),
                                    'process.env.PLATFORM': JSON.stringify(env.PLATFORM)
                                })
                            ],
                        },
                    ])
                }

Configuring Webpack

config/webpack.base.config.js


                const path = require('path');
                const webpack = require('webpack');
                const CopyWebpackPlugin = require('copy-webpack-plugin');
                const merge = require('webpack-merge');
                const MiniCssExtractPlugin = require('mini-css-extract-plugin');
                const HtmlWebpackPlugin = require('html-webpack-plugin');
                const CleanWebpackPlugin = require('clean-webpack-plugin');
                const WorkboxPlugin = require('workbox-webpack-plugin');

                module.exports = env => {

                    const {PLATFORM, VERSION} = env;

                        return merge([
                            {
                                entry: {
                                    main: './src/index.js'
                                },
                                output: {
                                    filename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                                    chunkFilename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                                    path: path.resolve(__dirname, '../dist')
                                },
                                optimization: {
                                    splitChunks: {
                                        chunks: 'all'
                                    }
                                },
                                module: {
                                    rules: [{
                                            test: /\.js$/,
                                            exclude: /node_modules/,
                                            use: {
                                                loader: 'babel-loader'
                                            }
                                        },
                                        {
                                            test: /\.js$/,
                                            exclude: /node_modules/,
                                            loaders: [
                                                'babel-loader',
                                                'eslint-loader'
                                            ]
                                        },
                                        {
                                            test: /\.(scss|sass|css)$/,
                                            exclude: /node_modules/,
                                            loaders: [
                                                PLATFORM === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
                                                {
                                                    loader: 'css-loader',
                                                    options: {
                                                        modules: true,
                                                        sourceMap: true,
                                                        importLoaders: 1,
                                                        localIdentName: '[local]___[hash:base64:5]'
                                                    },
                                                },
                                                'postcss-loader',
                                                'sass-loader'
                                            ]
                                        },
                                        {
                                            test: /\.(jpg|png|gif|svg|pdf|ico)$/,
                                                use: [{
                                                    loader: 'file-loader',
                                                    options: {
                                                        name: '[path][name].[hash:8].[ext]'
                                                    },
                                                }],
                                        },
                                    ]
                                },
                                plugins: [
                                    new CleanWebpackPlugin(['dist']),
                                    new HtmlWebpackPlugin({
                                        template: 'src/index.html',
                                        favicon: 'src/favicon.ico', /* remove */
                                        styles: 'src/styles.css',
                                        inject: true
                                    }),
                                    new MiniCssExtractPlugin({
                                        filename: PLATFORM === 'production' ? 'styles/[name].[hash].css' : '[name].css',
                                    }),
                                    new CopyWebpackPlugin([{
                                        from: 'src/static'
                                    }]),
                                    new WorkboxPlugin.GenerateSW({
                                        swDest: 'sw.js'
                                    }),
                                    new webpack.DefinePlugin({
                                        'process.env.VERSION': JSON.stringify(env.VERSION),
                                        'process.env.PLATFORM': JSON.stringify(env.PLATFORM)
                                    })
                                ],
                            },
                        ])
                }

Dependency Graph

When webpack processes your app, it recursively builds a dependency graph that includes every module that your app needs, and then packages all of those modules into a small number of bundles to be loaded by the browser.

webpack basics

To get started, you only need to understand 4 basic concepts:

Entry
Output
Loaders
Plugins

entry


                module.exports = {
                    entry: {
                        main: './src/index.js'
                    },
                }

The starting point of webpack's dependency graph is called the entry point. The entry point tells webpack where to start its bundling process, and then follows the graph of dependencies to know what to bundle.

entry


                module.exports = {
                    entry: {
                        main: './src/index.js'
                    },
                }

The entry point did change since the previous workflow, and module.exports, and what now comes before entry did as well.

Configuring Webpack

module.exports changed


                module.exports = env => {
                    const {PLATFORM, VERSION} = env;
                };

The env variable is passed to module.exports so that I can make those webpack configurations which are required both in development and production. PLATFORM refers to dev or prod envs, and VERSION refers to staging (stag).

entry changed


                entry: {
                    main: './src/index.js'
                },

I no longer include a VENDOR_LIBS (vendor) entry. That means I no longer define a VENDOR_LIBS variable containing the third party dependencies I use in my application. This has to do with the new way of bundle splitting in webpack 4 using the SplitChunksPlugin instead of CommonsChunkPlugin.

webpack-merge

webpack-merge is what makes it possible to merge my two configs together into one, thereby resulting in much drier code as well.

main


                module.exports = env => {

                    const {PLATFORM, VERSION} = env;

                        return merge([
                            {
                                entry: {
                                    main: './src/index.js'
                            },
                        ])
                }

The value of the main property indicates to webpack what code needs to be bundled. Previously I called it bundle, but now for consistency and readability sake, I changed it to main.

main index.js


                import React from 'react';
                import ReactDOM from 'react-dom';
                import 'core-js/es6/map';
                import 'core-js/es6/set';
                import App from './App';
                import './styles.scss';
                import './favicon.ico'; /* remove */

The files which need to be included in the bundled file in output have all been imported into the main index.js file.

core.js in index.js

the why


                import 'core-js/es6/map';
                import 'core-js/es6/set';

A polyfilled environment for React 16 using core-js to support older browsers. Visit the React documentation to learn more.

ReactDOM.render()

And the main App Component that holds everything else related to the app is rendered there as well.

Code/Bundle Splitting

is important for browser caching.

Browser Caching

is great because it allows sites to load faster once the client has grabbed the necessary files and assets from the server the first time a user visits the page.

Clearing The Cache

Caching Headaches

However, it can cause big headaches when new code has been added to files. If the name of a file remains the same when new code has been added to it, the browser thinks that nothing has changed. To the browser, same name means same content.

Output


                output: {
                    filename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    chunkFilename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    path: path.resolve(__dirname, '../dist')
                },

Once you've bundled all your assets together, you need to tell webpack where to bundle your app. The output object tells webpack what to do with bundled code. But this output object differs greatly from the first edition of this workflow.

filename


                output: {
                    filename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    chunkFilename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    path: path.resolve(__dirname, '../dist')
                },

The value of the first property, filename, refers to the name(s) of output bundle(s). Note the ternary operator.

filename


                output: {
                    filename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    chunkFilename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    path: path.resolve(__dirname, '../dist')
                },

Previously, when I used the CommonsChunkPlugin and not the SplitChunksPlugin, the name of the hash I used was [chunkhash:8]. Now that we all are using the SplitChunksPlugin with webpack, some of us use [contenthash]. For more about [contenthash] and webpack 4, click here.

chunkFilename


                output: {
                    filename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    chunkFilename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    path: path.resolve(__dirname, '../dist')
                },

chunkFilename determines the name of non-entry chunk files. In my configuration, that means either vendor chunks or (at least with this particular workflow) dynamic imports. Again, note the ternary operator.

path


                const path = require('path');
                output: {
                    filename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    chunkFilename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    path: path.resolve(__dirname, '../dist')
                },

The value of the third property, path, is the absolute path to the dist folder, where the bundled assets end up. It has to be required in your webpack config in order for you to able to use it.

path


                const path = require('path');
                output: {
                    filename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    chunkFilename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    path: path.resolve(__dirname, '../dist')
                },

path.resolve() resolves a sequence of paths or path segments into an absolute path. As mentioned earlier, for the output path, webpack needs to know exactly where you want your bundles and output files to be emitted.

[name]


                output: {
                    filename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    chunkFilename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    path: path.resolve(__dirname, '../dist')
                },

I use the [name] property because of my bundle splitting resulting from naming different types of chunks. Previously the reasoning was because of > 1 entry point, but now it's because of > 1 type of chunk. As you saw, they do not reside in the entry point!

Bundle Splitting vs Code Splitting

With webpack 4, it has become clear to me that bundle splitting and code splitting are NOT interchangeable, as I previously thought. That's because of my introduction to dynamic imports, which IS code splitting, as opposed to multiple entry points, which is bundle splitting.

Bundle Splitting vs Code Splitting

I will be updating the terminology in the first edition of this workflow. I came across a fantastic article on medium that gets into the difference between the two, and helped me tremendously in optimizing my vendor bundle(s): The 100% correct way to split your chunks with Webpack, by David Gilbertson.

[name]


                output: {
                    filename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    chunkFilename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    path: path.resolve(__dirname, '../dist')
                },

[name] takes into consideration that there can be more than one type of main bundle file, and they may have different names.

[contenthash]


                output: {
                    filename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    chunkFilename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    path: path.resolve(__dirname, '../dist')
                },

A simple way to make sure the browser picks up changed files is by using output.filename substitutions. The [hash] (or previously for me [chunkhash]) can be used to include a build-specific hash in the filename.

[contenthash]


                output: {
                    filename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    chunkFilename: PLATFORM === 'production' ? 'scripts/[name].[contenthash].chunk.js' : 'scripts/[name].chunk.js',
                    path: path.resolve(__dirname, '../dist')
                },

It's even better to use the [contenthash] substitution, which is the hash of the content of a file, different for each type of asset.

Michael Ciniawsky, a webpack core contributor, put it well in webpack issue #7179:

[chunkhash] isn't very 'stable' as it can change when e.g a module of a chunk is moved for some reason ... For predictable long term (browser) caching the contents of the asset are the only reliable hashing source since browsers cache files based on Map { url => content } relations without any knowledge of webpack chunks or the like...

And for Code Splitting (Async Chunks):

Also don't forget to set the chunkFilename for Code Splitting (Async Chunks):


                const output = {
                    filename: dev || ci ? '[name].bundle.js' : '[name].[contenthash].bundle.js',
                    chunkFilename: dev || ci ? '[name].chunk.js' : '[name].[contenthash].chunk.js'
                }

< /> === 3

There are 3 main types of code in a typical app or site built with webpack:

The source code you have written
Third party, vendor code your source is dependent on
Webpack runtime and manifest that conducts the interaction of all modules

Runtime

The runtime, along with the manifest data, is basically all the code webpack needs to connect your modularized app while it's running in the browser.

Manifest

manifest refers to the collection of module related data runtime uses to resolve and load modules after they have been bundled and shipped to the browser.

Runtime/Manifest

Both will be discussed in detail when we get to webpack.prod.config.js.

Side Effects

So why mention all of this? Because runtime and manifest affect browser caching.

[chunkhash]

Previously when using [chunkhash], certain hashes change even when their content did not. This was caused by the injection of runtime and manifest, which changed every build.

CommonsChunkPlugin

Originally, chunks (and modules imported inside them) were connected by a parent-child relationship in the internal webpack graph. The CommonsChunkPlugin was used to avoid duplicated dependencies across them, but further optimizations were not possible. Since webpack v4, the CommonsChunkPlugin was removed in favor of optimization.splitChunks.

SplitChunksPlugin

We can use the webpack SplitChunksPlugin to split (vendor) dependencies into chunks.

SplitChunksPlugin

Out of the box, SplitChunksPlugin should work well for most users.

SplitChunksPlugin

By default it only affects on-demand chunks, because changing initial chunks would affect the script tags the html file should include to run the project.

SplitChunksPlugin

webpack will automatically split chunks based on the following conditions:

Conditions

When a new chunk can be shared OR modules are from the node_modules folder.
When a new chunk is bigger than 30kb (before min+gz)
The maximum number of parallel requests when loading chunks on demand would be lower or equal to 5.
The maximum number of parallel requests at initial page load would be lower or equal to 3.
When trying to fulfill the last two conditions, bigger chunks are preferred.

Extracting a Runtime

config/webpack.prod.config.js


                optimization: {
                    runtimeChunk: 'single',
                },

After adding runtimeChunk, a new (default name) runtime file will be created. The value "single" creates a single runtime file to be shared for ALL generated chunks.

Dev Output In Terminal


                10926 ± npm run start ✹

                > speech-to-text-app@0.0.1 start /Users/mariacam/Development/speech-to-text-app
                > webpack-dev-server --mode development --config config/webpack.base.config.js --open --hot --history-api-fallback
                --env.PLATFORM=local --env.VERSION=stag

                clean-webpack-plugin: /Users/mariacam/Development/speech-to-text-app/config/dist has been removed.
                ℹ ｢wds｣: Project is running at http://localhost:8080/
                ℹ ｢wds｣: webpack output is served from /
                ℹ ｢wds｣: 404s will fallback to /index.html
                ℹ ｢wdm｣: wait until bundle finished: /
                ℹ ｢wdm｣: Hash: cc60f0b1138d573ca57d
                Version: webpack 4.3.0
                Time: 7393ms
                Built at: 11/23/2018 3:29:44 PM
                Asset Size Chunks Chunk Names
                src/favicon.2cc0ddfd.ico 1.06 KiB [emitted]
                scripts/Speech.chunk.js 29.9 KiB Speech [emitted] Speech
                scripts/main.chunk.js 50.2 KiB main [emitted] main
                scripts/vendors~Speech.chunk.js 794 KiB vendors~Speech [emitted] vendors~Speech
                scripts/vendors~main.chunk.js 1.27 MiB vendors~main [emitted] vendors~main
                favicon.ico 1.06 KiB [emitted]
                index.html 485 bytes [emitted]
                precache-manifest.ead46283758951b05b27e4de5ca60d6c.js 655 bytes [emitted]
                sw.js 907 bytes [emitted]
                Entrypoint main = scripts/vendors~main.chunk.js scripts/main.chunk.js
                [./node_modules/core-js/es6/map.js] 208 bytes {vendors~main} [built]
                [./node_modules/core-js/es6/set.js] 208 bytes {vendors~main} [built]
                [./node_modules/webpack-dev-server/client/index.js?http://localhost:8080]
                (webpack)-dev-server/client?http://localhost:8080 7.78 KiB {vendors~main} [built]
                [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {vendors~main}
                [built]
                [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB{vendors~main}
                [built]
                [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
                [./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.66 KiB {vendors~main} [built]
                [./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {vendors~main} [built]
                [./node_modules/webpack/hot/log-apply-result.js] (webpack)/hot/log-apply-result.js 1.31 KiB {vendors~main} [built]
                [./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.03 KiB {vendors~main} [built]
                [0] multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js 52 bytes {main}
                [built]
                [./src/App.js] 1.04 KiB {main} [built]
                [./src/favicon.ico] 70 bytes {main} [built]
                [./src/index.js] 382 bytes {main} [built]
                [./src/styles.scss] 1.33 KiB {main} [built]
                + 117 hidden modules
                Child html-webpack-plugin for "index.html":
                1 asset
                Entrypoint undefined = index.html
                [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 504 bytes {0} [built]
                [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
                [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
                [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]
                ℹ ｢wdm｣: Compiled successfully.

Dev Output In Terminal

So much has changed even in Terminal output when running your React application in dev mode with webpack-dev-server. Everything configured in config/webpack.base.config.js prints out in Terminal. So cool, right?