webpack 4 零基础实战多页面应用 (更新)-JavaScript中文网-JavaScript教程资源分享门户

前言

随着前端技术的发展，越来越多的项目需要使用 webpack 进行打包和构建。webpack 是一个强大的模块打包工具，可以用于构建各种类型的应用程序。本文将介绍如何使用 webpack 4 打包多页面应用，并提供详细的指导和示例代码。

环境搭建

在开始之前，我们需要先安装 Node.js 和 npm。可以从官网下载安装程序，也可以使用包管理器进行安装。

安装完成后，我们可以使用以下命令来检查是否安装成功：

node -v
npm -v

接着，我们需要创建一个新的项目文件夹，并在其中初始化 npm：

mkdir my-app
cd my-app
npm init -y

初始化完成后，我们需要安装 webpack 和 webpack-cli：

npm install webpack webpack-cli --save-dev

配置文件

webpack 的配置文件默认为 webpack.config.js，我们需要在项目根目录下创建这个文件，并进行基本的配置。

const path = require('path');

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

上述配置文件中，我们定义了两个入口文件 index.js 和 about.js，它们分别对应着两个页面。同时，我们也定义了输出文件的路径和文件名。

HTML 插件

在多页面应用中，每个页面都需要对应一个 HTML 文件。我们可以使用 html-webpack-plugin 插件来自动生成 HTML 文件，并将打包后的 JS 文件自动引入到 HTML 文件中。

首先，我们需要安装插件：

npm install html-webpack-plugin --save-dev

然后，在 webpack 配置文件中添加以下代码：

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

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html',
      chunks: ['index'],
    }),
    new HtmlWebpackPlugin({
      filename: 'about.html',
      template: './src/about.html',
      chunks: ['about'],
    }),
  ],
};

上述代码中，我们定义了两个 HTML 插件，分别对应着两个页面。我们需要指定生成的 HTML 文件名、模板文件路径和需要引入的 JS 文件。

CSS 和图片文件

在多页面应用中，每个页面都可能需要引入不同的 CSS 和图片文件。我们可以使用 mini-css-extract-plugin 插件来将 CSS 文件单独打包，使用 file-loader 和 url-loader 插件来处理图片文件。

首先，我们需要安装插件：

npm install mini-css-extract-plugin css-loader file-loader url-loader --save-dev

然后，在 webpack 配置文件中添加以下代码：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: 'images/[name].[hash:8].[ext]',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
};

上述代码中，我们定义了两个 loader，分别用于处理 CSS 和图片文件。同时，我们也定义了图片文件的输出路径和文件名。

开发模式和生产模式

在开发模式下，我们需要使用 webpack-dev-server 插件来实现自动刷新和热模块替换。在生产模式下，我们需要使用 clean-webpack-plugin 插件来清除旧的打包文件。

首先，我们需要安装插件：

npm install webpack-dev-server clean-webpack-plugin --save-dev

然后，在 webpack 配置文件中添加以下代码：

const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ...
  mode: 'development',
  devServer: {
    contentBase: './dist',
    port: 8080,
  },
  plugins: [
    // ...
    new CleanWebpackPlugin(),
  ],
};

上述代码中，我们定义了开发模式和生产模式下的不同配置。在开发模式下，我们使用 webpack-dev-server 插件，并将打包文件输出到内存中的临时文件夹。在生产模式下，我们使用 clean-webpack-plugin 插件来清除旧的打包文件。

完整的配置文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = (env, argv) => {
  const isDevMode = argv.mode === 'development';

  return {
    entry: {
      index: './src/index.js',
      about: './src/about.js',
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].js',
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, 'css-loader'],
        },
        {
          test: /\.(png|jpe?g|gif|svg)$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8192,
                name: 'images/[name].[hash:8].[ext]',
              },
            },
          ],
        },
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        filename: 'index.html',
        template: './src/index.html',
        chunks: ['index'],
      }),
      new HtmlWebpackPlugin({
        filename: 'about.html',
        template: './src/about.html',
        chunks: ['about'],
      }),
      new MiniCssExtractPlugin({
        filename: '[name].css',
      }),
      isDevMode ? new CleanWebpackPlugin() : null,
    ].filter(Boolean),
    mode: isDevMode ? 'development' : 'production',
    devServer: {
      contentBase: './dist',
      port: 8080,
    },
  };
};

示例代码

本文提供的示例代码可以在 GitHub 上进行查看和下载：https://github.com/usernamehw/webpack4-multi-page-demo。

总结

本文介绍了如何使用 webpack 4 打包多页面应用，并提供了详细的指导和示例代码。在实际开发过程中，我们可以根据自己的需求和项目特点进行相应的配置和优化。希望本文对大家有所帮助，谢谢阅读！

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