我遇到一个问题,当我安装整个 Maven 模块时,Maven + frontend-maven-plugin 和 webpack 不能很好地结合在一起;简而言之,由于某种原因,Webpack htmlwebpackPlugin 在我第一次安装 Maven 模块时不会注入(inject)捆绑的 js/css 文件,即使提供了这样的模板:

    new HtmlWebpackPlugin({ 
        template : '../resources/public/index.html', 
        filename : 'index.html', 
        inject : 'body', 
    }) 

但是,如果我在安装整个 Maven 模块后手动运行 frontend-maven-plugin ,它实际上会注入(inject)正确的文件,这是相当奇怪的行为。

为了解决这个问题,我想知道是否有一种手动方法可以在我自己的 index.html 模板中以某种方式注入(inject)这些捆绑文件(我只有三个;1 个 css,2 个 js 文件)和 chunkhash?这将使构建更加一致。

我的 webpack.config.js 的片段 - 如您所见,如果我们不在开发中,我们会将 chunkhash 添加到文件名中。

"use strict"; 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
 
 
let path = require('path'); 
let webpack = require("webpack"); 
 
const PATHS = { 
    build: path.join(__dirname, '../../../target', 'classes', 'public'), 
}; 
 
const env = process.env.NODE_ENV; 
 
let isDev = false; 
 
if(env == "dev"){ 
    isDev = true; 
} 
 
 
console.log(`Dev environment: ${isDev}`); 
 
 
module.exports = { 
 
    entry: { 
        main: './js/index.jsx', 
        vendor: [ 
            "react","react-dom","axios", 
            "react-table", "mobx", "mobx-react", "mobx-utils", "lodash"], 
    }, 
    output: { 
        path: PATHS.build, 
        filename: `bundle.${isDev ? '' : '[chunkhash]'}.js` 
    }, 
 
    plugins: [ 
        new webpack.optimize.CommonsChunkPlugin({name: "vendor", filename: `/static/js/vendor.bundle.${isDev ? '' : '[chunkhash]'}.js`}), 
        new ExtractTextPlugin(`/static/css/[name].${isDev ? '' : '[chunkhash]'}.css`), 
        new HtmlWebpackPlugin({ 
            template : '../resources/public/index.html', 
            filename : 'index.html', 
            inject : 'body', 
        }) 
 
    ], 
 
    module: { 
        loaders: [ 
    // Bunch of loaders 
        ] 
    }, 
}; 

请您参考如下方法:

我解决了它 - 问题基本上是 Maven/Spring 会在目标文件夹外部的 resources/public 中获取 Index.html(我用作模板),并在目标文件夹中覆盖它 - 基本上覆盖 webpackHTMLplugin 的输出,这在这种情况下是合乎逻辑的。

我解决这个问题的方法是在 resources/public 中没有任何 index.html 文件,而只是在 webpack 所在的 src 文件夹中有一个 template.html 文件。因此,Maven/Spring 不会用空模板覆盖输出。


评论关闭
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!