Vuejs, Vuex, Webpack, Karma, Mocha

I just wanna shout out to the creators and maintainers of all these amazing tools, you’re amazing at your craft. fuck facebook.

I finally found a group of technologies that I enjoy building with, again, fuck facebook, react, jest.

Vuejs

The following command will init a project template for you with webpack. You’ll get a host of options here. I choose Karma and Mocha over Jest because fuck facebook and AirBnb linting because it had way more stars on Github

$ vue init webpack <projectname>

Webpack and Vuejs

I got into this huge rabbit hole, a good rabbit hole of Code Splitting. Basically, you can use Vuejs to lazily load Components, the javascript will only load if your user actually uses this piece of code. So anything behind pages can be lazily loaded and hopefully that reduces load times.

Lazy Loading with Vuejs and Webpack

MonthlyPaymentGraph is imported via standard. MonthlyPaymentInputs is lazily loaded.

import MonthlyPaymentGraph from './components/MonthlyPaymentGraph';

export default {
  name: 'App',
  components: {
    MonthlyPaymentInputs: () => import(/* webpackChunkName: "monthlyPaymentCalculator" */ './components/MonthlyPaymentInputs'),
    MonthlyPaymentGraph,
  },
}

In your webpack.conf.js you’ll need some special stuff.

entry: {
  'monthlyPaymentCalculator/monthlyPaymentCalculator': './src/main.js'
},
output: {
  path: path.resolve(__dirname, '../dist/'),
  filename: utils.assetsPath('[name].[chunkhash].js'),
  chunkFilename: utils.assetsPath('[name]/[id].[chunkhash].js')
},

Multiple Bundle Outputs with Webpack

For my purposes on my project, I need multiple single file outputs. Essentially create stand-alone projects within a single project. Some parts may be re-used, that’s not a bad idea really.

entry: {
  'monthlyPaymentCalculator/monthlyPaymentCalculator': './src/monthlyPaymentCalculator/main.js',
  'affordabilityCalculator/affordabilityCalculator': './src/affordabilityCalculator/main.js'
},
output: {
  path: './dist/',
  filename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production'
    ? config.build.assetsPublicPath
    : config.dev.assetsPublicPath
},

Post Content