2017-07-05 88 views
0

我正在使用Spring-Boot提供的AngularJS應用程序。我正在升級我們的構建管道以包含Webpack。 Webpack將所有源代碼捆綁到一個/src/main/resources/static目錄中,我被告知應該由Spring-Boot自動提供。但是,當我嘗試通過導航到http://localhost:8080進行測試時,index.html頁面正在服務,但各種JS軟件包不在。下面是一些相關的文件來配置此:Java/Spring-Boot Webapp不能從公共資源目錄中提供資源

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靜態文件:

Built files

在這裏是打開瀏覽器時,JS文件沒有顯示出來證明:

Firefox Output

+0

帖子'目標/班/ static'的輸出目錄。這是一個巨大的Webpack配置轉儲,但它並沒有清楚地表明文件被保存在正確的位置(或者在正確的時間,在Maven中這將是'生成資源'階段)。 – chrylis

+0

我已經用'target/classes/static'的屏幕截圖更新了我原來的帖子。 –

+0

好吧,它看起來像那裏。你的網絡標籤怎麼樣 - 你獲得404s嗎?還有別的嗎? – chrylis

回答

0

我想通了,我也陷入了這個問題。 Spring-Boot仍然默認爲src/main/webapp來提供前端代碼。雖然該目錄中有一個index.html文件,但它不包含由Webpack生成的JavaScript包的<script>標記; Webpack負責自動添加這些標籤。我不得不改變bundle文件被加載的目錄。

要做到這一點,我編輯了src/main/resources/application.properties文件,並添加以下行:

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