{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/package-nodejs-application-using-webpack/",
    "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"7702ffd3-33a4-5338-b1b1-356a66dc22c8","excerpt":"In this article i will explain you step by step to package your nodejs application with webpack, webpack generally helps in creating build and bundling up the…","html":"<p>In this article i will explain you step by step to package your nodejs application with webpack, webpack generally helps in creating build and bundling up the project application files to avoid unneccessary file loading and thus increase performance</p>\n<h4>Step 1: Install WebPack</h4>\n<p>Navigate to your nodejs application folder and run below command, we will install webpack as development dependencies</p>\n<pre><code class=\"language-js\">npm install --save-dev webpack webpack-cli\n</code></pre>\n<h4>Step 2: Create WebPack configuration file</h4>\n<p>Under root path of your project folder create file <strong><em>webpack.config.js</em></strong></p>\n<p>Copy paste below code</p>\n<pre><code class=\"language-js\">const path = require(\"path\");\n\nmodule.exports = {\n  mode: \"development\",\n  entry: \"./src/app.js\",\n  output: {\n    filename: \"app.js\",\n    path: path.resolve(__dirname, \"assets\", \"scripts\"),\n    publicPath: \"assets/scripts/\",\n  },\n};\n</code></pre>\n<ul>\n<li>\n<p>In above code <strong><em>mode:\"development\"</em></strong> here we can tell webpack whether we are in development mode or production mode\nand webpack will create the application bundle accordingly.</p>\n</li>\n<li>\n<p>In above code <strong><em>entry:\"./src/app.js\"</em></strong> is the entry point means main file of your nodejs application from which you\nstart the node server. you can change the path according to your application folder and file structure</p>\n</li>\n<li>\n<p><strong><em>output:{filename:\"app.js\"}</em></strong> this is the single ouput file which webpack will generate after bundling all the\ndependencies file</p>\n</li>\n<li>\n<p><strong><em>output:{path:path.resolve(__dirname,\"assets\",\"scripts\")}</em></strong> this is the output path where <strong><em>app.js</em></strong> js file will\ngenerated by webpack after bundling all the dependencies. you can change the path according to your application requirement</p>\n</li>\n<li>\n<p><strong><em>output:{publicPath: \"assets/scripts/\"}</em></strong> this is the path where in if suppose you are using and importing any extra\nfile like images, external script then you need to mention the path of those files where you have kept these public images and scripts</p>\n</li>\n</ul>\n<h4>Step 3: Change package.json and add webpack command</h4>\n<p>In order to use package.json go to package.json file and add a command for webpack under scripts section</p>\n<pre><code class=\"language-js\">{\n    \"scripts\":{\n        \"build\":\"webpack\"\n    }\n}\n</code></pre>\n<p>Run the below command to start the webpack build</p>\n<pre><code class=\"language-js\">npm run build\n</code></pre>\n<h4>Step 4: Using Webpack dev server</h4>\n<p>Webpack dev server creates development bundle and also helps in serving our application and it reloads the development server whenever we change something in our code</p>\n<p>Install the Webpack dev server using below command</p>\n<pre><code class=\"language-js\">npm install --save-dev webpack-dev-server\n</code></pre>\n<p>Once installed we can use the Web pack dev server to serve our application we need to update our package.json and add\nsome configuration</p>\n<pre><code class=\"language-js\">{\n    \"scripts\":{\n        \"build\":\"webpack\",\n        \"build:dev\":\"webpack-dev-server\"\n    }\n}\n</code></pre>\n<p>Run the below command to start the development server using webpack-build-server this command will be running and detecting\nany change in the file</p>\n<pre><code class=\"language-js\">npm run build:dev\n</code></pre>","fields":{"slug":"/package-nodejs-application-using-webpack/"},"frontmatter":{"title":"How to package nodejs application using webpack","date":"December 15, 2022","description":"In this article i will explain you how you can package your nodejs application with webpack, webpack with nodejs application","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/nodejs-webpack.jpeg"}},"previous":{"fields":{"slug":"/node-express-typescript-sequelize-mysql-rest-api/"},"frontmatter":{"title":"Developing REST Api using sequelize typescript, node, express and mysql","date":"December 10, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/RestAPI.jpg"}},"next":{"fields":{"slug":"/push-notification-in-react-native-with-firebase/"},"frontmatter":{"title":"Firebase push notification in react native android application","date":"December 25, 2022","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/firebase-push.jpeg"}}},"pageContext":{"id":"7702ffd3-33a4-5338-b1b1-356a66dc22c8","previousPostId":"03f05a1d-ad5f-5c4b-a5d2-d6a02f510ad8","nextPostId":"52705409-b4e8-54e0-8eff-9a29593793f8"}},
    "staticQueryHashes": ["3860684146"]}