Generate Webpack Cofiguration file (webpack.config.js) using webpack-cli

 

In this article, i am going to show you how to generate webpack.config.js  file with webpack-cli.  After that we will look at the each component of the generated webpack.config.js in detailed with their usage.

The official documentation of the webpack :-  https://webpack.js.org/concepts/

webpack.config.js is the file that contains the webpack related configurations for the project. This will be read by the webpack process when it starts its execution.

 

You need to follow the instructions given below to generate webpack.config.js for your NPM based project.

Creating NPM (Node Package Manager) mananged project.

Here i assume that NPM is installed in your development environment. Therefore you can create and a NPM managed project with following commands.

mkdir weback-sample-project

cd webpack-sample-project

npm init

(Please refer the screenshot given below)

 

Screen Shot 2018-05-20 at 11.29.43 PM.png

 

Installing webpack-cli dependency

Now you have a NPM managed project. lets install the webpack-cli dependency for the project. Since the webpack-cli is used for the development purpose, it should be installed as a dev dependency.  This can be done with following command.

npm install webpack-cli --save-dev

(Please refer the screenshot given below)

Screen Shot 2018-05-20 at 11.32.58 PM.png

Once the above command is successfully executed, you can see that it is declared under the ‘devDependencies‘ section of the package.json.

  "devDependencies": {
    "webpack-cli": "^2.1.3"
  }

 

 

Initializing and generating the webpack configuration file (webpack.config.js)

Now you have successfully installed the webpack-cli dependency.  Now we can run the webpack-cli utility to initialize and generate the webpack configuration file for the project.

Since we have installed the webpack-cli as a local dependency (without -g  flag), we need to run it with npx.  This can be done with following command.

npx webpack-cli init

 

If you have installed the webpack-cli as a global dependency (with -g  flag), then you can run it without npx.

webpack-cli init

 

So in our case, we should run it with npx.

 

Then it will ask set of questions for getting the correct configuration details to initialize the configuration of the webpack.config.js file. (Please refer the screenshot given below)

Screen Shot 2018-05-20 at 11.44.57 PM.png

 

Finally, it will generate the webpack configuration file. In addition, it will add some dependencies for the projects based on the answers you have provided.

e.g:-  Will you be using ES2015? if you answer YES, then it will add babel related dependencies (babel-loaders and babel-preset-env etc…). 

 

 

Generated webpack.config.js file structure.

Here is the generated file structure. But we have done a small amendment to the generated file. That is we have added the ‘path’ library import statement in the top of the webpack configuration file as follows.

var path = require("path");

 

 

The generated webpack configuration file can be used as a reference for any NPM based/managed project such as ReactJs, NodeJs and AngularJs etc…

 

path is a default NodeJs library that is globally available when you installed NodeJs. So you do not have to install the path library for your project since it is globally available (bundled)  with the NodeJs installation. It can be used to resolve the path for accessing different files and directories of the application.

 

entry: – As the name suggested, this represents the entry point of the webpack process. In other-words, this instructs the webpack about where (from which file(s))  it should start the traspiling and bundling process. Therefore this contains the starting file on which the webpack should starts its operations.  Keep in mind that there can be multiple entry files (starting files).  In this example, we have used only a single entry file (starting file).

entry file should import the all the dependent resource files. That means it should contains the import statements for all the other resource files. Then the webpack will go through those imported source files in the bundling process.

 

output :- The output file name and the directory should be specified here. The final outcome (generated bundled file) will be stored in the given directory (path) with the given file name (filename).

You do not have to worry about the existence of the ‘dist‘ directory. If it does not exist, it will be created by the webpack.

 

__dirname :- This is a NodeJs global variable that gives the path of the currently running file. In this case it gives the path of the webpack.config.js. (webpack.config.js is the currently running file)

 

module :- This contains the set of plugins or modules that are used by the webpack.  You can see that we have added the babel-loader under the rules. (babel-loader is the babel plugin used in webpack and it is used to transpile ES6+ based code into ES5 based code)

 

test :-  This is the initial test related to the loader. this will tell that which file types should be considered for this loader. According to our sample file, we have written a regular expression to consider only the ‘js’ and ‘jsx’ files.

 

exclude :- The loader should exclude (omit) the files in the given directory. In this case it should exclude the javascript files in the ‘node_modules‘ directory.

 

loader :- This is the name of the loader that you have installed with NPM. In our case, this is babel-loader.

 

Adding the webpack-dev-server configuration.

If you observer the above configuration file, you can notice that we have configured the webpack-dev-server as follows.

devServer: {
    contentBase: path.join(__dirname, "dist/"),
    port: 9000
},

 

contentBase:- Tell the server where to serve content from.

port: development Server will be up and running on port 9000.

The official documentation of the dev server can be found at:-https://webpack.js.org/configuration/dev-server/

 

One thought on “Generate Webpack Cofiguration file (webpack.config.js) using webpack-cli

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s