webpack与springboot结合配置多页面_springboot webpack.config.js-优快云博客

本文链接：https://blog.youkuaiyun.com/lihao1155/article/details/109304037

本文详细介绍了如何将webpack与SpringBoot项目结合，实现多页面配置。重点包括项目目录结构，如public文件夹下的img、js、scss、static和views文件夹，以及webpack.config.js的配置。在配置中，自动绑定入口文件与出口文件，要求每个页面对应一个文件夹，并保持目录名称一致。启动和打包使用npm脚本，同时需要启动SpringBoot后端以处理页面跳转逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、webpack与springboot结合时项目的目录结构

public：我们写的前端页面存放处
在public中又有如下文件夹
1、img
2、js
3、scss
4、static：存放不需要打包的静态资源文件，会被直接打包到resources/static文件夹中
5、views：存放页面
wepack.config.js：放在springboot根目录下，wepack的相应配置

在这里插入图片描述
2、webpack.config.js配置内容
我先把我的配置内容给大家看一下

const path = require('path')

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

const glob = require('glob');
const OptimzeCsAsetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const  HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin')
//springboot的后端端口
const backendServer = "http://localhost:8084";
const setMPA = () => {
    const entry = {};
    const htmlWebpackPlugins = [];
    //搜索符合的js文件
    const entryFiles = glob.sync(path.join(__dirname, './src/main/resources/public/js/*/*.js'));
    Object.keys(entryFiles)
        .map((index) => {
            const entryFile = entryFiles[index];
            const match = entryFile.match(/src\/main\/resources\/public\/js\/(.*)\/(.*)\.js/);
            const pageName = match && match[2];
            const PathName=match&&match[1];
            const  jsName=PathName+"/"+pageName
            entry[jsName] = entryFile;