Organize + Automate + Deploy = Webpack Chapter 16You can edit the main property of package.json to point directly to a
.vue component. This way, you give the user the responsibility to
compile the component. While this is more work for the user, it also helps
when one wants the freedom to compile against the most recent version of
Vue.
In the latter case, if you have some logic of your component exported in
external.js files (like in the first recipe of this chapter), always
remember to add the directory in the Webpack rules, like so:
{
test: /.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'),
resolve('node_modules/myComponent')]
},The unpkg is particular of unpkg.com, which is a CDN. This is very nice because as soon as
we publish our project, we will have our script published at https://unpkg.com/joke-
button, and it will point to the joke-button.browser.js file that is suited for the
browser.
The prepublish script is a special script that will be called before publishing the project to
npm with the npm publish command. This eliminates the possibility that you forget to
build the files before publishing your component (it happened to me many times, so I was
forced to increase the version of the software artificially, build the files manually, and
publish again).
Another interesting fact to note is the difference between webpack.config.common.js,
which outputs the joke-button.common.js file, and webpack.config.browser.js,
which outputs the joke-button.browser.js file.
The first file has the output set to the following:
output: {
path: './dist',
filename: outputFile + '.common.js',
libraryTarget: 'commonjs2',
},
target: 'node',