webpack 是一个前端打包器。

安装

pnpm add -D webpack webpack-cli

编写入口文件 src/main.js 和模块 src/foo.js：

// src/foo.js
export function foo() {
  console.log('I am foo')
}

export function add(x, y) {
  return x + y
}

// src/main.js
import { foo, add } from './foo'

foo()
console.log(add(3, 4))

编写配置文件 webpack.config.cjs:

const path = require('node:path')

module.exports = {
  entry: './src/main.js',
  mode: 'production',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
}

修改 package.json 的脚本：

{
    "scripts": {
        "build": "webpack"
    }
}

执行 pnpm build 构建项目，发现构建产物 dist/main.bundle.js，内容如下：

(()=>{"use strict";console.log("I am foo"),console.log(7)})();

拆解配置文件

建议把生产环境和开发环境的配置文件分开，把可以复用的参数提取到公共的配置文件。

使用 webpack-merge 将多个配置项合并为一个。

pnpm add -D webpack-merge

// webpack.common.config.cjs 公共配置
const path = require('node:path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
}

// webpack.dev.config.cjs
const { merge } = require('webpack-merge')
const commonConfig = require('./webpack.common.config.cjs')

module.exports = merge(commonConfig, {
  mode: 'development',
})

// webpack.prod.config.cjs
const { merge } = require('webpack-merge')
const commonConfig = require('./webpack.common.config.cjs')

module.exports = merge(commonConfig, {
  mode: 'production',
})

修改 package.json 的脚本：

{
  "scripts": {
    "dev": "webpack --config webpack.dev.config.cjs",
    "build": "webpack --config webpack.prod.config.cjs",
  }
}

插件

html-webpack-plugin

html-webpack-plugin 可以简化 HTML 页面的创建。

pnpm add -D html-webpack-plugin

修改公共配置文件 webpack.common.config.cjs：

+ const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  ...
+  plugins: [new HtmlWebpackPlugin()],
}

html-webpack-plugin 的选项支持一些常见的参数：

  • title 页面标题
  • filename 输出的 HTML 文件名，默认是 index.html
  • template 模板文件路径，默认是 src/index.ejs（如果存在的话）