webpack vue 热部署配置

Posted 2023-04-27

参考技术A 使用webpack编译vue文件，支持es6语法，至少需要的依赖包为：

通过package.json文件script进行脚本配置

npm run dev

通过完成以上的配置，接着就可以在入口文件中使用 vue 创建项目了

Webpack 开发服务器不热重载 .vue 文件

【中文标题】Webpack 开发服务器不热重载 .vue 文件

【英文标题】：Webpack Dev Server Not Hot Reloading .vue files

【发布时间】：2018-08-13 18:23:59

【问题描述】：

一直在做一个项目，并且确定 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
    )
    ...
  ])
  

在这里真的很挣扎，所以任何事情都会很棒。

【参考方案1】：

听起来您想要“热”行为，但您发布的脚本中缺少--hot 选项。该选项的文档is here.

你已经有很多选择了；只需添加 --hot 就可以了。

更新： 我确实看到您在 webpack 配置的 devServer 属性中设置了 hot: true，但如果我不在 cli 中使用 --hot，我会在控制台，所以这就是为什么我说要使用它，即使你认为它会被配置覆盖 - 它不是。

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

【参考方案2】：

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

在里面你可以通过以下方式启用热重载：

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

我在通过vue create 设置的项目中使用了此设置。