A tale of Webpack 4 and how to finally configure it in the right way. Updated.

Spoiler: there is no right way. #justwebpackthings Original photo: https://www.instagram.com/p/BhPo4pqBytk/?taken-by=riittagirl This blogpost has been last updated 28.12.2018 with webpack v4.28.0 Update 23.06.2018: I have received a bunch of comments about what worked and what can be improved! Thank you for your feedback! I have tried to take every comment into consideration here! At a certain point I have also decided to create a webpack boilerplate project on github, were you can git pull the latest webapck.config! Thank you for your support! Link: https://github.com/marharyta/webpack-boilerplate Update: this article is now a part of a series of articles about Webpack and React.js set ups. Read the next part about configuring dev environment with React here: https://medium.com/@riittagirl/how-to-develop-react-js-apps-fast-using-webpack-4-3d772db957e4 Thanks for giving my tutorial so much feedback. I am proud to say that Webpack has twitted about it the other day and it was officially approved by a couple of contributors! thanks! There are a million tutorials online, so you probably have seen a thousand different ways to configure Webpack file. And all of them will be working examples. Why is it so? Webpack itself has been evolving really fast and a lot of loaders and plugins have to keep up. This is a major reason why the configuration files are so different: with a different version combination of the same tools things might work, or break. Let me just say one thing, and this is my sincere opinion: a lot of people have been complaining about webpack and how cumbersome it is. This is true in many ways, although I have to say with my experience of working with , you stumble upon the same type of errors there too, meaning that when you use , it’s inevitable that some versions would be incompatible. gulp and grunt npm modules Webpack 4 so far is the popular module bundler that has just undergone a massive update. There is a lot of new things it has to offer, such as zero configuration, reasonable defaults, performance improvement, optimisation tools out of the box. If you are completely new to webpack, a great way to start would be to read the docs. with many parts explained, so I will go through them very briefly. Webpack has a pretty nice documentation webpack 4 does not require a configuration file, this is new for the version 4. Webpack kinda grows step by step, so there is no need to do a monstrous configuration from the start. Zero config: webpack 4 is the fastest version of webpack so far. Performance improvement: webpack 4 main concepts are . I will not cover these in details, although the difference between loaders and plugins is very vague. It all depends on how library author has implemented it. Reasonable defaults: entry, output, loaders, plugins Core concepts Entry This should be your file. Now you will probably see a few configurations where people include or file there. This is a major hack and can lead to a lot of unexpected errors. Also sometimes you see an entry with a few files. While some solutions allow you to do so, I would say it usually adds more complexity and only do it when you really know why you are doing it. .js .scss .css .js Output This is your or or folder where your end js file will be hosted. This is your end result comprised of modules. build/ dist/ wateveryounameit/ Loaders They mostly compile or transpile your code, like postcss-loader will go through different plugins. You will see it later. Plugins Plugins play a vital role in outputting your code into files. Quickstart Create a new directory and move into it: mkdir webpack-4-tutorialcd webpack-4-tutorial Initialize a package.json : npm init or yarn init We need to download as a module and to run it from your terminal. webpack v4 webpack-cli npm install webpack webpack-cli --save-dev or yarn add webpack webpack-cli --dev Make sure you have version 4 installed, if not, you can explicitly specify it in your file. Now open up and add a build script: package.json package.json : { "scripts" : "webpack" "dev" } Trying to run it, you will most likely see a warning: WARNING in configuration The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment. You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/ Webpack 4 modes You need to edit your script to contain mode flag: : { "scripts" : "webpack --mode "dev" development" } ERROR Entry module not found: Error: Can’t resolve ‘./src’ in ‘~/webpack-4-quickstart’ in This means webpack is looking for a folder with an file. This is a default behaviour for webpack 4 since it requires zero configuration. .src/ index.js Let`s go create a directory with a file like this and put some code there. .js ./src/index.js console.log("hello, world"); Now run the dev script: npm run dev or yarn dev If at this point you ran into an error, read the update of this section below. Otherwise, now you have a directory. This is great since we know our code compiled. But what did just happen? ./dist/main.js By default, webpack requires zero configuration meaning you do not have to fiddle with webpack.config.js to get started using it. Because of that, it had to assume some default behaviour, such that it will always look for ./src folder by default and index.js in it and output to ./dist/main.js main.js is your compiled file with dependencies. Update 23.12.2018 If you have run into this error: ERROR in ./node_modules/fsevents/node_modules/node-pre-gyp/lib/publish.js Module not found: Error: Can't resolve 'aws-sdk' in '/Users/mobr/Documents/workshop/test-webpack-4-setup/node_modules/fsevents/node_modules/node-pre-gyp/lib' described in more details, then you are most likely using one of more mature webpack v4 releases. here Unfortunately, you cannot solve it without creating a webpack.config.js file (I will show you how to do it below in this article). Just follow my tutorial till the ‘Transpile your .js code’ and copy-paste the config file. You will need to download webpack-node-externals npm install webpack-node-externals --save-dev or yarn add webpack-node-externals --dev and import the following code there: const nodeExternals = require('webpack-node-externals');...module.exports = {...target: 'node',externals: [nodeExternals()],...}; from this . module Having 2 configuration files is a common practice in webpack, especially in big projects. Usually you would have one file for development and one for production. In webpack 4 you have modes: and . That eliminates the need for having two files (for medium-sized projects). production development : { "scripts" "dev": "webpack --mode development", "build": "webpack --mode production" } If you paid close attention, you have checked your file and saw it was not minified. main.js I will use build script in this example since it provides a lot of optimisation out of the box, but feel free to use any of them from now on. The core difference between build and dev scripts is how they output files. Build is created for production code. Dev is created for development, meaning that it supports hot module replacement, dev server, and a lot of things that assist your dev work. You can override defaults in npm scripts easily, just use flags: : { "scripts" " dev": "webpack --mode development ./src/index.js --output ./dist/main.js", "build": "webpack --mode production ./src/index.js --output ./dist/main.js" } This will override the default option without having to configure anything yet. As an exercise, try also these flags: — watch flag for enabling watch mode. It will watch your file changes and recompile every time some file has been updated. "scripts": { , "dev": "webpack --mode development ./src/index.js --output ./dist/main.js --watch" "build": "webpack --mode production ./src/index.js --output ./dist/main.js --watch" } — entry flag. Works exactly like output, but rewrites the entry path. Transpile your .js code Modern JS code is mostly written is ES6, and ES6 is not supported by all the browsers. So you need to transpile it — a fancy word for turn your ES6 code into ES5. You can use for that — the most popular tool to transpile things now. Of course, we do not only do it for ES6 code, but for many JS implementations such as TypeScript, React, etc. babel npm install babel-core babel-loader babel-preset-env --save-dev or yarn add babel-core babel-loader babel-preset-env --dev This is the part when you need to create a config file for babel. nano .babelrc paste there: { : [ "presets" "env" ] } We have two options for configuring babel-loader: using a configuration file webpack.config.js using --module-bind in your npm scripts You can technically do a lot with new flags webpack introduces but I would prefer for simplicity reasons. webpack.config.js Configuration file Although webpack advertises itself as a zero-configuration platform, it mostly applies to general defaults such as entry and output. At this point we will create with the following content: webpack.config.js // webpack v4 const path = require('path'); // update from 23.12.2018const nodeExternals = require('webpack-node-externals'); module.exports = {entry: { main: './src/index.js' },output: {path: path.resolve(__dirname, 'dist'),filename: 'main.js'},target: 'node', // update from 23.12.2018externals: [nodeExternals()], // update from 23.12.2018 module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: "babel-loader"}}]}}; also we will remove flags from our npm scripts now. "scripts": {"build": "webpack --mode production","dev": "webpack --mode development"}, Now when we run it should output us a nice minified file into If not, try re-installing npm run build or yarn build .js ./dist/main.js babel-loader. Update 23.12.2018 If you run into a it means that some of your preloaded babel dependencies are not compatible. In my case, I got module ‘@babel/core’ conflict, Module build failed: Error: Cannot find module '@babel/core' babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'. which I solved by yarn add @babel/core --dev The most common pattern of webpack is to use it to compile React.js application. While this is true, we will not concentrate on React part in this tutorial since I want it to be framework agnostic. Instead, I will show you how to proceed and create your .html and .css configuration. HTML and CSS imports Lets create a small file first in our folder index.html ./dist Hello, world! As you can see, we are importing here Lets configure it! As we agreed, we ca only have one entry point for webpack. So where do we put our css to?Create a in our folder style.css style.css ./src div {color: red;} Do not forget to include it into your .js file: import "./style.css";console.log("hello, world"); Spoiler: in certain articles, you will hear that ExtractTextPlugin does not work with webpack 4. It worked for me for webpack v4.2 but stopped working as I used webpack v4.20. It proves my point of modules ambiguity in set-up and if it absolutely does not work for you, you can switch to MiniCssExtractPlugin. I will show you how to configure another one later in this article. For backwards compatibility, I will still show ExtractTextPlugin example, yet feel free to skim it and move to a part where I am using MiniCssExtractPlugin. In webpack create a new rule for css files: // webpack v4const path = require('path'); // update from 23.12.2018const nodeExternals = require('webpack-node-externals'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = {entry: { : './src/index.js' },output: {path: path.resolve(__dirname, 'dist'),filename: 'main.js'},target: 'node', // update from 23.12.2018externals: [nodeExternals()], // update from 23.12.2018module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: "babel-loader"}}, ]}}; main {test: /\.css$/,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: ['css-loader']})} in terminal run npm install extract-text-webpack-plugin --save-devnpm install style-loader css-loader --save-dev or yarn add extract-text-webpack-plugin style-loader css-loader --dev We need to use extract text plugin to compile our . As you can see, we also added a new rule for . Since version 4, Webpack 4 has problems with this plugin, so you might run into this error: .css .css _I'm trying to use this plugin with webpack 4 alpha 5 and getting the following error: Error: Chunk.entrypoints: Use…_github.com Webpack 4 compatibility · Issue #701 · webpack-contrib/extract-text-webpack-plugin To fix it, you can run npm install -D extract-text-webpack-plugin@next or yarn add --dev extract-text-webpack-plugin@next Pro tip: google errors you get and try to find similar question in Github issues or just ask a question on StackOverflow. After that, your css code should compile to ./dist/style.css At this point in my package.json my dev dependencies look like this: "devDependencies": { } "babel-core": "^6.26.0","babel-loader": "^7.1.4","babel-preset-env": "^1.6.1","css-loader": "^0.28.11","extract-text-webpack-plugin": "^4.0.0-beta.0","style-loader": "^0.20.3","webpack": "^4.4.1","webpack-cli": "^2.0.12" your versions might differ and it is ok! Please, note that another combination might not work since even updating webpack-cli v2.0.12 to 2.0.13 can break it. #justwebpackthings So now it should output your into folder. style.css ./dist Mini-CSS plugin The Mini CSS plugin is meant to replace extract-text plugin and provide you with better future compatibility. I have restructured my webpack file to compile style.css with /mini-css-extract-plugin and it works for me. npm install mini-css-extract-plugin --save-dev or yarn add mini-css-extract-plugin --dev and // webpack v4const path = require('path'); // update from 23.12.2018const nodeExternals = require('webpack-node-externals'); // const ExtractTextPlugin = require('extract-text-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = {entry: { main: './src/index.js' },output: {path: path.resolve(__dirname, 'dist'),filename: '[name].[chunkhash].js'},target: 'node', // update from 23.12.2018externals: [nodeExternals()], // update from 23.12.2018module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: "babel-loader"}}, ]},plugins: [ ]}; {test: /\.css$/,use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader']} new MiniCssExtractPlugin({filename: 'style.css',}) As Nikolay Volkov pointed out, ‘style-loader’ might not be necessary anymore since Though it might be true I would still recommend to leave it for the fallback. MiniCssExtractPlugin.loader does the same. How do Webpack rules work? A quick description of how rules usually work: test: exclude: ,use: {loader: " "} { /\.YOUR_FILE_EXTENSION$/, /SOMETHING THAT IS THAT EXTENSION BUT SHOULD NOT BE PROCESSED/ loader for your file extension or a group of loaders } We need to use MiniCssExtractPlugin because webpack by default only understands format. MiniCssExtractPlugin gets your and extracts it into a separate file in your directory. .js .css .css ./dist Configure support for SCSS It is very common to develop websites with SASS and POSTCSS, they are very helpful. So we will include support for SASS first. Let`s rename our and create another folder to store files in there. Now we need to add support for formatting. ./src/style.css .scss .scss npm install sass-loader --save-dev node-sass or yarn add sass-loader --dev node-sass replace style.css with in your file. Change test to support ./scss/main.scss .js .scss // webpack v4const path = require('path');// update 23.12.2018const nodeExternals = require('webpack-node-externals'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = {entry: { : './src/index.js' },output: {path: path.resolve(__dirname, 'dist'),filename: 'main.js'},target: "node", // update 23.12.2018externals: [nodeExternals()], // update 23.12.2018module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: "babel-loader"}}, ]} ... main {test: /\.scss$/,use: ["style-loader",MiniCssExtractPlugin.loader,"css-loader","sass-loader"] } HTML template Now lets create file template. Add to file with exactly the same structure. .html index.html ./src Hello, world! We will need to use html plugin for this file in order to use it as a template. npm install html-webpack-plugin --save-dev or yarn add html-webpack-plugin --dev Add it to your webpack file: // webpack v4const path = require('path');// update 23.12.2018const nodeExternals = require('webpack-node-externals'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {entry: { : './src/index.js' },output: {path: path.resolve(__dirname, 'dist'),filename: 'main.js'},target: "node", // update 23.12.2018externals: [nodeExternals()], // update 23.12.2018 main module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: "babel-loader"}},{test: /\.scss$/,use: ["style-loader",MiniCssExtractPlugin.loader,"css-loader","sass-loader"]}]},plugins: [new MiniCssExtractPlugin({filename: "style.css"}), ]}; new HtmlWebpackPlugin({inject: false,hash: true,template: './src/index.html',filename: 'index.html'}) Now your file from is a template for your final index.html file. To check that everything works, delete every file from folder and the folder itself. ./src/index.html ./dist rm -rf ./distnpm run dev or yarn dev You will see that folder was created on its own and there are three files: ./dist index.html, style.css, main.js. Caching and Hashing One of the most common problems in development is implementing caching. It is very important to understand how it works since you want your users to always have the best latest version of your code. Since this blogpost is mainly about webpack configuration, we will not concentrate on how caching works in details. I will just say that one of the most popular ways to solve caching problems is adding a to asset files, such and . Hashing is needed to teach our browser to only request changed files. hash number style.css script.js You can read about it here . Webpack 4 has a prebuilt functionality for it implemented via . It can be done with: chunkhash // webpack v4const path = require('path'); // update 23.12.2018const nodeExternals = require("webpack-node-externals"); const MiniCssExtractPlugin = require("mini-css-extract-plugin");const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {entry: { './src/index.js' },output: {path: path.resolve(__dirname, 'dist'), },target: "node",externals: [nodeExternals()],module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: "babel-loader"}},{test: /\.scss$/,use: ["style-loader",MiniCssExtractPlugin.loader,"css-loader","sass-loader"]}]},plugins: [** new MiniCssExtractPlugin({filename: "style.[contenthash].css"}),** main: filename: '[name].[chunkhash].js' new HtmlWebpackPlugin({ inject: false, hash: true, template: './src/index.html', filename: 'index.html' }) ]}; In your file add ./src/index.html ** ">** Hello, world! "> This syntax will teach your template to use hashed files. This is a new feature implemented after this issue: _This pull request deprecates the usage of {%=o.htmlWebpackPlugin.assets%} and creates a new representation called…_github.com Support for .css and .manifest files and cache busting by jantimon · Pull Request #14 ·… We will use pattern described there. Check our file htmlWebpackPlugin.files.chunks.main ./dist index.html If we do not change anything in our and. file and run .js css npm run dev no matter how many times you run it, the numbers in hashes should be identical to each other in both files. Problem with CSS hashing and how to solve it Update 28.12.2018 This problem might exist if you are using ExtractTextPlugin for your CSS with webpack 4. If you use MiniCssExtractPlugin, this problem should not occur, yet it is beneficial to read about it! Although we have the working implementation here, it is not perfect yet. What if we change some code in our file? Go ahead, change some scss there and run dev script again. Now the new file hash is not generated. What if we add a new console.log to our file like this: .scss .js import "./style.css";console.log("hello, world");console.log("Hello, world 2"); If you run a dev script again, you will see that hash number has been updated in both files. This issue is known and there is even a stack overflow question about it: _I have only got the JS file in the output whereas i have used the ExtractTextPlugin to extract the Css file.Both have…_stackoverflow.com Updating chunkhash in both css and js file in webpack Now how to fix that? After trying a lot of plugins that claim they solve this problem I have finally came to two types of solution. Solution 1 There might also be some conflicts still, so now lets try mini-css-extract plugin . Solution 2 Replace with just in extract plugin. This was one of the solutions to the . This appears to be a conflict with webpack 4.3 which introduced a variable of its . In conjunction, use this plugin: [chukhash] [hash] .css issue [contenthash] own webpack-md5-hash (see more below). Now lets test our files: both files change hash. .js Problem with JS hashing and how to solve it In case if you are already using MiniCssExtractPlugin you have an opposite problem: every time you change something in your SCSS, both .js file and .css output files change hashes. Solution: Use this plugin: If you make changes to your file and run dev script, only a new should be generated with a new hash, not both. webpack-md5-hash main.scss style.css // webpack v4const path = require('path');// update 23.12.2018const nodeExternals = require("webpack-node-externals"); const MiniCssExtractPlugin = require("mini-css-extract-plugin");const HtmlWebpackPlugin = require("html-webpack-plugin"); const WebpackMd5Hash = require("webpack-md5-hash"); module.exports = {entry: { main: './src/index.js' },output: {path: path.resolve(__dirname, 'dist'), },target: "node", // update 23.12.2018externals: [nodeExternals()], // update 23.12.2018module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: "babel-loader"}},{test: /\.scss$/,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: ['css-loader', 'sass-loader']})}]},plugins: [new MiniCssExtractPlugin({filename: "style.[contenthash].css"}),new HtmlWebpackPlugin({inject: false,hash: true,template: "./src/index.html",filename: "index.html"}), ]}; filename: '[name].[chunkhash].js' new WebpackMd5Hash() Now when I edit main.scss a new hash for style.css is generated. And when I edit css only css hash changes and when I edit ./src/script.js only script.js hash changes! Integrating PostCSS To have out output polished, we can add PostCSS on top. .css provides you with and other nice and handy stuff. I will show what I am using on a daily basis. We will need We will also install autoprefixer as we will need it later. PostCSS autoprefixer, cssnano postcss-loader. npm install postcss-loader --save-devnpm i -D autoprefixer or yarn add postcss-loader autoprefixer --dev Spoiler: you do not have to use webpack to benefit from PostCSS, it has a pretty decent plugin that allows you to use it in npm script. post-css-cli Create where you require relevant plugins, paste postcss.config.js module.exports = {plugins: [require('autoprefixer')]} Our now should look like this: webpack.config.js // webpack v4const path = require('path');// update 23.12.2018const nodeExternals = require("webpack-node-externals"); const MiniCssExtractPlugin = require("mini-css-extract-plugin");const HtmlWebpackPlugin = require("html-webpack-plugin");const WebpackMd5Hash = require("webpack-md5-hash"); module.exports = {entry: { main: './src/index.js' },output: {path: path.resolve(__dirname, 'dist'),filename: '[name].[chunkhash].js'},target: "node",externals: [nodeExternals()],module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: "babel-loader"}},{test: /\.scss$/, }]},plugins: [** new MiniCssExtractPlugin({filename: 'style.[contenthash].css',}),**new HtmlWebpackPlugin({inject: false,hash: true,template: './src/index.html',filename: 'index.html'}),new WebpackMd5Hash()]}; use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'] Please, pay attention to the order of plugins we use for our .scss use: [ 'style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader'] The loader uses plugins from the end to the beginning. You can test by adding more code to your .scss files and checking the output. There is also a way to fix the output by specifying which browser you want to support in the file. autoprefixer .browserslistrc I would direct you to to explore the plugins available for PostCSS, such as: https://www.postcss.parts/ utilities cssnano style-lint I will use to minify my output file and to arrange my media queries. I also have received some messages that: cssnano css-mqpacker Feel free to try if you want to. cleancss Version controlling To keep your dependencies in place, I recommend using instead of yarn npm to install modules. Long story short, this will lock every package and when you do node modules reinstallation, you will avoid many incompatibility surprises. Keeping it clean and fresh We can try importing to clean our folder before we regenerate files. clean-webpack-plugin ./dist // webpack v4const path = require('path');// update 23.12.2018const nodeExternals = require("webpack-node-externals"); const MiniCssExtractPlugin = require("mini-css-extract-plugin");const HtmlWebpackPlugin = require("html-webpack-plugin");const WebpackMd5Hash = require("webpack-md5-hash"); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = {entry: { main: './src/index.js' },output: {path: path.resolve(__dirname, 'dist'),filename: '[name].[chunkhash].js'},target: "node",externals: [nodeExternals()], module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: "babel-loader"}},{test: /\.scss$/,use: [ 'style-loader',MiniCssExtractPlugin.loader,'css-loader','postcss-loader','sass-loader']}]},plugins: [ new MiniCssExtractPlugin({filename: 'style.[contenthash].css',}),new HtmlWebpackPlugin({inject: false,hash: true,template: './src/index.html',filename: 'index.html'}),new WebpackMd5Hash()]}; new CleanWebpackPlugin('dist', {} ), Now that we have our configuration clean and neat, we can rock on! Here I have provided you with my configuration file and my way to configure it step by step. Note: since a lot of npm dependencies might change by the time you read this the same config might not work for you! I kindly ask you to leave your errors in the comments below so that I can edit it later. Today is 05.04.2018 The latest revision of this article is 28.12.2018 The with the latest versions of plugins has the following structure: package.json {“name”: “webpack-test”,“version”: “1.0.0”,“description”: “”,“main”: “index.js”,“scripts”: {“build”: “webpack --mode production”,“dev”: “webpack --mode development”},“author”: “”,“license”: “ISC”,"devDependencies": {"@babel/core": "^7.2.2","autoprefixer": "^9.4.3","babel-core": "^6.26.3","babel-loader": "^8.0.4","babel-preset-env": "^1.7.0","css-loader": "^2.0.2","html-webpack-plugin": "^3.2.0","mini-css-extract-plugin": "^0.5.0","node-sass": "^4.11.0","postcss-loader": "^3.0.0","sass-loader": "^7.1.0","style-loader": "^0.23.1","webpack": "4.28","webpack-cli": "^3.1.2" },"dependencies": {"clean-webpack-plugin": "^1.0.0","webpack-md5-hash": "^0.0.6","webpack-node-externals": "^1.7.2"} } Read the next part about configuring dev environment with React here: https://medium.com/@riittagirl/how-to-develop-react-js-apps-fast-using-webpack-4-3d772db957e4 Please, Subscribe and Clap for this article! Thanks! More resources on : webpack v4 An essential webpack guide — SurviveJS _Want to learn webpack? Get started for free and build webpack configuration._survivejs.com SurviveJS - Webpack 2. What is new in Webpack 4? _This week, the JavaScript community was blessed with the news of a new and shiny webpack, webpack 4. This version…_scotch.io What's New in webpack 4 3. Webpack 4 tutorial _webpack 4 is out! The popular module bundler gets a massive update. webpack 4, what’s new? A massive performance…_www.valentinog.com Webpack 4 Tutorial: from 0 Conf to Production Mode (Updated) 4. More about yarn vs npm _This article was peer reviewed by Adrian Sandu, Marcello La Rocca, Matt Burnett, Nuria Zuazo and Vildan Softic. Thanks…_www.sitepoint.com Yarn vs npm: Everything You Need to Know - SitePoint