详解通用webpack多页面自动导入方案

webpack是一款强大的打包工具，它可以将多个js、css等文件打包成一个文件，减少文件的数量，提高网页的访问速度。而在实际工作中，我们通常会开发多个页面，需要将这些页面中各自的js、css文件打包成一个文件，而这个过程需要手动导入是非常繁琐的。于是，通用webpack多页面自动导入方案应运而生。

一、目标

我们的目标是实现一个通用的webpack多页面自动导入方案。

1. 自动读取入口文件

2. 每个入口文件都有自己的js和css文件

3. 将每个入口文件对应的js、css打包成一个文件

4. 最终生成对应的HTML文件

二、实现思路

1. 使用glob插件，自动读取入口文件

Glob是一个Node.js的非常棒的文件匹配库，我们可以使用它来匹配所有符合条件的文件。在我们的webpack配置中，我们可以使用它来读取所有符合条件的入口文件，从而自动生成webpack的entry入口。

2. 使用HtmlWebpackPlugin插件，自动生成HTML文件

每个入口文件都需要对应生成一个HTML文件，而HtmlWebpackPlugin可以帮我们实现自动化。我们可以设置模板文件，然后让HtmlWebpackPlugin根据模板文件来生成对应的HTML文件，同时也可以设置生成HTML文件的路径、文件名等。

3. 使用ExtractTextWebpackPlugin插件，将CSS文件打包成一个文件

在多页面应用中，我们通常需要将每个入口文件中的CSS打包成一个文件。使用ExtractTextWebpackPlugin插件可以帮助我们实现这个功能，并将每个入口文件中的css打包进一个文件中。

三、代码实现

1. 安装插件

// 安装glob、html-webpack-plugin、extract-text-webpack-plugin
npm install glob html-webpack-plugin extract-text-webpack-plugin --save-dev

2. webpack.config.js配置

const path = require('path');
const webpack = require('webpack');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

// 读取入口文件
function getEntries() {
  let entry = {};
  glob.sync('./src/**/*.js').forEach(function (name) {
    let n = name.slice(name.lastIndexOf('/') + 1, name.length - 3);
    entry[n] = name;
  });
  return entry;
}

// 自动生成HTML文件
function getHtmlWebpackPlugins() {
  let plugins = [];
  glob.sync('./src/**/*.html').forEach(function (name) {
    let n = name.slice(name.lastIndexOf('/') + 1, name.length - 5);
    let conf = {
      template: name,
      filename: n + '.html',
      chunks: [n],
    };
    plugins.push(new HtmlWebpackPlugin(conf));
  });
  return plugins;
}

module.exports = {
  entry: getEntries(),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ExtractTextWebpackPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader'],
        }),
      },
    ],
  },
  plugins: [
    new ExtractTextWebpackPlugin('style.css'),
    ...getHtmlWebpackPlugins(),
  ],
};

四、总结

通过使用以上的配置，我们可以快速地将多个页面中的JS、CSS文件打包成一个文件，同时自动生成对应的HTML文件。这样不仅可以减少手工操作的时间和出错的概率，还可以更加方便的进行开发和维护。