webpack-dev-server 只自动更新JS文件 其它不更新

发布于 2022-09-06 19:49:17 字数 2265 浏览 22 评论 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
  
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

冷心人i 2022-09-13 19:49:17

这里没人吗 要石沉大海了??

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文