一个简单的 demo | 众里千寻

在开始之前，我们需要准备好本地的开发环境，安装好 Nodejs. Nodejs 可以直接从官方网站open in new window下载安装。

初始化项目

创建一个目录，然后通过 npm init -y 生层 package.json.

mkdir webpack-demo

cd webpack-demo

# -y 选项会使用默认值来填充 package.json
npm init -y

1
2
3
4
5
6

安装 Webpack

npm add webpack webpack-nano --develop # --develop === -D

通过以上命令，我们将 Webpack 安装在了项目的 node_modules 目录下，并且在 node_modules/.bin 目录下可以找到 webpack 的可执行文件。

需要说明的是，我们这里使用了 webpack-nanoopen in new window 而不是官方的 webpack-cli 是因为 webpack-nano 的功能足够我们使用了，而且 webpack-nano 兼容 webpack 4 和 webpack 5 的。

运行 Webpack

在命令行输入 node_modules/.bin/wp 来运行 webpack-nano。输出结果如下：

⬡ webpack: Build Finished
⬡ webpack: assets by status 0 bytes [cached] 1 asset


  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/


  ERROR in main
  Module not found: Error: Can't resolve './src' in '/Users/xxx/workspace/projects/webpack-demo'


  webpack 5.11.1 compiled with 1 error and 1 warning in 146 ms

1
2
3
4
5
6
7
8
9
10
11
12
13
14

输出结果显示 webpack 找不到可编译的文件。

为了要 webpack 能正确运行起来，我们需要做一些其他操作。

添加 src/index.js 文件，内容为 console.log('Hello World!');
执行 ./node_modules/.bin/wp，webpack 默认会找到这个文件。
检查 dist/main.js，在输出文件中我们可以看到 webpack 的启动代码，在之后一点的地方，我们可以找到 src/index.js 文件的内容。

添加其他文件

为了让构建更复杂一点，我们再添加一个模块，src/component.js。

export default (text = 'Hello world') => {
  const element = document.createElement('div');
  element.innerHTML = text;
  return element;
};

1
2
3
4
5

修改 src/index.js 代码如下：

import component from './component';

document.body.appendChild(component());

1
2
3

再次运行 node_modules/.bin/wp，我们查看 dist 目录下的输出，我们可以看到这两个模块的代码都在输出的 bundle 中。

Webpack 完成了打包输出，那么如何在浏览器中运行呢？

配置 mini-html-webpack-plugin 插件

我们需要写一个 html 文件，在这个文件中引用 webpack 打包输出的文件即可。可以通过 mini-html-webpack-pluginopen in new window 这个插件来帮我们自动的做这个事情。

npm add mini-html-webpack-plugin --develop

webpack-html-pluginopen in new window 也可以完成上面的工作，而且功能更丰富。但是 mini-html-webpack-plugin 功能已经足够演示使用，后面会介绍 webpack-html-plugin 的使用。

为了让 Webpack 可以使用这个插件，我们需要一个配置文件，webpack.config.js。

const { mode } = require('webpack-nano/argv');
const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin');
module.exports = {
  mode,
  plugins: [
    new MiniHtmlWebpackPlugin({
      context: { title: 'Demo' },
    }),
  ],
};

1
2
3
4
5
6
7
8
9
10

配置完成之后，执行如下命令：

通过 node_modules/.bin/wp --mode production 构建项目。
使用 npx serve dist 运行一个静态文件服务器。

在浏览器中我们可以看到如下输出：

HelloWorld

Webpack 不仅支持对象类型的配置，还支持数组、Promise 类型的配置。Webpack 对输入和输出都有默认值，默认会从 src/ 目录下开始寻找模块，默认输出到 dist 目录中。我们可以通过 entry 和 output 这两个配置来改变这个行为。

检查输出

在执行完 node_modules/.bin/wp --mode production 以后，输出如下：

⬡ webpack: Build Finished
⬡ webpack: asset index.html 190 bytes [compared for emit]
  asset main.js 136 bytes [compared for emit] [minimized] (name: main)
  orphan modules 149 bytes [orphan] 1 module
  ./src/index.js + 1 modules 228 bytes [built] [code generated]
  webpack 5.11.1 compiled successfully in 198 ms

1
2
3
4
5
6

从 Webpack 5 开始，输出内容被极大的简化了。在之前的版本中，输出内容会包含一整个 Webpack 运行时，但是从 Webpack 5 开始，Webpack 可以按照最小需求优化输出了。

添加快捷命令

不断执行 node_modules/.bin/wp --mode production 这个命令非常麻烦，我们可以在 package.json 添加一个快捷命令。

{
  "scripts": {
    "build": "wp --mode production"
  }
}

1
2
3
4
5

现在执行 npm run build，我们可以得到与之前相同的结果。

总结

通过本地依赖的形式安装 webpack 是一个好主意，这样可以确切的直到使用了哪个版本的 Webpack。

Webpack-cli 是官方提供的命令行工具，功能非常丰富。但是如果仅仅是基础使用的话，Webpack-nano 是一个不错的备选。

如果要修改 Webpack 的行为，我们需要一个额外的配置文件，通常叫 webpack.config.js。

mini-html-webpack-plugin 和 html-webpack-plugin 都可以用来生成应用的入口 html 文件，html-webpack-plugin 功能更丰富。

通过 npm scripts 可以帮助我们减少一些重复的命令行输入。

关注微信公众号，获取最新推送~

加微信，深入交流~

# 初始化项目

# 安装 Webpack

# 运行 Webpack

# 添加其他文件

# 配置 mini-html-webpack-plugin 插件

# 检查输出

# 添加快捷命令

# 总结