vue打包后，缓存问题（webpack热更新）Error: Cannot find module ‘webpack/bin/config-yargs‘ 报错原因

先说下我用到的插件

用到的是webpack-dev-server

1.先下载webpack-dev-server、webpack,webpack4.0以上都要安装webpack-cli,否则会报错

    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
    at Function.Module._load (internal/modules/cjs/loader.js:507:25)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)

安装webpack-dev-server

npm install webpack-dev-server -D //本地安装

安装webpack

npm install webpack -D //本地安装
npm install webpack -g //全局安装

安装webpack-cli

npm install webpack-cli -D //本地安装

2.在根目录创建一个文件webpack.config.js,配置如下

const webpack = require('webpack') //引入webpack

module.exports = {
    entry: __dirname + '/src/main.js', //入口文件
    output: {		//出口文件
        publicPath: '/dist',// 必须加publicPath
        path: __dirname + './dist',
        filename: 'bundle.js'
    },
    devServer: {
        host: 'localhost', //访问地址
        port: '8080',	//访问端口
        open: true, //自动拉起浏览器
        hot: true //热加载
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin() //热更新插件
    ]
}

更新 css 文件需要用 loader 进行转换

需要下载css-loader和style-loader

npm install css-loader style-loader

我是在module中配置的

module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }]
    },

3.在package.json中配置

"scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack --mode development",
        "start": "webpack-dev-server"
    },

4.运行

npm run start

最后最后，说说我遇到的坑！！！

我之前下载的webpack、webpack-cli、webpack-dev-serve不兼容！！！

去网上查了半天原因，原来是兼容问题

后来我更改了webpack、webpack-cli和webpack-dev-server的版本，成功运行

如果看到这个界面就说明已经成功了

一定要注意兼容问题