【译】使用 Webpack 和 Poi 构建更好的 JavaScript 应用
译者注：最近看到 Poi 这个也是打着零配置特点（Parcel：莫名躺枪？）的 JavaScript 打包工具，发现其在 Github 有着 3000+ Star 的同时在中文世界里热度却较低，因此在 Medium 上找了一篇文章翻译过来，方便大家了解之。
原文地址：https://blog.bitsrc.io/build-better-javascript-apps-with-webpack-and-poi-d888d75b1440
Webpack 是一个将你所有的 JavaScript 文件，图片、字库以及 CSS 等打包到一个依赖关系图的构建工具。这使得你可以在源码中使用 require() 来引用本地文件并且决定在最终的 JavaScript 包中如何处理这些本地文件代码。
Poi 是一个零配置的基于 Webpack 的打包器。零配置并不是指项目完全不需要配置，而是 Poi 已经为我们配置好了大量内容。
本文将展示如何构建你的 JavaScript 应用，如何用 Webpack 进行打包以及用 Poi 进行配置。
使用 Poi 启动一个简单的 JavaScript 文件
使用 Poi 部署一个 JavaScript 单文件非常简单。Poi 能够启动一个开发服务器并且能够在文件发生变化时自动重载页面。
首先，在系统中安装 Poi。
$ npm i -g poi
然后，新建一个项目目录。
$ mkdir js-app $ cd js-app
在该目录下新建 index.js 文件：
document.getElementById ('app').innerHTML = `
<h1>Hello world!</h1>
`;这里 document.getElementById 获取 id 名为“app”的 div,其将由 Poi 创建。在该 div 内部是一句简单的“Hello World”。
为了在浏览器中启动该文件，打开终端并且执行命令 poi。Poi 将处理所有 webpack 相关的东西并且在 localhost:4000 上部署该文件。
如果你将 index.js 放置在其他文件夹，比如 src，那你需要执行命令 poi src/index.js 来在开发服务器上启动该文件。
使用 Poi 定制 HTML 模板
尽管 Poi 为我们的应用提供了现成的 HTML 模板，我们仍然可以按照自己的喜欢定制它。下面将展示如何使用 Poi 定制 HTML 页面中的 head 标签。
在项目目录中新建一个名为 index.ejs 的新文件，其代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Running JavaScript Apps with POI</title>
</head>
<body>
<div id="app"></app>
</body>
</html>再次执行命令 poi 将会得到一个标题更新了的新页面。如果你用浏览器开发工具检查页面，可以看到 head 标签也经过了定制化，同时 webpack 仍然将所有脚本注入了页面。
使用 poi.config.js 配置 Poi
上面配置 HTML 模板的方法对简单的 JavaScript 页面来说还比较好用，但是很快你就会需要一个能够配置更多选项的方法。这时候就可以介绍 poi.config.js 了。
首先在项目目录下新建 poi.config.js 文件。其使用 module.exports 导出一个配置对象：
module.exports = {
html: {
title: 'Running JavaScript Apps with Poi',
description: 'Customize how to render the main template using configuration settings.',
template: './index.ejs',
text: 'Running JavaScript Apps with Poi',
author: ['Rajat'],
},
};·title 和 description 用于定义页面的标题的描述内容。template 选项用来告诉 Poi 将定制选项导出到哪里。
这里将使用上一节已经创建的 index.ejs 文件。现在将其内容修改为只包含一个 div 元素：
<div id="app"></div>
我们需要在页面 body 中渲染 text 和 author 选项。在 index.ejs 内输入以下代码：
<% const {text, author} = htmlWebpackPlugin.options %>
<h1>
<%= text%>
</h1>
<ul>
<% _.forEach(author, a => { %>
<li>
<%- a %>
</li>
<% })%>
</ul>这里我们在模板中使用了 Underscore 和 Lodash 来获取 text 和 author 选项。
我们修改了配置，因此需要重新执行命令 poi 来查看页面的变化。
注意这应该只被用来配置你的项目。数据之类的东西应该留给 JavaScript 来处理。
使用 Poi 构建 Vue 应用
Poi 的一大优势在于我们可以在不必安装 Vue 作为依赖的情况下用它来构建 Vue 应用。
这是由于 Poi 的开发者同时也是 Vue 的核心开发者之一，因此 Poi 默认已配置好可与 Vue 共同使用。
删除项目目录中的所有文件。创建一个新的 index.js 文件并且引入 Vue 包。
import Vue from 'vue';
import App from './App.vue';
new Vue ({
el: "#app",
render: h => h(App),
});上面的代码片段中，我们从 App.vue 文件中引入了 App 组件，然后创建了 Vue 的一个实例并且挂载到 id 为 App 的 div 元素上。render 函数将渲染 App.vue 文件中的代码：
<template>
<h1>{{message}}</h1>
</template>
<script>
export default {
data() {
return {
message: 'Running Vue App with Poi!!',
};
},
};
</script>重新执行命令 poi 然后你将看到一个完整的 Vue 应用在运行！
注意：如遇到“模块未发现”的错误提示，则在项目中安装 Vue 依赖。
使用 Poi 构建 React 应用
使用 Poi 构建 React 同样非常简单。我们所需要做的就是安装 react 和 react-dom 包，以及配置 Babel 来处理代码。
首先，在项目中安装 react 和 react-dom。
$ yarn add react react-dom
在配置 Babel 之前，我们需要安装一些开发依赖。
$ yarn add babel-preset-react-app babel-plugin-react-require -D
然后创建名为 .babelrc 的文件，内容如下：
{
"presets": ["react-app"],
"plugins": ["react-require"]
}现在，你就可以编写你的 React 应用了！
在 Poi 中编译样式
在使用 Poi 构建的 React 应用中引入 CSS 样式十分简单。在项目目录下创建一个 .css 文件然后在 .js 文件中编写引入声明即可。
但是如果使用 .scss 文件来创建样式，那么就需要安装一些依赖。
打开终端然后使用 NPM/Yarn 安装 node-sass 和 sass-loader：
$ yarn add node-sass sass-loader // or $ npm i node-sass sass-loader
安装完毕后，重新执行命令 poi，可以看到样式已经加载到 React 应用中！
手动添加 Webpack Loader
Poi 是真的牛。它让你不用再进行任何定制化或者配置就能使用大量的 webpack loader。
当然，Poi 也无法覆盖到所有 webpack loader。下面的例子展示了通过添加 react-markdown-loader 到 Poi 可以将 Markdown 文件加载为 React 组件。我们可以通过这个例子来看看如何手动添加 Webpack loader。
在项目目录下创建名为 page.md 的新文件并在该文件中随意书写 markdown 格式的内容。
为了使 Poi 能够处理 markdown 文件，我们需要添加合适的 loader。
在 poi.config.js 中添加 webpack 属性，如下所示：
module.exports = {
webpack(config){
config.module.rules.push({
test: /\.md$/,
loaders: [
"babel-loader",
"react-markdown-loader"
]
})
return config
}
}当然，确保你已经在项目中安装 react-markdown-loader。
经过以上处理后，在 index.js 中引入 markdown 页面并且在渲染函数中将其以 React 组件的形式调用。
import {render} from 'react-dom'
import Page from './page.md'
render(<Page />, document.getElementById("app"));重新执行命令 poi，markdown 文件将正常在浏览器算加载。
使用 Poi 构建 JavaScript 包
如要使用 Poi 打包 JavaScript 项目，只需在终端中执行命令 poi build，即可在项目目录中得到 dist文件夹。
你可以使用命令 http-server dist 启动 dist 文件夹。改命令将在 localhost:8080 上启动项目。
如需分析你的项目，首先安装开发依赖 webpack-bundle-analyzer：
yarn add webpack-bundle-analyzer -D
然后将其加入到 poi.config.js，如下所示：
const BundleAnalyzer = require("webpack-bundle-analyzer").BundleAnalyzerPlugin
module.exports = options => ({
webpack (config) {
if(options.analyze){
config.plugins.push(
new BundleAnalyzer()
)
}
config.module.rules.push ({
test: /\.md$/,
loaders: ['babel-loader', 'react-markdown-loader'],
});
return config;
},
})options 参数使得 analyze 函数可通过 options.analyze 来配置是否使用。因此，只有执行命令 poi build --analyze，Poi 才会执行 BundleAnalyzer 插件。
使用 Poi Presets 来跳过配置
之前提到，Poi 内置了 Vue 预设配置。除此之外，Poi 还提供了其他一些预设配置来让我们安装一些流行的库，比如 Elm，React，Storybook，TypeScript 等。
在终端中执行以下命令来在项目中安装 poi-preset：
$ yarn add @poi/plugin-<libary-name> --dev
所以如果你想在项目中安装 Elm，需要输入的命令是 yarn add @poi/plugin-elm --dev。
使用该插件需要在 poi.config.js 中编写以下代码：
module.exports = {
plugins: [
require('@poi/plugin-elm')(options)
]
}想要了解如何使用其他 poi-presets，查阅 https://github.com/egoist/poi/tree/master/packages 即可。
总结
如果你正在构建的应用具有许多非代码类的静态资源，Webpack 能提供很大帮助。
另一方面，其他打包工具比如 Grunt 和 Gulp，并没有依赖关系图的概念。
Webpack 具有很多的优点，因此它可能是你的项目的绝佳选择。其在 React 社区也得到了广泛的使用。
而 Poi 为我们提供了一种 “自由配置” 的方式来启动 JavaScript 项目，这简直就是锦上添花了！