'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 或批处理文件的解决方法(webpack热加载)

【README】webpack-dev-server 是一个支持热编译的服务器（动态编译）

【1】问题

'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 或批处理文件的解决方法

 

【2】安装 webpack 服务器， 如下：

参考指南： https://webpack.docschina.org/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server 

npm install --save-dev webpack-dev-server

安装完成后，直接执行 webpack-dev-server 会报错，如下：

 

【3】解决方法

查看package.json 下的 scripts对象是否有 webpack-dev-server 命令，如果没有，则添加上

"dev": "webpack-dev-server --open" ，代码如下：

{
  "name": "webpack_test",
  "version": "1.0.0",
  "devDependencies": {
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "style-loader": "^1.0.0",
    "url-loader": "^2.2.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  },
  "scripts": {
    "dev": "webpack-dev-server --open"
  }
}

再次执行 npm run dev , 成功，如下：

 

【4】最后再附上我的webpack.config.js 

// node内置的模块用来去设置路径的
const path = require('path');

module.exports = {
    // 入口文件配置， 当前项目的主文件
    entry: './src/js/entry.js',
    // 出口/输出的配置
    output: {
        // 输出的文件名
        filename: 'bundle.js',
        // publicPath: 'js/',  // 设置为index.html提供资源服务的时候带有强制性（会对自动打包有影响）
        // 输出文件路径, resolve 路径拼接
        path: path.resolve(__dirname, 'dist/js/'),
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }
        ],
    },

    devServer: {
        contentBase: './dist/' // webpack-dev-server 默认服务于根路径下的index.html
    },
};