Organize + Automate + Deploy = Webpack Chapter 16What it does originally is, it creates a series of output files inside a js directory. There are
variables in square parentheses; we won't need them because you only have one self-
contained module for our application, which we'll call shaker. We need to obtain the
following code:
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('shaker.js')
}Since, as just said, you want the component to be self-contained, we need some more
modifications, which will also depend on your needs.
If you want the component to have any CSS styling built-in (we have none in our case as
we are using an external CSS library), you should disable the ExtractTextPlugin; we
already deleted the plugin from the list but some other files are still using it. Find the
extract option inside the vue-loader.conf.js file (the vue section of the same file in
some versions) and replace it with the following code:
... {
loaders: utils.cssLoaders({
...
extract: false
})
}Our component will normally contain the Vue library inside; if you want to use the
component in a Vue project, you don't need this, as it would be duplicated code. You can
tell Webpack to just search for dependencies externally and not include them. Add the
following property in the webpack.prod.js file you just modified before plugins:
externals: {
'vue': 'Vue'
}This will tell Webpack not to write the Vue library into the bundle but to just take a global,
named Vue, and use it wherever the vue dependency is imported in our code. The
Webpack configuration is almost done; we just need to add another property before the
module property:
var webpackConfig = merge(baseWebpackConfig, {
entry: {
app: './src/dist.js'
},
module: {
...