3

用于问题测试的简约存储库

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

  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（webpack 入口点）

    // 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 代替 pug 是一样的。怎么可能修好？

4

2 回答 2

1

我不确定您的设置有什么问题，但它通常应该可以工作。这是一个简约的 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'
        })
    ],
};
于 2017-04-29T21:56:55.737 回答
1

你在用IDE吗？对于 Intelij：设置 ▶︎ 系统设置 ▶︎ 同步 ▶︎ 禁用安全写入。也许它对你有帮助。谢谢

于 2017-02-13T23:03:26.357 回答