![how to run webpack production build how to run webpack production build](https://cli.vuejs.org/ui-analyzer.png)
When you’re going to run npm start on your terminal. The next important part of this code is the script that was added. webpack-dev-server – Will enable use to create a localhost dev environment.webpack-cli – Allows us to use the webpack command client tool.webpack – Will allow us to bundle all of our code into a final build.react-dom – Will allow us to grab a React app and dump onto to the DOM.react – Will allow us to write React code.$ npm i -save-dev html-webpack-plugin webpack webpack-cli webpack-dev-server
How to run webpack production build install#
"įor the moment I’m going to install the minimal dependencies to get a React dev server running. That script tag will be the entry point to the React application. Later in this guide, I will tell Webpack to use this HTML file for development and to automatically inject a script tag element at the bottom of this file. This HTML has 1 simple job, and that is to serve our React app and attach it to a div element with an ID of root. Inside the public directory, I will add a file called, index.html. The public directory is responsible for holding any CSS stylesheets, image assets, and of course, your skeleton HTML markup.
![how to run webpack production build how to run webpack production build](https://res.cloudinary.com/practicaldev/image/fetch/s--aHpU7siG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/vd2g4s9qi89t29ljjti2.png)
The first step I will take is to create a directory called, public. Configure Webpack mode, entry point, and output.Setup package.json file and install dev dependencies.Create index.html file and public directory.Now that you know Webpack dev server may help you quickly develop a React application, let’s break down the steps. Webpack dev server should ONLY be used for development. Webpack dev server is also a separate package that needs to get install via NPM. The Node.js server listens to when files were changed, and triggers events to react accordingly. It uses a library called SockJS to emulate a web socket. Under the hood, Webpack dev server is a mini Node.js Express server. That way it’s easy, and fast to develop your React application.
![how to run webpack production build how to run webpack production build](https://blog.logrocket.com/wp-content/uploads/2019/01/versatile-webpack-configurations-babel-react.png)
The next step is to create a development environment with Webpack, and add hot reloading. So you wrote your entry and output point on your Webpack config file.