JavaScript Infrastructure: CLI, NPM, Babel and Webpack

In this lesson, you will learn how to install babel 7. It is actually more complicated than you think. You need to install three development packages and one production package.

In this lesson, you will learn how to create the babel config file. You have three options.

In this lesson, we will show you the difference between babel.config.js and .babelrc.

Translating syntaxes alone is not enough. We also need to fill the current environment with missing APIs. This is calling Polyfilling. In Webpack, this is called shimming.

Babel preset is a collection of pre-installed and configured plugins. But the current preset may not always meet our demand. In this case, we need to add extra plugins. Watch this lesson to find out how.

We have completed our Babel study. In this lesson, we will review everything we have learnt.

In this lesson, we will show you how to install webpack and introduce to your webpack basic concepts.

In this lesson, we will show you how to create the webpack config file.

Webpack alone can only handle JS and JSON files. This is not enough. To handle other file types, we need loaders. In this lesson, you will learn two loaders: style loader and CSS loader. They can help us process CSS files.

In this lesson, we will show you how to use file loaders. You will also learn one of webpack's most challenging setting: publicPath.

Upgrade:

When I was recording this course, clean-webpack-plugin V2 has NOT been published. But now V2 has been published and NPM will install V2 as the default option.

https://github.com/johnagan/clean-webpack-plugin/issues/106

Clean-webpack-plugin V2 no longer needs ['dist'] anymore.

When you require the clean-webpack-plugin, you need to put it in a set of curly brackets like this:
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

This is destructuring assignment, please see lecture 55 for more details.

Plugins make Webpack more convenient to use by automating commonly used operations. In this lesson, we will show you how to use two plugins: clean-webpack-plugin and html-webpack-plugin. Watch this lesson to find out what they can do and how to use them.

In this lesson, we will show you how to turn on and configure webpack devServer. You will also learn how to HMR, hot module replacement.

In this lesson, we will show you how to "webpack" packages.

Tree shaking means removing unneeded codes before bundling. It can help lower the size of bundled files.

Setting sideEffects:false in package.json can help webpack better "shake the tree". Watch this lesson to find out more.

Production mode and development mode may often require very different settings. But they will also share lots of identical settings. In this case, we need to divide webpack.config.js into three files: prod.config.js, dev.config.js and common.config.js. Watch this lesson to find out more.

Using html-webpack-plugin, style loader and CSS loader, we can bundle a CSS file into HTML style tag. But what if we want to bundle css file into an independent CSS file and minify CSS codes in the bundled CSS file? Watch this lesson to find out how.

Entry files may share certain codes. Instead of loading the same codes repeatedly, we can split them and only load them once. This is called code splitting. Watch this lesson to find out how to split shared codes.

In this lesson, we will show you how to use on-demand loading. Code splitting is the foundation of on-demand loading. So before you start this lesson, make sure you have mastered everything taught in the last lesson.

In this lesson, you will learn how to "polyfill" using Webpack.

Shimming means adding new global APIs. For example, if we "shim" jQuery, then all files will automatically acquire access to jQuery, we do not have to link it int each JS file.

In this lesson, we will show you how to integrate Webpack with Babel using babel-loader. We can do bundling, syntax translation and polyfilling simultaneously. Watch this lesson to find out how!

Attention here, I did not install webpack-dev-server in this lesson.