I'm building a multi page web app with webpack.
(我正在使用webpack构建多页Web应用程序。)
Webpack handles my js, css and html files.(Webpack处理我的js，css和html文件。)
The rest is php and assets in my public folder.(其余的是php和资源在我的公共文件夹中。)
I'm using the webpack dev server via php localhost proxy.(我正在通过php localhost代理使用webpack开发服务器。)
Hot reloading works fine with my js and css files from /src, but dev server doesn't recognize my html-webpack-plugin templates.
(从/ src对我的js和css文件进行热重装可以正常工作，但开发服务器无法识别我的html-webpack-plugin模板。)
They get built by the plugin like this:(它们是由如下插件构建的：)
// template.html
<!DOCTYPE html>
...
</head>
<body>
...
<div class="pagetitle"><%= htmlWebpackPlugin.options.title %></div>
...
<%= htmlWebpackPlugin.options.body %>
htmlWebpackPlugin.options.body is a html file that gets included via options.
(htmlWebpackPlugin.options.body是一个通过选项包含的html文件。)
That file doesn't trigger the recompile if I change it.(如果我更改该文件，则不会触发重新编译。)
It does get triggered if I change template.html though.(如果我更改template.html，它的确会触发。)
I tried switching them around to options.body being the template and template.html the option, but then then the options.title variable doesn't work.
(我尝试将它们切换到options.body作为template和template.html option，但是然后options.title变量不起作用。)
Setting devServer.watchContentBase to /src triggers the reload, but not the recompile, because he thinks the file is static.
(将devServer.watchContentBase设置为/ src会触发重新加载，但不会触发重新编译，因为他认为文件是静态的。)
Is there any way to make the dev server recompile and reload if any file in /src changes?
(如果/ src中的任何文件发生更改，是否有任何方法可以使dev服务器重新编译和重新加载？)
Below is my webpack config:
(以下是我的webpack配置：)
// webpack.config.js
const webpack = require('webpack');
const path = require('path');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');
const newHWP = dir => {
return new HtmlWebpackPlugin({
filename: `${dir}/index.html`,
template: './src/html/template.html',
inject: 'head',
title: dir,
body: fs.readFileSync(`./src/html/${dir}.html`)
});
};
const newRootHWP = dir => {
return new HtmlWebpackPlugin({
filename: `${dir}.html`,
template: './src/html/root.html',
inject: 'head',
body: fs.readFileSync(`./src/html/${dir}.html`)
});
};
module.exports = {
mode: 'development',
stats: {
colors: true,
maxModules: 500,
excludeModules: false,
modulesSort: '!size'
},
watch: true,
watchOptions: {
ignored: ['node_modules']
},
entry: './src/js/index.js',
output: {
filename: 'js/main.js',
path: path.resolve(__dirname, 'public'),
publicPath: '/'
},
module: {
rules: [
{
test: /.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
url: false,
sourceMap: true
}
}
]
}
]
},
devServer: {
port: 8080,
publicPath: '/',
contentBase: './public',
watchContentBase: true,
proxy: {
'**': {
target: 'http://localhost:8000',
secure: false
}
}
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new MiniCssExtractPlugin({
filename: 'css/main.css'
}),
new MomentLocalesPlugin({
localesToKeep: ['de']
}),
newRootHWP('index'),
newRootHWP('register'),
newHWP('abrechnung'),
newHWP('aushilfen'),
newHWP('auswerten'),
newHWP('eintragen'),
newHWP('mitarbeiter'),
newHWP('readme'),
newHWP('zeiten')
]
};
ask by user11918503 translate from so
