我运行此命令:
webpack-dev-server --content-base deployment/deployment --hot --inline
这会正确启动我的网站。然后我更新了randomFile.js
语法错误(插入“abc”),这会导致lint错误或某种失败。当我保存randomFile.js
webpack报告“webpack:bundle现在有效”并显示我修改的文件以及另外两个文件(不知道为什么其他2个存在)。 Webpack还报告发出“bundle.js”和“guid.hot-update.json”。
该网站未更新。
我检查了
deployment/deployment/js/bundle.js
并且没有更新。 击>
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
devtool: 'eval',
entry: [
'webpack-hot-middleware/client',
'./src/main.js'
],
output: {
path: path.join(__dirname, 'deployment/deployment/js'),
filename: 'bundle.js',
publicPath: '/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
],
module: {
loaders: [{
test: /\.jpg/,
loader: 'file'
}, {
test: /\.css$/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
]}, {
test: /\.scss$/,
loaders: [
'style?sourceMap',
'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
'resolve-url',
'sass?sourceMap'
]
},{
loader:'babel-loader',
exclude: path.resolve(__dirname, "node_modules"),
test: /\.js/
}]
}
}
更新
学习webpack-dev-server后没有更新原始的bundle.js我想我知道问题来自哪里。
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Site</title>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bundle.css" />
<input type="hidden" id="myUrlConfigValueInput" value="http://localhost/FibReactHello2/js/bundle.js">
<input type="hidden" id="myAPIUrlConfigValueInput" value="http://localhost/mySite/api/">
</head>
<body>
<div id="appEntrypt"></div>
<script src="js/bundle.js"></script>
</body>
</html>
ReactJS
在appEntrypt
处有一个入口点。 bundle.js上有一个依赖项。因为webpack-dev-server不更新此文件(仅限内存文件),所以我的站点永远不会更新。
我该怎么做才能解决这个问题?
答案 0 :(得分:6)
经过一番广泛的讨论后,似乎publicPath指令导致webpack dev服务器提供静态编译的bundle而不是dev服务器在内存中生成的bundle。将publicPath更改为/js/
修复了一些问题:
output: {
path: path.join(__dirname, 'deployment/deployment/js'),
filename: 'bundle.js',
publicPath: '/js/'
},