一、基础案例

src/heading.js

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

src/index.js

import create from "./heading";
const heading = create();
document.body.append(heading);

**
我们这里利用了两个零散文件协作来创建一个h2标签，下面我们将利用webpack把它们打包成一个文件。

安装 Webpack
**
由于 Webpack 是一个 npm 工具模块，所以我们先初始化一个 package.json 文件，用来管理 npm 依赖版本，完成之后，再来安装 Webpack 的核心模块以及它的 CLI 模块，具体操作如下：

npm init --yes
npm i webpack webpack-cli --save-dev

运行命令打包js模块文件

npx webpack

运行结果**

PS G:\labs\webpack\webpack-study\1.base> npx webpack
asset main.js 599 bytes [emitted] [minimized] (name: main)
runtime modules 663 bytes 3 modules
cacheable modules 332 bytes
  ./src/index.js 90 bytes [built] [code generated]
  ./src/heading.js 242 bytes [built] [code generated]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
webpack 5.24.4 compiled with 1 warning in 469 ms

这个命令在执行的过程中，Webpack 会自动从 src/index.js 文件开始打包，然后根据代码中的模块导入操作，自动将所有用到的模块代码打包到一起。

完成之后，控制台会提示：顺着 index.js 有两个 JS 文件被打包到了一起。与之对应的就是项目的根目录下多出了一个 dist 目录，我们的打包结果就存放在这个目录下的 main.js 文件中。

在index.html中引入打包文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Webpack </title>
</head>

<body>
  <script src="dist/main.js"></script>
</body>
</html>

对于 Webpack 最基本的使用，总结下来就是：先安装 webpack 相关的 npm 包，然后使用 webpack-cli 所提供的命令行工具进行打包。
**
以上是最简单的webpack打包。下面学习配置打包文件。

二、配置webpack的打包过程

enter属性

默认的情况下： Webpack 4 以后的版本支持零配置的方式直接启动打包，整个过程会按照约定将 src/index.js 作为打包入口，最终打包的结果会存放到 dist/main.js 中。

但很多时候我们需要自定义这些路径约定，例如，在下面这个案例中，我需要它的打包入口是 src/main.js，那此时我们通过配置文件的方式修改 Webpack 的默认配置，在项目的根目录下添加一个 webpack.config.js

webpack.config.js是一个运行在 Node.js 环境中的 JS 文件，也就是说我们需要按照 CommonJS 的方式编写代码，这个文件可以导出一个对象，我们可以通过所导出对象的属性完成相应的配置选项。

这里先尝试添加一个entry属性，这个属性的作用就是指定 Webpack打包的入口文件路径。我们将其设置为 src/main.js，具体代码如下所示：

module.exports = {
  entry: './src/main.js'
}

配置完成之后，回到命令行终端重新运行打包命令，此时 Webpack 就会从 src/main.js 文件开始打包。

output属性

我们还可以通过 output 属性设置输出文件的位置。output 属性的值必须是一个对象，通过这个对象的 filename 指定输出文件的文件名称，path 指定输出的目录，具体代码如下所示：

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'output')
  }
}

4.Webpack 工作模式
Webpack 4 新增了一个工作模式的用法，这种用法大大简化了 Webpack 配置的复杂程度。你可以把它理解为针对不同环境的几组预设配置：

production 模式下，启动内置优化插件，自动优化打包结果，打包速度偏慢；
development 模式下，自动优化打包速度，添加一些调试过程中的辅助插件；
none 模式下，运行最原始的打包，不做任何额外处理。

针对工作模式的选项，如果你没有配置一个明确的值，打包过程中命令行终端会打印一个对应的配置警告。在这种情况下 Webpack 将默认使用 production 模式去工作。

production 模式下 Webpack 内部会自动启动一些优化插件，例如，自动压缩打包后的代码。这对实际生产环境是非常友好的，但是打包的结果就无法阅读了。

修改 Webpack 工作模式的方式有两种：

通过 CLI —mode 参数传入；

通过配置文件设置 mode 属性。

入口与输出

一、基础案例

二、配置webpack的打包过程

enter属性

output属性