![]() ![]() 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') 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 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. In this guide, we'll dive into some of the best practices and utilities for building a production site or application. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |