Мой проект состоит из двух разных проектов:
- Проект SPA, использующий Webpack
- Внутренний проект, который загружает в него SPA
Я разместил webpack-dev-server для обслуживания на http://localhost:2902 и внутренний сервер на http://localhost/my-proj.Whenever Я запускаю webpack-dev-server
, чтобы связать и просмотреть свои изменения, он корректно компилирует изменения, НО это необновите Интернет, и я должен сделать это вручную.
, например:
http://localhost/my-proj
<html>
<head></head>
<body>
<div id="app"></div>
<script type="text/javascript" src="http://localhost:2902/bundle.js"></script>
</body>
</html>
Мой файл конфигурации разработки веб-пакета:
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
entry: [
'./App/app.js'
],
output: {
path: path.resolve(__dirname + '/dist'),
filename: 'bundle.js',
publicPath: '/'
},
watch:true,
devServer: {
inline: true,
contentBase: false,
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
overlay:true,
watchOptions: {
aggregateTimeout: 300,
poll: true,
},
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
}
},
module: {
rules: [...]
},
plugins: [
new MiniCssExtratPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
}),
new VueLoaderPlugin(),
]
};
Я много читаювопросов и статей о моей проблеме, но я не мог понять, что не так с моей конфигурацией.
Webpack 4.30.0 Webpack Dev Server 3.3.1