text: Build Better JavaScript Apps with Webpack and Poi
  Webpack is a build tool that puts all of your JavaScript files, images, fonts, and CSS, in a dependency graph. This lets you use
  require() in your source code to point to local files and decide how they can be processed in your final JavaScript bundle.
  Poi is a zero-config bundler that is built on top of Webpack. Zero-config does not indicate that there’s no configuration at all, just that a lot of things are already configured by Poi for us!
  In this post, I will show you how to set up your JavaScript app, bundle it using Webpack, and configure it using Poi!
  It is very simple to deploy a single JavaScript file using Poi. Poi can launch a dev-server and automatically render any changes made to your file.
  To begin, install Poi on your system.
  $ npm i -g poi
  Then, create a new project directory.
  $ mkdir js-app
  $ cd js-app
  Inside this directory, create an
  index.js file with the following code:
  Here, the
  document.getElementById grabs the
  div with an
  id called “app” that will be created by Poi. Inside this
  div, I have written a simple string of “Hello World”.
  To launch this file on your browser, open your terminal and run the
  poi command. Poi will handle all the webpack related stuff and launch the file on
  localhost:4000.
  If you have placed the file inside another folder like
  src, you will have to run
  poi src/index.js to launch it on the dev-server.
  Even though Poi already gives us a ready-made HTML template for our apps, we can also customize it as we like. Let’s see how we can customize the
  head of our HTML page using Poi.
  Create a new file inside your project directory called
  index.ejs and write this code inside it.
  Run the
  poi command again, and you will get a new page with a customized title. If you inspect the page in your browser’s dev tools, you will see that the
  head is also customized and the webpack is still injecting all the scripts needed.
  The above method of customizing the HTML template is fine for simple JavaScript pages, but you will soon feel the need for a better method for customization that gives more options. This is where the
  poi.config.js file comes in.
  Let’s create a
  poi.config.js file in our project directory. This file will have a
  module.exports object that we will be using in our app.
  title and
  description are common options that we can use to define the title and the description of the page. The
  template option is used to tell Poi where to export the customization options.
  I am going to use the
  index.ejs file that I had created in the previous section. Let’s keep a single
  div element in this file for now.
  <div id="app"></div>
  I am going to render the
  text and
  author options in the
  body of the page. Inside
  index.ejs file, write the following above the
  <% const {text, author} = htmlWebpackPlugin.options %>
  <h1>
  <%= text%>
  </h1>
  <ul>
  <% _.forEach(author, a => { %>
  <li>
  <%- a %>
  </li>
  <% })%>
  </ul>
  Here, I am using the template’s syntax for Underscore and Lodash to access the
  text and
  author options.
  We have changed some configurations here, so we need to re-run the
  poi command to see the changes on our page.
  Note that this should only be used to configure your project. Things like data should be left for JavaScript to handle.
  A big advantage of using Poi is that we can use it to build Vue apps without actually having to install Vue as a dependency.
  This is because the developer of Poi, who also happens to be a major contributor to Vue, has configured the defaults in Poi to work with Vue.
  Let’s delete all the files in the project directory. Create a new
  index.js file and import the Vue package here.
  import Vue from 'vue';
  import App from './App.vue';
  new Vue ({
  el: "#app",
  render: h => h(App),
  });
  In the above code snippet, I am first importing the
  App component from the
  App.vue file, then I creating a new instance of
  Vue where the element (
  el) is set to a
  div with an id of
  app. The
  render will then render this code from the
  App.vue file.
  <template>
  <h1>{{message}}</h1>
  </template>
  <script>
  export default {
  data() {
  return {
  message: 'Running Vue App with Poi!!',
  };
  },
  };
  </script>
  Re-run the
  poi command and you will now in all senses have a Vue app running!
  Note: If you receive an error saying
  "Module not found", then install the
  Vue package in your project.
  Developing React apps is also very easy in Poi. All we need to do is install the
  react and
  react-dom packages and configure Babel to expect React packages.
  First, install
  react and
  react-dom in your project.
  $ yarn add react react-dom
  Prior to configuring Babel, we need to install a couple of developer dependencies.
  $ yarn add babel-preset-react-app babel-plugin-react-require -D
  Next, create a new file called
  .babelrc and write the following in it:
  {
  "presets": ["react-app"],
  "plugins": ["react-require"]
  }
  With that you are now ready to write React apps!
  Importing CSS styles in a React App built using Poi is simple. Create a
  .css file in your project directory and write an import statement in your
  .js file.
  But if you are creating your styles in a
  .scss file, you will have to install a couple of dependencies.
  Open your terminal and install
  node-sass and
  sass-loader using NPM/Yarn:
  $ yarn add node-sass sass-loader
  // or
  $ npm i node-sass sass-loader
  Once it is installed, re-run the
  poi command, and you will now see the styles loaded into your React app!
  Poi is really great. It lets you ship a lot of webpack loaders without the need for any customizations or configurations.
  But Poi cannot do this for all the webpack loaders out there. Let’s see how we can handle this issue by adding
  react-markdown-loader to Poi in order to load Markdown files as React components.
  Create a new file named
  page.md in your project directory. Inside this file, write whatever content you want using the usual markdown format.
  In order to enable Poi to work with the Markdown file, we need to add the appropriate loader.
  In the
  poi.config.js file’s
  module.exports object, write the
  webpack property as shown below:
  module.exports = {
  webpack(config){
  config.module.rules.push({
  test: /.md$/,
  loaders: [
  "babel-loader",
  "react-markdown-loader"
  ]
  })
  return config
  }
  }
  Also, make sure that you have installed the
  react-markdown-loader in your project.
  With that taken care of, import the Markdown page in your
  index.js file and call it as a React component in your render method.
  import {render} from 'react-dom'
  import Page from './page.md'
  render(<Page />, document.getElementById("app"));
  Re-run the
  poi command, and you will now see the Markdown file load on in the browser page.
  To build your JavaScript project with Poi, just run the command
  poi build in your terminal and you will instantly get a
  dist folder in your project directory.
  You can then launch this
  dist folder with the command
  http-server dist. This command will then launch the project on
  localhost:8080.
  To analyze your project, first install a developer dependency called
  webpack-bundle-analyzer.
  yarn add webpack-bundle-analyzer -D
  Then you need to add it to your
  poi.config.js file, as shown below:
  The
  options parameter allows us to hide the
  analyze function behind the
  options.analyze flag. So, only if we run the
  poi build --analyze command, Poi will run the
  BundleAnalyzer plugin and launch it.
  As mentioned before, Poi comes with a built-in Vue preset. But Poi also gives us some other presets that we can use to install popular libraries like Elm, React, Storybook, TypeScript and many more.
  To install a
  poi-preset in your project, run the following command from your terminal.
  $ yarn add @poi/plugin-<libary-name> --dev
  So if you want to install Elm in your project, you will type
  yarn add @poi/plugin-elm — dev
  You can then install
  elm in your project as well. But you can skip this if you have installed it globally on your system.
  To use this plugin, go to
  poi.config.js and write the following code:
  module.exports = {
  plugins: [
  require('@poi/plugin-elm')(options)
  ]
  }
  To know how to use other
  poi-presets, check out:
  Webpack will be extremely helpful if you are building an app that has a lot of non-code static assets.
  Other build tools like Grunt and Gulp, on the other hand, have no concept of dependency graphs.
  There are many pros why Webpack can be a good fit for your project. Webpack has been so helpful that it is widely used in the React community.
  And the fact that Poi provides us a “configuration-free” way of launching JavaScript projects makes things even more awesome for us!