编辑HTML或CSS文件后,“ Webpack-Dev-Server”不会自动重新加载

时间:2019-08-15 19:15:49

标签: javascript html webpack frontend webpack-dev-server

我正在努力迫使我的webpack-dev-server在编辑项目中的任何文件后自动刷新。对于通过webpack插件处理的Javascript / Typescript文件,它可以完美工作,但是在我编辑不受w​​ebpack影响的任何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文件后,没有输出,也没有任何错误消息。该网页未刷新,并且只有手动刷新页面才能看到更改。

0 个答案:

没有答案