如何使用webpack实现模块化打包？

1.webpack的作用

• Webpack 作为一个模块打包工具，本身就可以解决模块化代码打包的问题，将零散的 JavaScript 代码打包到一个 JS 文件中。

• 对于有环境兼容问题的代码，Webpack 可以在打包过程中通过 Loader 机制对其实现编译转换，然后再进行打包。

• 对于不同类型的前端模块类型，Webpack 支持在 JavaScript 中以模块化的方式载入任意类型的资源文件，例如，我们可以通过 Webpack 实现在 JavaScript 中加载 CSS 文件，被加载的 CSS 文件将会通过 style 标签的方式工作。

• Webpack 还具备代码拆分的能力，它能够将应用中所有的模块按照我们的需要分块打包。这样一来，就不用担心全部代码打包到一起，产生单个文件过大，导致加载慢的问题。我们可以把应用初次加载所必需的模块打包到一起，其他的模块再单独打包，等到应用工作过程中实际需要用到某个模块，再异步加载该模块，实现增量加载，或者叫作渐进式加载，非常适合现代化的大型 Web 应用。

2.最基本的小案例

2.1生成案例结构

我们创建一个文件结构目录：

└─ 文件夹
   ├── src
   │   ├── www.js
   │   └── index.js
   └── index.html

www.js:

function create() {
   
  const element = document.createElement("h2");
  element.textContent = "你好 webpack";
  element.addEventListener("click", () => {
   
    alert("Hello Webpack");
  });
  return element;
}

module.exports = create