账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack-dev-server 只自动更新JS文件 其它不更新
    67
    0

    我修改less 文件 chrome 控制台有提示:

    [WDS] Hot Module Replacement enabled.
    2app.bundle.js?385c225…:1102 [WDS] App updated. Recompiling...
    app.bundle.js?385c225…:1245 [WDS] App hot update...
    app.bundle.js?385c225…:754 [HMR] Checking for updates on the server...
    app.bundle.js?385c225…:754 [HMR] Nothing hot updated.
    app.bundle.js?385c225…:754 [HMR] App is up to date.

    但就是不更新, 修改js文件就可以

    下面是我写的代码

    package.json:

    {
      "name": "webpacktest",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --content-base ./ --open --inline --hot --compress",
        "build": "webpack -d --watch"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "webpack": "^3.10.0"
      },
      "devDependencies": {
        "babel-loader": "^7.1.3",
        "css-loader": "^0.28.10",
        "extract-text-webpack-plugin": "^3.0.2",
        "happypack": "^4.0.1",
        "html-webpack-plugin": "^3.0.4",
        "less": "^3.0.1",
        "less-loader": "^4.0.6",
        "sass": "^1.0.0-beta.5.3",
        "sass-loader": "^6.0.7",
        "style-loader": "^0.20.2",
        "webpack-dev-server": "^2.11.2"
      }
    }
    

    webpack.config.js :

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    
    module.exports = {
      entry: './src/app.js',
      output: {
        path: __dirname + '/dist',
        filename: 'app.bundle.js'
        //publicPath: '/dist'
      },
      plugins: [
        new HtmlWebpackPlugin({
          minify: {
            collapseWhitespace: true,
          },
          hash: true,
        }),
        new ExtractTextPlugin('style.css')
      ],
      module: {
        rules: [
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: ['css-loader', 'less-loader']
                }),
            }
        ]
      },
      devServer: {
        port: 9000
      }
    };

    app.js :

    import css from './app.less';
    
    console.log('hello world');
    document.body.innerHTML = 'hello world';

    app.less :

    @base: #000;
    
    
    body {
      background: @base;
      color: #fff
      
    }
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 湛兮若存 普通会员 1楼

      Webpack-dev-server 可能会自动更新 JavaScript 文件,但是其他文件(如 CSS、图片等)可能会没有更新。这是因为在热重载(Hot reloading)的模式下,webpack-dev-server会自动重新加载正在浏览器中运行的文件,而不是在每次刷新时都重新加载所有文件。这可能会导致某些文件没有更新。

      如果你想要让所有文件都更新,你可以使用 webpack-dev-server --hot 参数来启用热重载。这样,webpack-dev-server 将自动重新加载正在浏览器中运行的文件,包括 CSS、图片等。

      但是,需要注意的是,这可能会导致浏览器缓存问题,因此如果你需要频繁更新文件,可能需要考虑使用 CDN(内容分发网络)来缓存文件。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部