Question

Minimalistic repository for problem testing

我现在拥有最简单的项目结构：

  root
    |-src
    --|index.pug
    --|--styles.css
    --|--app.js
    |-public
    --|--img

的软件包：

"devDependencies": {
    "css-loader": "^0.26.1",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.26.0",
    "pug": "^2.0.0-beta6",
    "pug-loader": "^2.3.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }

在app.js中我只需要样式并使用app.js作为webpack.config.js中的条目，如下所示：

const HtmlWebpackPlugin = require('html-webpack-plugin');

let src = {
    app: path.resolve(__dirname,'src', 'app.js'),
    public: path.resolve(__dirname, 'public'),
    html: {template: path.resolve(__dirname, 'src', 'index.pug')}
}

module.exports = {
    resolve: ['', '.js', '.css', '.pug'], // tried with or without it. Change nothing
    entry: src.app,
    output: {
        path: src.public,
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.pug$/,
                loader: 'pug-loader',
                query: {
                    pretty: true
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'index.html',
            template: src.html.template
        })
    ],
    devServer: {
        contentBase: src.public
    },
    devtool: 'sourcemap'
}

运行webpack-dev-server：webpack-dev-server --hot --inline

之后我得到了很好的热替换css，但不是html。当我更改我的index.pug模板文件时，我得到一些控制台消息取决于app.js中所需的pug-template。

文件 app.js （网络包入口点）

    // without requiring template got: 
    //[WDS] App updated. Recompiling... [WDS] App hot update...
    // and nothing happens
/*
When template required I got these messages:

[HMR] Cannot apply update. Need to do a full reload!
(anonymous) @ dev-server.js:18
hotApply @ bootstrap f3d9aa9…:390
hotUpdateDownloaded @ bootstrap f3d9aa9…:303
hotAddUpdateChunk @ bootstrap f3d9aa9…:283
webpackHotUpdateCallback @ bootstrap f3d9aa9…:4
(anonymous) @ 0.f3d9aa9….hot-update.js:1
dev-server.js:19[HMR] Error: Aborted because 83 is not accepted
    at hotApply (http://localhost:8080/bundle.js:391:31)
    at hotUpdateDownloaded (http://localhost:8080/bundle.js:304:13)
    at hotAddUpdateChunk (http://localhost:8080/bundle.js:284:13)
    at webpackHotUpdateCallback (http://localhost:8080/bundle.js:5:12)
    at http://localhost:8080/0.f3d9aa9823a803392473.hot-update.js:1:1
And page reloads by refreshing. 
*/
    require('./index.pug'); 

    require('./styles.css');

用纯HTML而不是哈巴狗是一样的。如何解决？

Answer 1

您使用的是IDE吗？对于Intelij：设置▶︎系统设置▶︎同步▶︎禁用安全写入。也许对你有所帮助。感谢

Answer 2

我不确定您的设置有什么问题，但通常应该有效。这是一个简约的webpack配置，其中带有HMR的html和css注入都可以工作。希望它有所帮助：

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    module: {
        rules: [{
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    devtool: false,
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ],
};

Webpack HMR不会重新加载html

2 个答案: