簡體   English   中英

htmlwebpackPlugin + Maven - 如何手動注入捆綁的chunkhash文件?

[英]htmlwebpackPlugin + Maven - how do I manually inject bundled chunkhash files?

我有一個問題,當我安裝整個Maven模塊時,Maven + frontend-maven-plugin和webpack不能很好地結合在一起; 簡單地說,Webpack htmlwebpackPlugin在我第一次安裝Maven模塊時不會注入捆綁的js / css文件,出於某種原因,即使模板是這樣提供的:

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

但是,如果我在安裝整個Maven模塊后手動運行frontend-maven-plugin ,它實際上會注入正確的文件,這是相當奇怪的行為。

為了解決這個問題,我想知道是否有一種手動方式以某種方式在我自己的index.html模板中注入這些捆綁文件(我只有三個; 1個css,2個js文件)和chunkhash? 這將使構建更加一致。

我的webpack.config.js一個webpack.config.js - 正如你所看到的,如果我們不在dev中,我們會將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不會使用空模板覆蓋輸出。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM