[Vuejs]-Putting all the pieces together with webpack

by

1👍

✅

For me it was easier to dig into webpack bit by bit.

Minimal setup for webpack (just bundling multiple files into one) would be look like that:

const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  output: {
    path: 'dist',
    filename: 'bundle.js'
  }
};

On top of that config you can build up additional functionality one step at a time using loaders.

Loader is basically a thing that reads file content and transforms it in some way. It can be a babel-loader that transpiles ES6 to ECMAScript 5 or an base64-loader that present file content as a base64 string.

You can pick and choose from a whole list of modules. Each one has a github repository with a readme file that contains examples of usage.

To sum up, it is really crucial to get the idea of how webpack works, how it config is structured, what are loaders and plugins. Webpack’s docs is a great place to start.

It would be much harder to copy-paste a huge config and try to guess which parts of it are useful.

Leave a comment