所以我已经设置了webpack和webpack-dev-server
,但webpack-dev-server
没有自动重新加载。如果我修改文件并保存它,那么在我手动刷新之前,浏览器没有任何变化。
这是我的webpack配置和运行webpack-dev-server
的脚本文件。有没有人看到任何可能阻止自动重载工作的东西?
我通过阅读多个教程,文档以及阅读react-create-app
生成的文件来将这些内容放在一起。
配置/ webpack.config.dev.js
'use strict';
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
const webpack = require('webpack');
const extractSass = new ExtractTextPlugin('style.css');
module.exports = {
entry : './src/index.jsx',
eslint: {configFile: './src/.eslintrc.json'},
module: {
loaders: [
{
exclude: /node_modules/,
include: ['src'],
loader: 'babel',
test : /(\.js|\.jsx)$/
},
{
exclude: /node_modules/,
include: ['src']
loader : extractSass.extract([ 'css', 'postcss', 'sass' ]),
test : /\.scss$/
}
],
preLoaders: [
{
exclude: /node_modules/,
loader : 'eslint',
query : {presets: [ 'react', 'latest' ]},
test : /(\.js|\.jsx)$/
}
]
},
output: {
filename : 'bundle.js',
path : 'dist',
publicPath: '/'
},
plugins: [
extractSass,
new HtmlWebpackPlugin({
inject : true,
template: paths.appHtml
}),
new webpack.HotModuleReplacementPlugin({multistep: true})
],
postcss: () => [
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9'
]
})
]
};
脚本/ dev.js
使用$ yarn run dev
'use strict';
const WebpackDevServer = require('webpack-dev-server');
const config = require('../config/webpack.config.dev.js');
const webpack = require('webpack');
const compiler = webpack(config);
const server = new WebpackDevServer(compiler, {
clientLogLevel : 'warn',
compress : true,
contentBase : 'public',
filename : config.output.filename,
historyApiFallback: true,
hot : true,
inline : true,
lazy : false,
noInfo : true,
publicPath : '/',
quiet : true,
stats : 'errors-only',
watchOptions : {
aggregateTimeout: 300,
poll : 1000
}
});
server.listen(8080, 'localhost', () => {
console.log('Listening on port 8080');
});
答案 0 :(得分:4)
根据webpack dev server documentation,您应该将此入口点添加到webpack配置中以支持自动刷新。
config.entry.unshift("webpack-dev-server/client?http://localhost:8080/");
答案 1 :(得分:3)
jontem在他的回答中指出我的配置缺少webpack-dev-server
客户端。
以下是我采用他的解决方案并设置HMR的步骤。
config/webpack.config.dev.js
module.config = {
// ...
entry: [
// converted entry to an array
// to allow me to unshift the client later
path.resolve(__dirname, '../src/index.jsx')
],
// ...
module: {
loaders: {
// ...
{
// Use style loader instead of ExtractTextPlugin
// To allow for style injection / hot reloading css
exclude: /node_modules/,
loaders: [ 'style', 'css', 'postcss', 'sass' ],
test : /\.scss$/
},
// ...
}
}
}
scripts/dev.js
'use strict';
const WebpackDevServer = require('webpack-dev-server');
const config = require('../config/webpack.config.dev.js');
const webpack = require('webpack');
// unshift `webpack-dev-server` client
// and hot dev-server
config.entry.unshift('webpack-dev-server/client?/', 'webpack/hot/dev-server');
const compiler = webpack(config);
// ...
答案 2 :(得分:2)
我遇到了同样的问题,并且以下配置启用了静态和内存中的捆绑包自动重新加载。关键是启用devServer.watchContentBase。
<强>配置/ webpack.config.dev.js 强>
...
module.exports = {
...
devServer: {
contentBase: ...,
publicPath: ...,
watchContentBase: true
},
...
}
<强>的package.json 强>
{
...
"scripts": {
"develop": "webpack-dev-server --open --mode development --config config/webpack.config.dev.js",
...
}
...
}
答案 3 :(得分:1)
请在您的webpack配置中添加以下内容并尝试。
devServer: {
hot: true,
inline: true,
host: "localhost",
port: 8082,
watchOptions: {
poll: true
}
}
注意:我使用的是webpack版本^ 3.11.0
答案 4 :(得分:0)
我有一个类似的问题,可以通过添加
来解决。 watchOptions: {
poll: true
}
当我初次安装webpack启动程序时,对webpack.config.js进行了一周的更改后,一切都可以正常工作,并且停止运行。我修改了各种建议,其中一个有用的建议是watchOptions:{poll:true}
仅供参考,我是webpack 4,其中“ webpack”:“ 4.29.6”,“ webpack-cli”:“ ^ 3.3.0”,“ webpack-dev-server”:“ 3.3.1”
devServer: {
port: 3000,
contentBase: './',
watchOptions: {
poll: true
}
}
答案 5 :(得分:0)
也
extract-loader
,则自动重新加载将无效devServer: {
// ,,,
contentBase: '/your/path'
watchContentBase: true
hot: true,
},
除非您在浏览器中按F5键,否则防止刷新网页中的静态文件
答案 6 :(得分:0)
此第三方webpack开发服务器文档具有我需要的答案: https://wohugb.gitbooks.io/webpack/content/dev_tools/webpack-dev-server.html
相关部分转载如下:
在webpack-dev-server配置中没有inline:true标志,因为webpack-dev-server模块无法访问webpack配置。相反,用户必须将webpack-dev-server客户端入口点添加到webpack配置中。
要执行此操作,只需将webpack-dev-server / client?http://:添加到(所有)入口点。即具有以上配置:
var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080");
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {...});
server.listen(8080);
答案 7 :(得分:0)
我也遇到了同样的问题,在添加此代码行后,我的问题解决了。现在自动重新加载工作
devServer : {
contentBase : './',
watchOptions : {
poll: true
}
}
答案 8 :(得分:0)
对于使用 Webpack v5 遇到此问题的任何人,您需要在配置中将 target
设置为 web
,如下所示:
module.exports = {
entry: "...",
target: "web",
.....
}