Webpack 4 (Codenamed Legato ) is the latest version of Webpack that brings many new features to the most popular module bundler such as better performance and the easiness of use.
In biref these are the most important features of Webpack 4:
- performance improvements and faster build times (up to 98% faster)
- zero configuration for small apps
- better tree shaking for pure modules without side effects
- the introduction of development and production modes
-
<script async>
support - deprecated
CommonsChunkPlugin
in favor of theoptimize.splitChunks
API - by default you can import and export web assembly (Rust, C++, C etc.)
- the introduction of the mode property which can take either development or production options and defaults to production
If you have used Webpack before then you may agree that configuration is one of the most frustrated aspects of Webpack.
In this tutorial you'll get introduced to Webpack 4 and see how you can use it to bundle the different pieces of your modern front end applications but without having to deal with complex configurations particularly for small projects and demos when you just want to get up and running with your small web application.
Webpack 4 provides a lot of defaults that can be seen as a sort of convention as configuration.
Webpack 4 Doesn't Need a Configuration File by Default
The first thing that you had to create when using Webpack is the configuration file webpack.config.js
which contains many configuration options. Most importantly the Entry Points and Output Files which define the files to be bundled and the bundle(s) to be produced.
const config = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: '/dist'
}
};
module.exports = config;
With Webpack you don't need to add this configuration you only need to add a src
folder with an index.js
file then after bundling your files you should expect your bundle to be saved in dist/main.js
.
src/index.js
and dist/main.js
are the default entry and output points used by Webpack 4.
Now let's create a small JavaScript app that demonstrates these new concepts
So let's first generate a new npm module.
Head over to your terminal then create a new folder and navigate inside of it
mkdir webpack4-demo
cd webpack4-demo
Now you need to add a package.json
file using
npm init -y
Next you need to install Webpack 4 and the Webpack CLI using npm
npm i webpack webpack-cli --save-dev
Open package.json
and add a build script to build your app
"scripts": {
"build": "webpack"
}
Next add a src folder with the index.js
file
mkdir src
touch index.js
Open index.js
then add any JavaScript code
console.log("hello Webpack 4!"):
Finally run your build script using:
npm run build
You should have your bundled in dist/main.js
so you can see that Webpack 4 is using default values without the need for a configuration file.
Conclusion
Using Webpack 4 you can quickly get up and running with your small test applications without the hassle of a configuration file.
Top comments (0)