我正在努力迫使我的webpack-dev-server在编辑项目中的任何文件后自动刷新。对于通过webpack插件处理的Javascript / Typescript文件,它可以完美工作,但是在我编辑不受webpack影响的任何HTML或CSS文件后,它不会刷新。
Webpack's documentation指出,可以更改devServer.watchContentBase,以便在更改devServer.contentBase提供的任何文件时将重新加载整个页面。我确保将 card:{
shadowOffset: { width: 0, height:0 },
shadowOpacity: 0.5,
shadowRadius: 10,
}
指向正确的目录,但是在编辑HTML或CSS文件时,设置contentBase
仍然不会重新加载。
在watchContentBase
内,我定义了一个脚本:package.json
,我正在通过"server": "webpack-dev-server"
启动服务器
文件结构:
npm run server
webpack.config.js:
.
├── dist
│ ├── index.html
│ ├── css
│ │ └── style.css
│ └── js
│ └── bundle.js
├── src
│ └── js
│ └── script.ts
├── webpack.config.js
└── package.json
package.json:
const path = require('path');
module.exports = {
entry: {
main: './src/js/script.ts',
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist/js')
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ]
},
devServer:{
watchOptions: {
ignored: /node_modules/
},
contentBase: [
'./dist',
'./dist/css'
],
watchContentBase: true,
inline: true
}
};
当我运行{
...
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"server": "webpack-dev-server"
},
...
"devDependencies": {
"ts-loader": "^6.0.4",
"typescript": "^3.5.3",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6",
"webpack-dev-server": "^3.8.0"
},
...
}
时,输出如下:
npm run server
在编辑Javascript / Typescript文件后,它会自动进行编译和捆绑。这是发生这种情况时的输出:
ℹ wds: Project is running at http://localhost:8080/
ℹ wds: webpack output is served from /
ℹ wds: Content not from webpack is served from ./dist, ./dist/css
ℹ wdm: Hash: 462aeb1295ae095f57f1
Version: webpack 4.39.2
Time: 2346ms
Built at: 08/15/2019 1:19:20 PM
Asset Size Chunks Chunk Names
bundle.js 361 KiB main [emitted] main
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src/js/script.ts 40 bytes {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/html-entities/index.js] 231 bytes {main} [built]
[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.85 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/js/script.ts] 977 bytes {main} [built]
+ 18 hidden modules
ℹ wdm: Compiled successfully.
编辑任何HTML或CSS文件后,没有输出,也没有任何错误消息。该网页未刷新,并且只有手动刷新页面才能看到更改。