Webpack开发服务器无法热更新.vue文件

Question

我一直在做一个项目，确信HMR正常工作，如果我更新任何 .js 文件，webpack就会编译模块并进行热替换。

我正在处理一个 .vue 文件，webpack 会重新编译，但是没有全新的 HMR。

希望有人能看一下并告诉我是否有问题：

我在 cli 中使用的脚本如下：

webpack-dev-server --d --watch --output-path ./public --config ./_src/webpack.config.js --progress --env.dev

我想最重要的部分是这个:

devServer: {
    contentBase: 'public',
    hot: true,
    filename: 'main.js',
    overlay: true,
    stats: { colors: true },
    port: 3000,
    proxy: {
      '/': {
        target: 'http://moment.local/',
        secure: false,
        changeOrigin: true
      }
    },
    historyApiFallback: true
  },

但是如果有帮助的话，下面是我的整个配置文件。

const webpack = require('webpack')
const {resolve} = require('path')

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = env => {
const addPlugin = (add, plugin) => add ? plugin : undefined
const ifProd = plugin => addPlugin(env.prod, plugin)
const removeEmpty = array => array.filter(i => !!i)

// Our Sass Extraction Plugin
const extractSass = new ExtractTextPlugin({
  filename: 'style.css',
  disable: env.dev
})

return {
  entry: {
    'vendor': ['jquery', 'KlaviyoSubscribe', 'learnq', 'select2', 'slick-carousel', 'moment', 'lodash'],
    'main': resolve(__dirname, './js/index.js')
  },
  output: {
    filename: '[name].js',
    path: resolve(__dirname, '../public/'),
    pathinfo: !env.prod
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: 'vue-style-loader!css-loader!postcss-loader!sass-loader', // <style lang='scss'>
            scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader', // <style lang='scss'>
            sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax' // <style lang='sass'>
          }
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      { test: /\.s(c|a)ss$/,
        use: extractSass.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                sourceMap: true
              }
            },
            'postcss-loader?sourceMap',
            'sass-loader?sourceMap'
          ]
        })
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  devtool: env.prod ? 'source-map' : 'eval',
  devServer: {
    contentBase: 'public',
    hot: true,
    filename: 'main.js',
    overlay: true,
    stats: { colors: true },
    port: 3000,
    proxy: {
      '/': {
        target: 'http://moment.local/',
        secure: false,
        changeOrigin: true
      }
    },
    historyApiFallback: true
  },
  bail: env.prod, // Fail out on the first error if production
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  plugins: removeEmpty([
    extractSass,
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      // Let's create js for our vendor scripts
      name: 'vendor',
      // (with more entries, this ensures that no other module
      //  goes into the vendor chunk)
      minChunks: Infinity
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'commons',
      filename: 'commons.js',
      // (Modules must be shared between 2 entries)
      minChunks: 2
    })
    ...
  ])
  }
}

我在这方面确实有些困难，所以任何帮助都将是非常好的。

- Devan Flaherty

Answer 1

听起来你想要“热更新”的功能，但是你在发布的脚本中缺少--hot选项。该选项的文档在这里。

你已经有很多选项了，只需添加--hot即可解决问题。 更新：我看到你在webpack配置的devServer属性中设置了hot:true，但如果我在cli中不使用--hot，我会在控制台中收到以下错误，所以我建议使用它，尽管你可能认为它已经被配置文件覆盖了 - 实际上并没有。

Uncaught Error: [HMR] Hot Module Replacement is disabled.

- Geek Stocks

Answer 2

在您的根目录下添加一个名为vue.config.js的文件。

在其中，您可以通过以下方式启用热重载：

module.exports = {
    devServer: {
        watchOptions: {
            poll: true
        }
    }
};

我在一个通过vue create设置的项目中使用了这些设置。

- Bergrebell