【README】webpack-dev-server 是一個支持熱編譯的服務(wù)器（動態(tài)編譯）

【1】問題

'webpack-dev-server' 不是內(nèi)部或外部命令，也不是可運行的程序 或批處理文件的解決方法

?

【2】安裝 webpack 服務(wù)器， 如下：

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

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

安裝完成后，直接執(zhí)行?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"} }

再次執(zhí)行 npm run dev , 成功，如下：

?

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

// node內(nèi)置的模塊用來去設(shè)置路徑的 const path = require('path');module.exports = {// 入口文件配置， 當前項目的主文件entry: './src/js/entry.js',// 出口/輸出的配置output: {// 輸出的文件名filename: 'bundle.js',// publicPath: 'js/', // 設(shè)置為index.html提供資源服務(wù)的時候帶有強制性（會對自動打包有影響）// 輸出文件路徑, 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 默認服務(wù)于根路徑下的index.html}, };

?

總結(jié)

以上是生活随笔為你收集整理的'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序 或批处理文件的解决方法(webpack热加载)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。