vue模块热替换

模块热替换

模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。模块热替换无需完全刷新页面，局部无刷新的情况下就可以更新。

配置：
注意：要安装了 webpack-dev-server 模块，

安装命令：

npm install --save-dev webpack-dev-server@3.7.2

webpack文档：
https://webpack.docschina.org/guides/hot-module-replacement/

新增配置：



完整代码：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入vue-loader插件
const { VueLoaderPlugin } = require('vue-loader')
const webpack = require('webpack');
module.exports = {
    mode: 'development',//production development开发环境不压缩dist 
    entry: './src/main.js',
    devServer: {
        // static: './dist',
        contentBase: './dist',
         hot: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        }),
         // 模块热替换
        new webpack.HotModuleReplacementPlugin(),
        // 请确保引入这个插件！
        new VueLoaderPlugin()
    ],

    output: {
        path: path.join(__dirname, './dist/'),
        filename: 'bundle.js'
    },

    module: { // 模块      
        rules: [ // 规则   
            {
                test: /\.css$/, // 正则表达式，匹配 .css 文件资源        
                use: [  // 使用的 Loader ,注意顺序不能错           
                    'style-loader',//js识别css
                    'css-loader'//将css转换为js
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules)/,//排除的目录
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']//babel中内容的转换规则工具
                    }
                }
            },
            {//处理.vue单文件文件
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    // resolve: {
    //     alias:
    //         { 'vue$': 'vue/dist/vue.js' }
    // }
}

**访问 dist/index.html ,
然后对 .vue 单文件组件更新，
会局部热替换。
注意：对 js 文件是无效果的，如修改main.js不会热替换的。**