Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1
Organize + Automate + Deploy = Webpack Chapter 16

Using only one command to build both a


minified and a development .js file


While working on the release of your components, you may need a reliable process to issue


your built files. A common operation is to release two versions of a library/component: one
for development purposes and one to be consumed in production code, usually minified. In


this recipe, you will tweak the official template to release both a minified and a
development JavaScript file at the same time.


Getting ready


This recipe makes sense if you are already building and distributing your own components.


If you want to learn more, I suggest you refer to the Bundling your component with


Webpack recipe.


How to do it...


We'll start with a project with the official Webpack template. You can use your own, or you


can spin up a new project with vue init webpack and install the dependencies with npm


isntall.


Go inside the build directory. When you launch the npm run build command, you are


effectively launching the build.js file in this directory.


If you examine the file, you will find something like this near the end:


webpack(webpackConfig, function (err, stats) {
...
})

This is equivalent to launching Webpack from the command line using the same


configuration specified in the first argument, webpackConfig. To have a minified and non-


minified file, we have to bring the webpackConfig to a common denominator, then we


will specify only the differences between the development and production versions of the


files.


To do this, go inside webpack.prod.conf.js in the same directory. Here, you can see the


configuration we are passing; in particular, you will find UglifyJsPlugin, which is


responsible for minifying the file if you look at the plugin array. Remove the plugin since it


represents the main difference between the two distributions.

Free download pdf