前言

本系列文章链接：

这篇文章主要向大家介绍自己在开发多页面(静态网站)应用时遇到的问题以及解决方法。主要的问题有两点：

效率低下

• 每次修改代码后，开发者需要手动刷新浏览器来查看更新，这降低了开发效率。
• 动进行代码压缩、合并和优化既费时又易出错。

代码复用困难

• 缺乏有效的方式来组织和管理可复用的UI组件，难以实现模块化的开发模式。
• 没有构建工具，很难实现HTML模板的复用。对于多页面应用来说，这意味着头部、尾部或导航栏这样的公共组件需要在每个页面手动复制和粘贴，导致代码冗余。

我会分两篇文章来解决上面提到的两个问题。本篇文章主要解决第一个问题：优化构建、开发的流程。

初始化前端项目并安装基本的依赖包

• 初始化项目

npm init

• 进入项目文件下，并执行下面命令引入打包工具webpack

npm i webpack@5.90.3 webpack-cli@5.1.4 webpack-dev-server@5.0.2 --save-dev

• 安装样式预处理器以及处理css的插件、加载器

npm i sass@1.71.1 sass-loader@14.1.1 postcss-loader@8.1.1 css-laoder@6.10.0 style-loader3.3.4 mini-css-extract-plugin@2.8.1 autoprefixer@10.4.19 --save-dev

• 安装处理html的插件

npm i html-webpack-plugin html-loader --save-dev

• 安装拷贝插件

npm i copy-webpack-plugin@12.0.2 --save-dev

• 安装清理插件

npm i clean-webpack-plugin@4.0.0 --save-dev

webpack的配置

• 请按照下面的项目目录，建立目录，webpack的配置是以这个为基础的

├── package-lock.json
├── package.json
├── src
│   ├── css         // css文件夹
│   ├── images      // 图片文件夹
│   ├── index.html  // 静态页面
│   ├── js          // js文件夹
└── webpack.config.js

• 新建webpack.config.js，并将下面的代码粘贴

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

module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  entry: {
    index: './src/js/index.js', // 入口文件
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js'
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    compress: true,
    port: 9000,
    hot: true,
    watchFiles: ['src/**/*.html', 'detail/*.html', 'css/**/*.css', 'js/**/*.js', 'images/**/*'], // 监测的文件，触发HMR
  },
  plugins: [
    // 主页面
    new htmlWebpackPlugin({
      inject: 'body',             // 将js插入到body
      template: 'src/index.html', // 模版
      filename: 'index.html',     // 将html放到哪里，以及文件名称
      chunks: ['index',],         // 将chunks中列的文件插入模版中
    }),
    
    // 负责清理旧的生成的文件
    new CleanWebpackPlugin(),

    // 提取css文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和路径
      filename: 'css/[name].[contenthash].css',
    }),

    // 拷贝images (或其他文件)
    new CopyWebpackPlugin({
      patterns: [
         {
           from: './src/images/',
          to: 'images',
         },
       ],
     }),
  ],

  module: {
    rules: [
      /** 处理scss **/
      {
        test: /\.scss$/,
        use: [
          'style-loader', 
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer')()
                ]
              }
            }
          },
          'sass-loader'
        ]
      },
      /** 处理图片 **/
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
        exclude: /node_modules/,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name][ext]'
        },
      },
      /** 处理字体 **/
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/',
              publicPath: 'fonts/'
            }
          }
        ]
      },
    ]
  }
};

如果您觉得这篇文章有用，不妨点个赞。我在下篇文章将分享自己实践中复用html片段的方法以及处理静态资源的一些其他细节。