Java/Spring-Boot WebApp公開リソースディレクトリからアセットを提供しない

Question

私はSpring-Bootによって提供されているAngularJSアプリケーションを開発中です。私はWebpackを組み込むようにビルドパイプラインをアップグレードする過程にあります。 Webpackはすべてのソースコードを/src/main/resources/staticディレクトリに束ねています。これはSpring-Bootによって自動的に提供されるべきです。しかし、http://localhost:8080にナビゲートしてこれをテストしようとすると、index.htmlページが配信されていますが、さまざまなJSバンドルは配信されていません。以下は、これを設定するには、関連するファイルの一部されています。ここでは

webpack.config.js

/*global process, module, __dirname*/ 

const path = require('path'); 
const proxyMiddleware = require('proxy-middleware'); 
const url = require('url'); 
const webpack = require('webpack'); 
const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); 

const PATHS = { 
    app: path.join(__dirname, './src/main/webapp'), 
    dist: path.join(__dirname, './src/main/resources/static'), 
    test: path.join(__dirname, './src/test/webapp') 
}; 

const isDevelopment = process.env.NODE_ENV === 'develop'; 
const isE2E = process.env.NODE_ENV === 'e2e'; 
const isTest = process.env.NODE_ENV === 'test'; 
const isProd = process.env.NODE_ENV === 'production'; 

// Webpack Loaders 
const fontRule = { 
    test: /\.(eot|svg|ttf|woff|woff2)$/, 
    loader: 'file-loader', 
    options: { 
     name: '[name].[sha1:hash:base64:32].[ext]' 
    } 
}; 

const htmlRule = { 
    test: /\.html$/, 
    loader: 'html-loader', 
    query: { 
     minimize: isProd 
    } 
}; 

const imageRule = { 
    test: /\.png$/i, 
    loader: 'url-loader', 
    options: { 
     limit: 8192, 
     mimetype: 'image/png' 
    } 
}; 

const javasscriptPreRule = { 
    test: /\.js$/, 
    exclude: /node_modules/, 
    enforce: 'pre', 
    loader: 'eslint-loader' 
}; 

const javascriptRule = { 
    test: /\.js$/, 
    exclude: /node_modules/, 
    loader: 'babel-loader' 
}; 

const sassRule = { 
    test : /\.scss$/, 
    use: ExtractTextPlugin.extract({ 
     use: [ 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap' ] 
    }) 
}; 

const entry = { 
    app: (() => { 
     let app = [ path.join(PATHS.app, 'app.js') ]; 

     if (isProd || isE2E) { 
      app.push(path.join(PATHS.app, 'app.prod.js')); 
     } else { 
      app.push(path.join(PATHS.app, 'app.mock.js')); 
     } 

     return app; 
    })() 
}; 

const output = { 
    path: PATHS.dist, 
    filename: isProd ? '[name].[chunkhash].js' : '[name].js' 
}; 

const plugins = (() => { 
    let plugins = [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      minChunks(module) { 
       return module.context 
        && module.context.indexOf('node_modules') !== -1; 
      } 
     }), 

     new webpack.optimize.CommonsChunkPlugin({ name: 'manifest' }), 

     new ExtractTextPlugin(isProd ? 'styles.[contenthash].css' : 'styles.css'), 

     new HtmlWebpackPlugin({ template: path.join(PATHS.app, 'index.html') }), 

     new webpack.DefinePlugin({ 
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
     }) 
    ]; 

    if (isProd) { 
     plugins = plugins.concat([ 
      new webpack.optimize.UglifyJsPlugin({ 
       beautify: false, 
       comments: false, 
       compress: { 
        warnings: false 
       } 
      }), 

      new webpack.optimize.OccurrenceOrderPlugin(), 

      new OptimizeCssAssetsWebpackPlugin({ 
       cssProcessorOptions: { 
        discardComments: { removeAll: true } 
       } 
      }) 
     ]); 
    } else { 
     const server = (() => { 
      let server = { 
       baseDir: PATHS.dist 
      }; 

      // Internal testing server configurations... 

      return server; 
     })(); 

     plugins.push(
      new BrowserSyncPlugin({ 
       host: 'localhost', 
       port: 3000, 
       server 
      }) 
     ) 
    } 

    return plugins; 
})(); 

function proxy(target) { 
    let options = url.parse(target); 
    options.route = '/api'; 

    return proxyMiddleware(options); 
} 

module.exports = { 
    entry, 
    output, 
    plugins, 
    module: { 
     rules: [ fontRule, htmlRule, imageRule, javasscriptPreRule, javascriptRule, sassRule ] 
    } 
}; 

WebSecurityConfig.java

@Configuration 
@EnableGlobalMethodSecurity(prePostEnabled = true) 
public class WebSecurityConfig extends WebSecurityConfigurerAdapter implements InitializingBean { 

    @Override 
    protected void configure(HttpSecurity httpSecurity) throws Exception { 
     httpSecurity 
       // Internal security configurations 
       .and() 
       .authorizeRequests() 
        .antMatchers(HttpMethod.OPTIONS, "/**").permitAll() 
        .anyRequest().permitAll(); 
    } 

} 

は/src/target/classes/staticに保存されている静的ファイルです：

ここ私はに実行していた問題を考え出し

Answer 1

：ブラウザを開いたときにJSファイルが表示されない証拠です。フロントエンドコードを提供するために、Spring-Bootはデフォルトでsrc/main/webappになっていました。そのディレクトリ内にindex.htmlファイルがありますが、Webpackによって生成されたJavaScriptバンドルには<script>というタグは含まれていません。 Webpackはこれらのタグを自動的に追加します。私は、バンドルファイルがロードされていたディレクトリを変更しなければなりませんでした。これを行うには

、私はsrc/main/resources/application.propertiesファイルを編集して、次の行を追加：

spring.resources.static-locations=classpath:/static/