vue-loader의 핫 새로고침은 템플릿의 구조 변경 시에만 작동함

vue-loader의 핫 새로고침은 템플릿의 구조 변경 시에만 작동함

기존 프로젝트에서 vue + vue-loader + HMR을 설정했습니다.

vue 컴포넌트가 올바르게 로드되어 렌더링되고 대부분 정상적으로 동작합니다.

핫 모듈 새로고침 부품이 설정 및 로딩되어 있습니다.

단, 변경 내용이 컴포넌트의 텍스트노드일 경우에는 업데이트가 적용되지 않는 것 같습니다.

예를 들어 다음과 같은 컴포넌트가 있는 경우:

<template lang="html">
  <div>
    <h1>I'm a Component</h1>
  </div>
</template>

<script>
export default {
}
</script>

그리고 이렇게 바꾸겠습니다.

<template lang="html">
  <div>
    <h1>I'm a Component updated</h1>
  </div>
</template>

<script>
export default {
}
</script>

그러면 브라우저 콘솔에서 HMR 업데이트를 볼 수 있습니다.

그러나 컴포넌트가 업데이트되지 않고 "나는 컴포넌트입니다"라고 표시됩니다.

단, 컴포넌트의 html 구조를 다음과 같이 약간 변경하면 다음과 같습니다.

<template lang="html">
  <div>
    <h1>I'm a Component updated</h1>
    <p>do it</p>
  </div>
</template>

<script>
export default {
}
</script>

그러면 콘솔에 HMR 로그가 표시되지만 이번에는 컴포넌트가 업데이트됩니다.

동작은 일관되게 동일합니다. 텍스트 변경 = 업데이트 없음.

로더의 설정에 특별한 것은 없습니다.

{
test: /\.vue$/,
loader: 'vue-loader',
options: {
    loaders: {
    }

}

개발 서버는 다음 작업에서 gulp을 통해 실행됩니다.

// Start a webpack-dev-server
const hot_webpack_config = cloneDeep(webpack_config)

hot_webpack_config.output.filename = 'frontend.hot.js'
hot_webpack_config.output.publicPath = PUBLIC_DEV_SERVER
hot_webpack_config.entry.unshift("webpack-dev-server/client?"+PUBLIC_DEV_SERVER, "webpack/hot/dev-server");
hot_webpack_config.plugins.push(new webpack.HotModuleReplacementPlugin())

var compiler = webpack(hot_webpack_config)

var WebpackDevServer = require("webpack-dev-server")

new WebpackDevServer(compiler, {
    //noInfo: true,
    hot: true,
    stats: {
      assets: false,
      colors: true,
      version: false,
      timings: false,
      chunks: false,
      chunkModules: false
    },
    inline: true,
    publicPath: hot_webpack_config.output.publicPath,
    headers: { "Access-Control-Allow-Origin": "*" }

}).listen(4000, "localhost", function(err) {
    if(err) throw new gutil.PluginError("webpack-dev-server", err)
    // Server listening
    gutil.log(chalk.blue("Hot server listening at http://0.0.0.0:4000"))

})

이 문제를 해결할 다른 곳을 찾아야 할 지 모르겠어요.말씀드렸듯이, 텍스트 노드 업데이트에는 적용되지 않습니다.

.vue-cli webpack-simple유사합니다().하지만, 노드는 갱신하지 그것들은 텍스트노드를 갱신하지만 내 것은 갱신하지 않습니다:(

단서는?

업데이트: 관련 종속성 버전

vue 2.3.4
vue-loader 13.0.0 
vue-template-compiler 2.3.4 
webpack 2.6.1 
webpack-dev-server 2.5.0 

업데이트 2: 변경 적용<script>컴포넌트의 일부가 텍스트노드를 새로 고칩니다.

업데이트 3:

// webpack_config.js
/* jshint node: true */
var webpack = require('webpack'),
    path = require('path'),
    package = require('./package.json'),
    gutil = require('gulp-util'),
    chalk = require('chalk');

const PUBLIC_DEV_SERVER = package.config.build.PUBLIC_DEV_SERVER
const ENTRY = package.config.build.ENTRY

var PROD = process.env.NODE_ENV == 'production';

let config = {
    entry: [
        ENTRY
    ],
    output: {
        path: path.join(__dirname, 'resources', 'js'),
        filename: 'frontend.min.js'
    },
    module: {

        rules: [{
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                    }

                }
            }, {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'stage-0'],
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }

};

if (process.env.NODE_ENV === 'production') {
    gutil.log(chalk.red("Build for production"));
    config.devtool = '#source-map'
    config.entry = [
        ENTRY
    ];
    // http://vue-loader.vuejs.org/en/workflow/production.html
    config.plugins = (config.plugins || []).concat([
        new webpack.DefinePlugin({
          'process.env': {
            NODE_ENV: '"production"'
          }
        }),
        new webpack.optimize.UglifyJsPlugin({
          sourceMap: true,
          compress: {
            warnings: false
          }
        }),
        new webpack.LoaderOptionsPlugin({
          minimize: true
        })
      ])
} else {
    gutil.log(chalk.red("Build for development"));
    config.devtool = '#eval-source-map' //"cheap-module-eval-source-map"
    config.plugins = [
    ]
}

module.exports = config

PUBLIC_DEV_SERVER로 설정되어 있다."http://localhost:4000/"

ENTRY로 설정되어 있다."./src/js/frontend.js"

여러 번 수정해 봤는데 몇 가지 설정으로 수정이 된 것 같았는데 갑자기 이전 버전으로 되돌리기 시작했어요.

결국 해결 방법은 간단했다고 생각합니다.

rm -rf node_modules/
npm i

하지만 정확히 어느 부분이 무너졌는지 모르겠어요.

언급URL : https://stackoverflow.com/questions/44961197/hot-reload-on-vue-loader-only-works-with-structural-changes-to-the-template