[英]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.