webpack5 创建多页面应用配置

简单版webpack创建多页面应用，只要把配置文件复制下来，然后npm安装相应插件，正常是能跑起来了

创建

1. 初始化
   npm init生成package.json文件
2. 安装webpack
npm i -D webpack webpack-cli webpack-dev-server
3. 创建main.js入口文件和webpack.config.js文件
4. 安装html-webpack-plugin
   文件打包好之后，我们不可能每次在html文件钟手动引入打包好的js，这时候就需要使用html-webpack-plugin创建html页面，并将打包后的js文件引入到html中
5. scss、bootstrap那些按需引入，具体可以直接复制下方的package.json文件，然后直接执行npm i下载相关的插件

配置文件

// webpack.config.js
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const resolve = dir => path.resolve(__dirname, dir);
module.exports = {
    mode: 'development',
    entry: {	// 入口文件
        main: path.resolve(__dirname, './src/main.js'),
        home: path.resolve(__dirname, './src/js/home.js'),
        aboutus: path.resolve(__dirname, './src/js/aboutus.js')
    },
    output: {	// 出口文件
        path: path.resolve(__dirname, 'dist'),
        filename: "./js/[name].js",
        assetModuleFilename: 'img/[hash][ext][query]'
    },
    devServer: {
        hot: true
    },
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
        ],
    },
    module: {
        // webpack 本身只支持处理js, json文件，将其他转换成有效模块
        rules: [
            {
                test: /.html$/,
                loader: 'html-loader',
                options: {
                    esModule: false
                }
            },
            {   // 样式
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {   // 图片
                test: /\.(png|svg|jpg|jpeg|gif)$/,
                type: 'asset',
                generator: {
                    filename: 'image/[name].[contenthash:8][ext][query]'
                }
            },
            {   // scss
                test: /\.(scss|sass)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    // "style-loader",
                    "css-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: () => [
                                    require('autoprefixer')
                                ]
                            }
                        }
                    },
                    'sass-loader'
                ],
            },
        ],
    },
    resolve: {
        alias: {
            "@": resolve('src')
        }
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, './src/pages/index.html'),
            filename: 'index.html',
            chunks: ['index']
        }),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "./src/pages/home.html"),
            filename: 'home.html',
            chunks: ['home']
        }),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, './src/pages/aboutus.html'),
            filename: 'aboutus.html',
            chunks: ['aboutus']
        }),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name].[fullhash].css'
        })
    ]
}

// package.json
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "webpack-dev-server --port 3001 --hot --config webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^4.0.0",
    "css-minimizer-webpack-plugin": "^7.0.0",
    "html-loader": "^5.1.0",
    "html-webpack-plugin": "^5.6.0",
    "mini-css-extract-plugin": "^2.9.0",
    "webpack": "^5.93.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.4"
  },
  "dependencies": {
    "bootstrap": "^5.3.3",
    "css-loader": "^7.1.2",
    "jquery": "^3.7.1",
    "node-sass": "^9.0.0",
    "postcss-loader": "^8.1.1",
    "sass": "^1.77.8",
    "sass-loader": "^14.2.1",
    "style-loader": "^4.0.0"
  }
}

遇到的问题

1. output配置了一个出口导致报错

多入口也要多出口，输出的文件也要是多个：

entry: {
   main: path.resolve(__dirname, './src/main.js'),
   home: path.resolve(__dirname, './src/js/home.js'),
   aboutus: path.resolve(__dirname, './src/js/aboutus.js')
},
output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "./js/[name].js",			// 正确写法
    // filename: './js/bundle.js',		// 错误写法
    assetModuleFilename: 'img/[hash][ext][query]'
},

2. html-webpack-plugin配置不正确导致页面404

除了index.html能正常显示外，其他页面都显示404，一开始以为是路由配置或者入口没设置正确，后面发现filename跟其他不一样就试了一下，没想到真是这里的问题

plugins: [
	new HtmlWebpackPlugin({
	    template: path.join(__dirname, './src/pages/index.html'),
	    filename: 'index',	// 这里必须跟地址一样。如这里写的是 index.html 的话，链接上必须也要带上.html，即 localhost:3001/index.html
	    chunks: ['index']
	}),
]

这里的filename要加上.html后缀才可以。如果不写后缀，打包之后html文件会没有后缀导致出错！

3. html页面引入css文件报错

<!-- 原代码 index.html -->
<head>
	<link rel="stylesheet" href="../assets/css/home.css">
</head>

后面查到有资料说用webpack的css文件不能写在html，要放在入口文件引入，所以后来在入口文件引入css

// home.js ---- 入口文件
import "../assets/css/home.css"

但是css文件在浏览器开发者工具的network可以看见已经引入了，但是样式不生效，而且css文件名有乱码

查了很久，发现MiniCssExtractPlugin.loader不能在development环境用

// webpack.config.js
// 原本配置
module.exports = {
	module: {
		rules: [
			{   // 样式
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                localIdentName: '[hash:base64:8]',
                            }
                        }
                    }
                ]
            },
		]	
	}
}

// 正确配置
module.exports = {
	module: {
		rules: [
			{   // 样式
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
		]	
	}
}

4. 代理问题proxy要写成array

之前设置代理的写法是这样的：

但是webpack5好像必须是写成array的形式才可以，不然会报下面的错误。一开始是不信的，看了好多资料都说可以写成object，但是死活运行不了。后面改了之后发现能正常运行了…

// 正确写法
proxy: [{
    context: ['/api'], 
    target: 'http://localhost:3600',
    changeOrigin: true,
    ws: true
}]