Organize + Automate + Deploy = Webpack Chapter 16Using 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.