Saturday, 23 December, 2017 UTC


Webpack has become the most used tool for building web apps. But, how many times have you had to configure again and again a similar webpack config? Installing and setting up loaders, plugins, presets… Vue CLI or Create React App came to the stage to improve that by scaffolding that config for you, but still, lot’s of setup and tooling. Poi comes in to change that into a delightful developer experience.
Poi is a higher level tool that uses webpack under the hood. By default, it comes with a bunch of presets and plugins already pre-configured for most common cases. Extra configurations can be done using a poi.config.js file. The underlining webpack config can also be mutated from the Poi config file.
It prepares for you a development setup with Hot Module Replacement and a dev server, and a production setup optimized for fast load and performance by minifying and mangling the code, producing optimized bundles, applying caching patterns and more.
Creating A Vue App
Poi has built-in support for Vue, so we don’t have to do much to achieve what’s mentioned above. First, let’s install it locally with our project:
$ npm install -D poi # or, using Yarn $ yarn add poi --dev 
Then create a simple index.js file with a minimal Vue app:
import Vue from "vue"; new Vue({ el: "#app", render: h => h("div", "Hello cayman") }); 
We need to create two scripts in the package.json: one for developing the app and the other for building it:
{ "scripts": { "start": "poi index.js", "build": "poi build index.js" } } 
And that’s all, for real. If you go and run:
$ npm start 
Open the browser at http://localhost:4000/ and you’ll see Hello cayman \o/.
Single File Components and JSX
Poi comes with vue-loader and babel-plugin-transform-vue-jsx as well, so you can use the syntax you’d like.
For example, you could write the previous example using JSX:
import Vue from "vue"; new Vue({ el: "#app", render: () => (<div>Hello cayman</div>) }); 
To try it with a single file component, create an App.vue component:
<template> <div> Hello {{cayman}} </div> </template> <script> export default { data() { return { msg: 'cayman' } } } </script> 
Update index.js to use it:
import Vue from "vue"; import App from "./App"; new Vue({ el: "#app", render: h => h(App) }); 
Everything should be still working.
Wrapping Up
Poi gives you a very pleasant developer experience when developing a Vue.js app by setting up the development and production environments. It can be used for other frameworks like React with little extra configuration.