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
,它实际上会注入正确的文件,这是相当奇怪的行为。
为了解决这个问题,我想知道是否有一种手动方式以某种方式注入这些捆绑文件(我只有三个;1 css,2 个 js 文件)在我自己的 index.html
模板?这将使构建更加一致。
我的 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 不会用空模板覆盖输出。
我遇到一个问题,当我安装整个 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
,它实际上会注入正确的文件,这是相当奇怪的行为。
为了解决这个问题,我想知道是否有一种手动方式以某种方式注入这些捆绑文件(我只有三个;1 css,2 个 js 文件)在我自己的 index.html
模板?这将使构建更加一致。
我的 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 不会用空模板覆盖输出。