Webpack 学习笔记：自己搭建 webpack 多页面打包环境-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常使用 Webpack 来对代码进行打包、压缩和优化，来提升网站的性能。但是，大部分的 Webpack 学习资料都是针对单页应用的，而在实际开发中，也会遇到需要打包多个页面的情况。本文将介绍如何搭建 webpack 多页面打包环境，让你的多页面应用也可以享受到 Webpack 的优势。

准备工作

在开始之前，我们需要准备好以下工具和软件：

Node.js
NPM 或 Yarn
IDE 或文本编辑器，如 VSCode

创建项目

打开命令行窗口，输入以下命令来创建一个新的项目：

mkdir webpack-multi-page
cd webpack-multi-page
npm init -y

执行完上述命令后，我们会在当前目录下创建一个名为 webpack-multi-page 的项目，并进行初始化。

安装 webpack 和 webpack-cli

接下来，我们需要安装 webpack 和 webpack-cli，这是我们进行打包的工具。

输入以下命令来安装：

npm install webpack webpack-cli --save-dev

配置 webpack

首先，在项目根目录下创建一个 webpack.config.js 文件。

配置 entry

因为我们要打包多个页面，所以我们需要将每个页面对应的 JavaScript 文件作为 entry。在 webpack.config.js 文件中添加如下代码：

const path = require('path');

module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js',
  }
};

以上代码中，我们定义了两个 entry：home 和 about，表示我们要打包的是 home.js 和 about.js 这两个文件。

配置 output

接下来，我们需要定义打包后的输出目录和文件名。

// javascriptcn.com 代码示例
module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js',
  },
};

以上代码表示我们将打包后的文件输出到 dist 目录下，每个文件名格式为 [name].[hash].js，其中 [name] 表示 entry 的 key，[hash] 表示文件内容的 hash。

配置多页面

在上述配置中，我们已经定义了入口和出口，但是还需要注意的是多页面应用的入口 HTML 文件。

// javascriptcn.com 代码示例
module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js',
  },
  plugins: [new HtmlWebpackPlugin({
    title: 'Home',
    filename: 'home.html',
    template: './src/home.html',
    chunks: ['home'],
  }), new HtmlWebpackPlugin({
    title: 'About',
    filename: 'about.html',
    template: './src/about.html',
    chunks: ['about'],
  })]
};

以上代码中，我们使用了 HtmlWebpackPlugin 插件来自动生成 HTML 文件。在这里，我们为每个页面定义了一个 HTML 文件，并确保只包含该页面的 JS 文件。

配置 loader

由于我们需要处理多个类型的文件，如 CSS、图片、字体等，所以需要使用 loader 对这些文件进行处理。

在 webpack.config.js 文件中添加如下代码：

// javascriptcn.com 代码示例
module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js',
  },
  plugins: [new HtmlWebpackPlugin({
    title: 'Home',
    filename: 'home.html',
    template: './src/home.html',
    chunks: ['home'],
  }), new HtmlWebpackPlugin({
    title: 'About',
    filename: 'about.html',
    template: './src/about.html',
    chunks: ['about'],
  })],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader'],
      },
    ],
  },
};

以上代码就定义了一些常用的 loader。这里我们使用了 style-loader 和 css-loader 来处理 CSS 文件，使用 file-loader 来处理字体、图片等文件。

配置 DevServer

如果不希望在每次修改代码后都需要手动编译并刷新浏览器，我们可以使用 DevServer 来自动编译并刷新浏览器。

在 webpack.config.js 文件中添加如下代码：

// javascriptcn.com 代码示例
module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js',
  },
  plugins: [new HtmlWebpackPlugin({
    title: 'Home',
    filename: 'home.html',
    template: './src/home.html',
    chunks: ['home'],
  }), new HtmlWebpackPlugin({
    title: 'About',
    filename: 'about.html',
    template: './src/about.html',
    chunks: ['about'],
  })],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader'],
      },
    ],
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  },
};

在以上代码中，我们定义了 DevServer 的配置，如 contentBase 表示 DevServer 从哪个目录读取文件，compress 表示是否启用 gzip 压缩，port 表示监听的端口号。

编写代码

现在我们已经完成了 Webpack 的配置，接下来就可以开始编写代码了。

在项目根目录下创建一个 src 目录，并在其中创建 home.js 和 about.js 文件。这里只需要一个简单的 alert：

home.js:

alert('This is home page.');

about.js:

alert('This is about page.');

然后，我们在 src 目录下创建一个 home.html 文件，并在其中引入 Home 页面所需的样式及 JS 文件：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Home</title>
  </head>
  <body>
    <h1>This is home page.</h1>
    <script src="home.[hash].js"></script>
    <link rel="stylesheet" href="home.[hash].css">
  </body>
</html>

同理，我们在 src 目录下创建一个 about.html 文件，并在其中引入 About 页面所需的样式及 JS 文件：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>About</title>
  </head>
  <body>
    <h1>This is about page.</h1>
    <script src="about.[hash].js"></script>
    <link rel="stylesheet" href="about.[hash].css">
  </body>
</html>

最后，我们在 src 目录下创建一个 style.css 文件，并在其中添加一些样式。

body {
  background-color: #f5f5f5;
}

h1 {
  color: #333;
}

运行项目

在 package.json 文件中，我们添加如下命令：

"scripts": {
  "start": "webpack-dev-server --open",
  "build": "webpack"
}

在命令行中输入一下命令：

npm run start

然后在浏览器中打开 http://localhost:9000/home.html 和 http://localhost:9000/about.html，就可以看到我们编写的两个页面了。

如果要生产环境打包，则使用命令：

npm run build

总结

本文介绍了如何搭建一个支持多页面的 Webpack 打包环境，为你在实际开发中处理多页应用提供了指导。同时，对于表示缩写的一些工具，建议同志们了解一下，例如webpack、NPM等。如果在安装的时候需要科学上网，且不建议使用免费的VPN。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6536264b7d4982a6ebe07a1b