Webpack is a module bundler for modern javascript applications. webpack helps us in managing javascript files with all the modules in it, and then in the process these javascript files will be packaged into a file with a smaller size.
Okay, to make it easier to understand, we will try to practice it directly, first install nodejs and npm then install webpack globally with the command npm install -g webpack. Then if it works, then when you enter the command webpack –version then create a new file with the name learn-webpack then go to that directory, then type the command npm init -y . If successful, a new file will be added to our application directory with the name package.json. Next, install webpack with the command npm install webpack —-save-dev. This command will install webpack to “devDependencies”, meaning that the webpack plugin is listed in the development environment. Furthermore, if you have succeeded in creating two new folders with the names “dist” and “src” which later in the directory of the dist folder we will save the resulting build file and then we will save the source javascript in the src folder.
the structure is like this.
.
|
|– node_modules
|
|– package.json
|
|– src
|
|__ dist
The next step is in the src folder create a new file with the name app.js and in the root directory create a webpack.config.js file the structure will be like this.
.
|
|-- node_modules
|
|-- package.json
|
|-- src
| |__ app.js
|
|-- dist
|
|__ webpack.config.js
OK, then open the file app.js then enter console.log(‘Hello Webpack’) then open a terminal and type the command webpack. So that the command will not error then we have to make a webpack configuration in the webpack.config.js file.
// webpack.config.jsconst path = require(‘path’)const config = {
entry: ‘./src/app.js’,
output: {
filename: ‘bundle.js’,
path: path.resolve(__dirname, ‘dist/’),
},
}module.exports = config
now run the webpack command again in the terminal.
Yep.. it worked.
The need for digital IT is needed in daily activities, Bead IT Consultant is the right choice as your partner, visit our website by clicking this link: www.beadgroup.com