Webpack -env dev -progress -profile -colors
"build:prod": "webpack -env prod -progress -profile -colors", "build:dev": "webpack -env dev -progress -profile -colors", json, you can add scripts that include the correct syntax, so you can quickly type a command without having to remember all the arguments. The prod config can have additional plugins specified, like uglify which will compress and minify your js. In this case, our config function will look for an environment specific config file, such as: Once we have access to the environment variable, we can add logic to our config based on it. Now we can specify the environment when we run Webpack through the command line. This function accepts the environment as a parameter and returns a config object. However, in order to use the env variable, we set module.exports to a function. The module.exports value, in a simple Webpack config file, is usually set to a config object.
In the rest of this post I’ll run through how to configure Webpack to manage builds from separate config files. This way your production build is light and lean while your development build contains all the tools and local settings you need to work. Webpack also accepts an “environment” variable that can be used to compile distinct application builds from entirely separate config files. You may be familiar with “bundling”, which packages your separate javascript files and dependencies into a single file. Webpack is an increasingly popular javascript bundler with a suite of features particularly well-suited for working with Vue and React. Second, test data: your development environment will likely include mock data that you don’t want in production output.
Left unmanaged, code bloat can cause significant performance issues in production. The Problemįirst, unnecessary bloat: libraries, such as Vue and React, have built-in debugging tools that are essential for development but add extraneous code to a live application. development, test and production with only the code and data specifically needed for each. Webpack makes it easy to deploy multiple environments i.e. One feature I really like is the ability to easily configure separate builds based on environment variables. It’s a powerful javascript bundler that compiles all of your assets into small, production ready files. In and you’ve done any javascript application development recently, you’ve probably come across Webpack. In order to merge the base config into the others, you'll need webpack-merge. In your dev and prod config files, only include the rules that apply to that environment. In this file, set up your webpack config with all the rules that apply to both development and production. If you find that a lot of your configuration is duplicated between the two, you could create a fourth file called or similar. Now you can run webpack -env=dev or webpack -env=prod to run the respective webpack configs. In you may want to run a dev server and inline all your styles, while in you may want to extract your styles to a CSS file, uglify your JS, and deploy your build directory to a server. Next, populate your dev and prod config files as you normally would your. Now the webpack command will take an argument env, which tells it which config file to use.
Enter fullscreen mode Exit fullscreen mode