如何使用Webpack打包Java代码

什么是Webpack？

Webpack是JavaScript和HTML应用程序的模块捆绑器。 它抓取在文件夹中分隔的模块化代码段。 随后将它们重构为编译形式。 然后，应用程序将其整体读取。 您必须在想：“为什么要破坏有效的代码？” 随着代码的扩展，其复杂性也会随之增加。 在每个块之间找到相关性成为一个挑战。

因此，Webpack被认为具有以下优点：

• 关注点分离-代码可以按功能（即逻辑，DOM）进行拆分。
• 拆分JS文件可以加载单独的文件，而不是在首页命中时加载整个文件。
• 将Babel从ES6移植到ES5，而无需担心是否支持较旧的浏览器。
• 重新运行捆绑，因为它会检测到已保存的更改。 处理模块更换和/或更改。

就是说，弄清楚打包内容对于初学者来说可能是艰巨的。 从Webpack开始就像是一个动荡的一天。 尤其要确定要分类，包装和以哪种顺序包装的物品。 盘子和碗必须作为易碎物品装在装有泡沫的盒子中，并放在顶堆上以防止破裂。 书籍和杂志可以从下往上堆积在盒子中，因为它们可以承受最大的重量。 经验法则是不要将不同类别的项目混入一个盒子中。 否则，您将难以跟踪特定事物的下落。 同样，先解开书本而不先解开书架会很不方便。

本文假定读者具有Webpack设置的先验知识。 并用作分割JS文件的指南。 否则，请在此处和此处查看教程。

根据您的JS应用程序，您可以按功能拆分文件。 就我而言，“ 待办事项”应用程序分为以下几种方式：

• 事件监听器-单击按钮会将用户输入发送到后端
• 用户输入-从用户那里收到的数据
• 控制-应用逻辑DOM-HTML输出
• 入门-默认条目
• 构造函数-用于新对象
• 本地存储-存储新条目和编辑条目

下图显示了JS文件除以关注点。 当新的眼睛试图解释代码或遵循路径时，它消除了混乱。

下面的流程图说明了函数的调用流程；

在上方，您将看到从开始函数到最后一个函数的线性，因为拆分文件的线性也应类似。 分割文件后，下一步是将其导出并导入为模块。 分割从结尾到开头开始，而不是从中间开始，以免丢失曲目。

对于最后一个文件夹中的单独功能，请使用导出和导入默认方法，如下所示；

./src/DOM/TaskDOM.js

export default function renderTaskCard ( )  {
.
.
}

.src/control/taskControl.js 

import renderTaskCard from '../DOM/taskDOM' ;
.
.

Eslint允许使用ES5导出功能。 ES6的“ export default renderTaskCard（）{.... ”显示为棉绒，未定义var错误，因为未将renderTaskCard（）分配给变量。

下图说明了几种功能的导出和导入；

.src/DOM/taskDOM.js

export const renderTaskCard = () => {
.
.
}

export const closeTaskForm = () => {
.
.
}

import { renderTaskCard, closeTaskForm } from '../DOM/taskDOM' ;

.
.

函数名称用大括号括起来，作为函数导入的声明。 但是我们如何知道需要什么进出口呢？ 简单，确定正在调用的函数。

.src/control/taskControl.js

import { renderTaskCard, closeTaskForm } from '../DOM/taskDOM' ;


export const addTaskToProject = ( .. ) => {
  .
  .
  .
    renderTaskCard(..);
    closeTaskForm();
  }
};

renderTaskCard和closeTaskForm正在从addTaskToProject在taskControl调用。 因此，通过声明taskDOM中两个函数的导入来挂钩它们。

然后在下面的收件人文件中导出函数；

./src/DOM/taskDOM

export const renderTaskCard = () => {
.
.
}

export const closeTaskForm = () => {
.
.
}

导入和导出的工作一直进行到所有事件侦听器都存放在index.js为止。

综上所述;

• 按功能或功能类型拆分文件。
• 在调用函数的地方，必须声明目标函数的导入。
• 然后导出目标函数以进行文件链接和捆绑。

From: https://hackernoon.com/how-to-pack-javascript-code-with-webpack-hn4y3y1g