Webpack is also able to handle multiple other tasks:
- Assists in pulling your resources all together;
- Monitors changes and re-runs tasks;
- Can converse embedded images into data: URI;
- can require() CSS files;
- Works with Hot Module Replacement;
- May Perform Tree Shaking;
- Can split output file into several files so slow page load due to oversized JS-file is prevented.
You can install Webpack globally or locally for each project. Using yarn:
yarn global add webpack webpack-cli
Or using npm:
npm i -g webpack webpack-cli
How to start with Webpack
First of all, to start working with the webpack you need to know the following:
- Webpack has one big file called ‘webpack.config.js’ which will give you the ability to manage the bundling process. You need to create a webpack.config.js file in your root directory and paste the next basic code into it:
You also need to define the following properties within the module.exports object.
|entry||here you need to enter the path to the ./src/index.js file.|
|output||path: the folder in which the package is created is typically called ./dist or public/main.js. Here the public files of your application will be located.Filename: here will be contained all code.|
- Next, you need to install loaders – npm special libs – and update the webpack.config.js to add some other files instead of JS.
- Plugins are almost the same as loaders but under steroids. They can do what downloaders can’t. For example, on top of everything else, Webpack is built on a system of plugins that you use in your configuration file.
Modes of Webpack
The modes ( introduced in version 4) configure the environment in which Webpack will work. The mode can be configured for development (dev) or production (prod). The default mode is production.
- less optimized than production;
- runs faster;
- doesn’t strip comments;
- provides deeper error messages and workarounds;
- makes debugging much easier.
To start the Webpack you can also with npm or yarn:
- npm run build
- yarn run build or yarn build.
Webpack requires considerable training. But it is a tool well worth learning, considering the amount of time and effort it may save. Webpack doesn’t solve all issues. But it does fix the bundling issue.