What is a Webpack?
In very simple terms, a Webpack is a static module bundler. This simply means that, when you build or process your application based on any framework or library with webpack support, the Webpack shows its magic and internally builds a dependency graph that maps every module your project needs and generates one or more bundles. Webpack treats any file as a dependency if at any time one file depends on another. This allows Webpack to take non-code assets, such as web fonts or images, and also provide them as dependencies for your application. When Webpack starts bundling your application, it starts from a list of modules defined on the command line or in its configuration file. From these entry points, Webpack recursively builds a dependency graph that includes all the modules that the application needs. Once the dependency graph is ready, Webpack sprinkles its magic dust and bundles all those modules into a number of smaller bundles- often, just one – to be loaded by the browser.
React Webpack Configuration
A configuration in Webpack is a JS module. We can put configuration, loaders which are explained later, and various specific information in the config file. Configuration files are used to configure the initial settings and other parameters for the machine on which it is running. Webpack configuration allows us to set the entry path, of the first file from where it is
Webpack configuration file’s example.
webpack.config.js
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
resolve: {
extensions: [‘*’, ‘.js’, ‘.jsx’]
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};Why react webpack Configuration?
Configurations are used for user applications, setting up the Operating System like macOS or Windows, or maybe setup the server using scripts like Node, etc. This allows setting up the system in such a way that it works as per the requirements of the user or programmer. Configuration can be GUI (Graphical User Interface) based or it can be text-based. Webpack configuration is text-based. Usually, when an application starts, it reads the configuration file and compiles the output as per the configuration files. Hence, if a custom output is required, one should know about their application’s configurations.
- Webpack provides a module system (based on ES6 standard) to JavaScript. •Webpack provides good speed benefits.
- Makes infrastructure more flexible, ready to scale
Know your Webpack Configuration
Before creating your very own webpack configuration, you must understand a few terminologies and their added advantage in the application’s production. Basically, there are five main or core concepts of webpack configuration.
- Entry: The webpack works by creating bundles and making a dependency graph out of each individual component. The question is,’ where does it start from’?. The answer to this question is very easy. A webpack starts its bundling from the file or path to the file, mentioned in its entry property.
The entry property acts as an entry point for webpack to start bundling and bundles the files based on the import keyword used within them. By default, the entry point is ./src/index.js but we can specify our own.
Eg:
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js'
};- Output: After the entry point and creating the dependency graph, where the webpack should emit the bundles, is described by the output property. By default, the output path is ./dist/main.js, where main.js is the file name and dist is the directory containing the file. We can specify our own directory and file.
Eg:
webpack.config.js
const path = require(‘path’);
module.exports = {
entry: ‘./path/to/my/entry/file.js’,
output: {
path: path.resolve(__dirname, ‘dist’),
filename: ‘my-first-webpack.bundle.js’
}
};
- Loader: Loader allows webpack to process other types of files primarily javascript or JSON and converts the files into valid modules. These valid modules can later be consumed by the application and added to the dependency graph.
Specifically, it looks for the word import in the files.
Eg:
webpack.config.js
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /.txt$/, use: 'raw-loader' }
]
}
};where test property indicates the files to be transformed and use property indicates the loader to be used for this purpose. It tells the webpack that, when it comes across a file with extension .txt inside of an import or require() statement, then use the raw-loader to transform the file before adding it to the bundle.
- Plugins: Plugins can be used to perform tasks that cannot be done by the loader alone. Tasks like bundle optimization, asset management, and injection of environment variables can be done using plugins. For using a plugin, you need to require() it and add it to the plugins array.
Eg:
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); // extra plugin const webpack = require('webpack'); //to access built-in plugins
module.exports = {
module: {
rules: [
{ test: /.txt$/, use: 'raw-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};In this example, the html-webpack-plugin generates an HTML file for the application by injecting automatically all the generated bundles.
Check the list of plugins from here: https://webpack.js.org/plugins/
- Mode: This tells the webpack to enable optimization based on the model of our application. The three modes of application are development, production, and none. The default mode is production.
Eg:
webpack.config.js
module.exports = {
mode: 'production' };
Create Webpack Configuration
Now after learning about the webpack’s properties and core concepts. It is time to configure our own webpack file. Follow the below steps:
- Make sure Node and npm is installed in your system as webpack runs only on Node and supports almost every browser.
- Create a working directory and from the terminal (within the directory) run command npm init and follow the steps.
- Now run command npm install webpack –save-dev to add the webpack module.
- Create webpack.config.js in the project root.
- Add the following lines to the file.
module.exports = {
entry: "./src/scripts/app.js",
output: {
filename: "./dist/app.bundle.js"
}
};- Run command npm start. This should create an app.bundle.js file inside the dist directory. The entry point is app.js file located inside scripts which is a subdirectory of src directory. All the js code will be bundled inside the app.bundle.js file.
- Finally, we can create an HTML page either manually or use html-webpack-plugin.In this example, we are creating an HTML page manually. All we need to do now is create an HTML page named index.html. Write the simple HTML tags and add <script src=’app.bundle.js’></script> line inside the body tag just before it ends.
- Now open your browser and run the index.html file.