我正在使用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
靜態文件:
在這裏是打開瀏覽器時,JS文件沒有顯示出來證明:
帖子'目標/班/ static'的輸出目錄。這是一個巨大的Webpack配置轉儲,但它並沒有清楚地表明文件被保存在正確的位置(或者在正確的時間,在Maven中這將是'生成資源'階段)。 – chrylis
我已經用'target/classes/static'的屏幕截圖更新了我原來的帖子。 –
好吧,它看起來像那裏。你的網絡標籤怎麼樣 - 你獲得404s嗎?還有別的嗎? – chrylis