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中存储的静态文件：

以下是打开浏览器时JS文件无法显示的证明：

Answer 1

我想出了我遇到的问题。 Spring-Boot仍然默认为src/main/webapp来提供前端代码。虽然该目录中有index.html个文件，但它并不包含Webpack生成的JavaScript包的<script>个标记。 Webpack负责自动添加这些标签。我不得不更改从中加载包文件的目录。

为此，我编辑了src/main/resources/application.properties文件，并添加了以下行：

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

Java / Spring-Boot Webapp不从公共资源目录提供资源

1 个答案: