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

Organize + Automate + Deploy = Webpack Chapter 16

To try it, you can find the instructions in your own README, how cool is that?

How it works...

The vue-share-components is simpler than the official template, so it's a good way to

learn by examining it.

The first thing we can take a look at is the package.json file. The following lines are

relevant:

...

"main": "dist/joke-button.common.js",

"unpkg": "dist/joke-button.browser.js",

"module": "index.js",

"scripts": {

"dev": "cross-env NODE_ENV=development webpack --config

config/webpack.config.dev.js --progress --watch",

"build": "npm run build:browser && npm run build:common",

"build:browser": "cross-env NODE_ENV=production webpack --config

config/webpack.config.browser.js --progress --hide-modules",

"build:common": "cross-env NODE_ENV=production webpack --config

config/webpack.config.common.js --progress --hide-modules",

"prepublish": "npm run build"

},

...

The main property is what we actually get when we write the following command in our

programs:

import JokeButton from 'JokeButton'

Alternatively, we get it when we add the following code:

var JokeButton = require("JokeButton")

So, the JokeButton variable will actually contain what is exported in our joke-

button.common.js.