Run npx webpack -help=verbose for a full list of CLI arguments. For example, optimization.minimize can be set with -optimization-minimize, and mode can be set with -mode. Many of the options described above can be set as command line arguments. Please see the Minimizing for Production section. It is crucial to minimize your CSS for production. + const = require('webpack-merge') Ĭonst common = require('./') Īvoid inline-*** and eval-*** use in production as they can increase bundle size and reduce the overall performance. + const HtmlWebpackPlugin = require('html-webpack-plugin')
#Npm build webpack install
Let's start by installing webpack-merge and splitting out the bits we've already worked on in previous guides: npm install -save-dev webpack-merge
#Npm build webpack code
With the "common" configuration in place, we won't have to duplicate code within the environment-specific configurations. In order to merge these configurations together, we'll use a utility called webpack-merge. While we will separate the production and development specific bits out, note that we'll still maintain a "common" configuration to keep things DRY. With this logical separation at hand, we typically recommend writing separate webpack configurations for each environment. In production, our goals shift to a focus on minified bundles, lighter weight source maps, and optimized assets to improve load time. In development, we want strong source mapping and a localhost server with live reloading or hot module replacement. The goals of development and production builds differ greatly. Please ensure you are familiar with the concepts/setup introduced in those guides before continuing on. This walkthrough stems from Tree Shaking and Development. My preference goes to the third approach described above, because of the better readability and following a well known convention.In this guide, we'll dive into some of the best practices and utilities for building a production site or application. This is expected, however imagine you have everything under dependencies or everything under devDependencies - it becomes much harder to tell what vulnerability you're actually shipping with your code. One example that comes to mind is checking your web app for security vulnerabilities with a tool like Snyk: running snyk test will by default only look under dependencies, not reporting any vulnerabilities in devDependencies. This comes with the added benefit of better integration with other tools, since it follows a well known convention. This is useful to communicate to other devs the intention of each dependency - whether it's a dev tool or a library for production. This approach acknowledges that where you place the dependencies doesn't matter for the final bundle, but follows the Node convention anyway for better readability. This is useful since your build will work in CI even if you set the env to production: NODE_ENV=production npm install # Skips devDependencies #3 Separating them into devDependencies and dependencies, even if they're not used per se Thus, everything the app needs to build the final bundle is a dependency - including Webpack, babel etc. This approach sees the web application itself as a "builder" application for the final app. #2 Putting all dependencies under "dependencies" This is how VueJs and React specify their dependencies. Thus, all dependencies are devDependencies.
This approach considers that since your production app (aka the bundle you built with Webpack) can just run by itself, it means you have no production dependencies. #1 Putting all dependencies under "devDependencies" So what do you do? Can you just put your dependencies anywhere? Well, yes :) When using Webpack to bundle your application for production, where you put your dependencies in package.json doesn't matter - as Webpack will simply follow all import statements, starting with the entryPoint.