Setup a Webpack Production Configuration
We have been using the Webpack-Dev-Server during each lesson so far.
The Webpack-Dev-Server is dynamically generating a
bundle.js at runtime for us that is also running in HMR mode.
bundle.js is generated fast and we can preview it right away in the browser, but it is very large in comparison to a production specific version of
We will use Webpack to generate the production specific version of
The production build won't include the extra code used by the HMR option since we won't be developing directly in our production environment.
Now, while the production version of
bundle.js is much smaller, it does take quite a lot longer to generate, so it is not as beneficial to use in development since you will need to wait some extra time between each change before you can preview it.
The production version of
bundle.js will also be saved as a new file directly to the file system, so then we can copy it manually later to our own production web servers.
Copy this webpack production config to
1 2 3 4 5 6 7 8 9
After copying this above file, open
./package.json and then add the highlighted line below to the
"build": "webpack --config ./src/client/webpack.prod.js",
"dev": "webpack serve --config ./src/client/webpack.dev.js",
"test": "echo \"Error: no test specified\" && exit 1"
Now open a terminal and enter
npm run build
This will generate a file named
bundle.js and save it to the
If we start the Webpack-Dev-Server again using
npm run dev, then we still won't see the production version of
Instead, we can use a package called
npm install --global http-server
Now start it indicating the client root folder.
And visit http://127.0.0.1:8080 in your browser.