【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},
};