springboot集成webpack项目

springboot集成webpack项目

生产环境中，webpack项目都是使用nginx进行转发代理，开发模式也是前后端分离，Web全栈程序员可以使用maven插件独自完成前后端分离的项目，在springboot项目启动后自动加载webpack项目，原理上也是将webpack项目打包到springboot中，减少nginx服务器部署，并发完全由springboot Tomcat进行控制，保留了技术栈的前后端分离，也减少了运维部署的工作。

步骤：
1、创建一个webpack项目。
2、webpack项目中创建一个pom.xml（与package.json平级）。
3、pom文件添加如下配置，根据包管理工具进行选择。
4、在springboot Web项目中，添加webpack项目的依赖，编写"/"根路径接口进行重定向到webpack项目。
5、访问springboot Web项目的根路径，例如：localhost:8080，成功完成webpack项目的访问，使用maven打包命令也会将webpack项目打包进springboot jar包。

注意事项：
1、webpack项目打包后，一般生成一个dist文件，需要将打包的文件路径修改当前webpack项目中的target文件下，打包路径：./target/generated-resources/public ，在springboot Tomcat服务器进行重定向时，会自动读取依赖的maven工程。

webpack项目打包路径修改，以vue项目为例（项目中修改vue.config.js），修改outputDir路径为./target/generated-resources/public，代码如下：

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')

function resolve(dir) {
  return path.join(__dirname, dir)
}

const name = defaultSettings.title || 'vue Admin Template' // page title

// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
// You can change the port by the following methods:
// port = 9528 npm run dev OR npm run dev --port = 9528
const port = process.env.port || process.env.npm_config_port || 9528 // dev port

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
  /**
   * You will need to set publicPath if you plan to deploy your site under a sub path,
   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
   * then publicPath should be set to "/bar/".
   * In most cases please use '/' !!!
   * Detail: https://cli.vuejs.org/config/#publicpath
   */
  publicPath: './',
  outputDir: './target/generated-resources/public',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV === 'development',
  productionSourceMap: false,
  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // before: require('./mock/mock-server.js'),
    /* 跨域代理 */
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        /* 目标代理服务器地址 */
        target: "http://localhost:7070", //
        /* 允许跨域 */
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ""
        }
      }
    },
    disableHostCheck: true
  },
  configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
      alias: {
        '@': resolve('src')
      }
    }
  },
  chainWebpack(config) {
    // it can improve the speed of the first screen, it is recommended to turn on preload
    // config.plugins.delete('preload')

    // when there are many pages, it will cause too many meaningless requests
    config.plugins.delete('prefetch')

    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()

    // set preserveWhitespace
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()

    config
      .when(process.env.NODE_ENV !== 'development',
        config => {
          config
            .plugin('ScriptExtHtmlWebpackPlugin')
            .after('html')
            .use('script-ext-html-webpack-plugin', [{
              // `runtime` must same as runtimeChunk name. default is `runtime`
              inline: /runtime\..*\.js$/
            }])
            .end()
          config
            .optimization.splitChunks({
            chunks: 'all',
            cacheGroups: {
              libs: {
                name: 'chunk-libs',
                test: /[\\/]node_modules[\\/]/,
                priority: 10,
                chunks: 'initial' // only package third parties that are initially dependent
              },
              elementUI: {
                name: 'chunk-elementUI', // split elementUI into a single package
                priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
                test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
              },
              commons: {
                name: 'chunk-commons',
                test: resolve('src/components'), // can customize your rules
                minChunks: 3, //  minimum common number
                priority: 5,
                reuseExistingChunk: true
              }
            }
          })
          config.optimization.runtimeChunk('single'),
            {
              from: path.resolve(__dirname, './public/robots.txt'),//防爬虫文件
              to: './',//到根目录下
            }
        }
      )
  }
}

yarn项目包管理工具集成配置,maven配置如下：

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <build.node.version>v12.22.1</build.node.version>
    <build.yarn.version>v1.22.5</build.yarn.version>
 </properties>

<build>
    <resources>
      <resource>
        <directory>${project.build.directory}/generated-resources</directory>
      </resource>
    </resources>
    <plugins>
      <plugin>
        <groupId>com.github.eirslett</groupId>
        <artifactId>frontend-maven-plugin</artifactId>
        <version>1.7.5</version>
        <configuration>
          <installDirectory>target</installDirectory>
          <workingDirectory>${basedir}</workingDirectory>
        </configuration>
        <executions>
          <execution>
            <id>install node and npm</id>
            <goals>
              <goal>install-node-and-yarn</goal>
            </goals>
            <configuration>
              <nodeVersion>${build.node.version}</nodeVersion>
              <yarnVersion>${build.yarn.version}</yarnVersion>
              <nodeDownloadRoot>https://npm.taobao.org/mirrors/node/</nodeDownloadRoot>
            </configuration>
          </execution>
          <execution>
            <id>yarn install</id>
            <goals>
              <goal>yarn</goal>
            </goals>
            <configuration>
              <arguments>install</arguments>
            </configuration>
          </execution>
        </executions>
      </plugin>
    </plugins>
  </build>
  <profiles>
    <profile>
      <id>yarn-build</id>
      <activation>
        <activeByDefault>true</activeByDefault>
      </activation>
      <build>
        <plugins>
          <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.7.5</version>
            <configuration>
              <installDirectory>target</installDirectory>
              <workingDirectory>${basedir}</workingDirectory>
            </configuration>
            <executions>
              <execution>
                <id>yarn build</id>
                <goals>
                  <goal>yarn</goal>
                </goals>
                <configuration>
                  <arguments>run build</arguments>
                </configuration>
              </execution>
            </executions>
          </plugin>
        </plugins>
      </build>
    </profile>
    <profile>
      <id>yarn-start</id>
      <activation>
        <property>
          <name>yarn-start</name>
        </property>
      </activation>
      <build>
        <plugins>
          <plugin>
            <groupId>com.github.eirslett</groupId>
            <artifactId>frontend-maven-plugin</artifactId>
            <version>1.7.5</version>
            <configuration>
              <installDirectory>target</installDirectory>
              <workingDirectory>${basedir}</workingDirectory>
            </configuration>
            <executions>
              <execution>
                <id>yarn start</id>
                <goals>
                  <goal>yarn</goal>
                </goals>
                <configuration>
                  <arguments>start</arguments>
                </configuration>
              </execution>
            </executions>
          </plugin>
        </plugins>
      </build>
    </profile>
  </profiles>

npm项目包管理工具集成配置,maven配置如下：

 <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <main.dir>${basedir}/..</main.dir>
    <build.node.version>v12.22.1</build.node.version>
    <build.npm.version>7.8.0</build.npm.version>
 </properties>
  
<build>
   <resources>
       <resource>
           <directory>${project.build.directory}/generated-resources</directory>
       </resource>
   </resources>
   <plugins>
       <plugin>
           <groupId>com.github.eirslett</groupId>
           <artifactId>frontend-maven-plugin</artifactId>
           <version>1.7.5</version>
           <configuration>
               <installDirectory>target</installDirectory>
               <workingDirectory></workingDirectory>
           </configuration>
           <executions>
               <execution>
                   <id>install node and npm</id>
                   <goals>
                       <goal>install-node-and-npm</goal>
                   </goals>
                   <configuration>
                       <nodeVersion>${build.node.version}</nodeVersion>
                       <npmVersion>${build.npm.version}</npmVersion>
                       <nodeDownloadRoot>https://npm.taobao.org/mirrors/node/</nodeDownloadRoot>
                       <npmDownloadRoot>https://registry.npm.taobao.org/npm/-/</npmDownloadRoot>
                   </configuration>
               </execution>
               <execution>
                   <id>npm install</id>
                   <goals>
                       <goal>npm</goal>
                   </goals>
                   <configuration>
                       <arguments>install</arguments>
                   </configuration>
               </execution>
           </executions>
       </plugin>
   </plugins>
</build>
<profiles>
   <profile>
       <id>npm-build</id>
       <activation>
           <activeByDefault>true</activeByDefault>
       </activation>
       <build>
           <plugins>
               <plugin>
                   <groupId>com.github.eirslett</groupId>
                   <artifactId>frontend-maven-plugin</artifactId>
                   <version>1.7.5</version>
                   <configuration>
                       <installDirectory>target</installDirectory>
                       <workingDirectory></workingDirectory>
                   </configuration>
                   <executions>
                       <execution>
                           <id>npm build</id>
                           <goals>
                               <goal>npm</goal>
                           </goals>
                           <configuration>
                               <arguments>run build:prod</arguments>
                           </configuration>
                       </execution>
                   </executions>
               </plugin>
           </plugins>
       </build>
   </profile>
   <profile>
       <id>npm-start</id>
       <activation>
           <property>
               <name>npm-start</name>
           </property>
       </activation>
       <build>
           <plugins>
               <plugin>
                   <groupId>com.github.eirslett</groupId>
                   <artifactId>frontend-maven-plugin</artifactId>
                   <version>1.7.5</version>
                   <configuration>
                       <installDirectory>target</installDirectory>
                       <workingDirectory></workingDirectory>
                   </configuration>
                   <executions>
                       <execution>
                           <id>npm start</id>
                           <goals>
                               <goal>npm</goal>
                           </goals>

                           <configuration>
                               <arguments>start</arguments>
                           </configuration>
                       </execution>
                   </executions>
               </plugin>
           </plugins>
       </build>
   </profile>
</profiles>

springboot添加webpack项目的maven坐标后，Web项目中编写"/"根路径的跳转：

@ApiIgnore //swagger注解
@Controller
public class WebConifguration {

    @RequestMapping(value = "/{path:^(?!api$)(?!assets$)(?!static$)(?!webjars$)[^\\.]*}/**")
    public String redirect() {
        return "forward:/index.html";
    }
}