Question

here是我测试webpack-dev-server的项目

这是我的package.json

{
  "dependencies": {
  },
  "devDependencies": {
    "webpack-dev-server": "^3.11.0",
    "css-loader": "^3.5.3",
    "serve": "^11.3.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  }
}

这是webpack端口

const path = require('path');

module.exports = {
  entry: ['./src/t.js', "./src/t2.js"],
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },

  devServer: {
    port:9000
  },

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

  resolve: {
    modules: [
      path.resolve(__dirname, "src")
    ],
  },
  devtool: "source-map"
};

当我运行npx webpack-dev-server

时

ERROR in (webpack)-dev-server/client/overlay.js
Module not found: Error: Can't resolve 'ansi-html' in '/home/roroco/Downloads/js/test-webpack/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client/overlay.js 4:15-35
 @ (webpack)-dev-server/client?http://localhost:9000
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/t.js ./src/t2.js

ERROR in (webpack)-dev-server/client/overlay.js
Module not found: Error: Can't resolve 'html-entities' in '/home/roroco/Downloads/js/test-webpack/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client/overlay.js 6:15-39
 @ (webpack)-dev-server/client?http://localhost:9000
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/t.js ./src/t2.js

ERROR in (webpack)-dev-server/client/utils/log.js
Module not found: Error: Can't resolve 'loglevel' in '/home/roroco/Downloads/js/test-webpack/node_modules/webpack-dev-server/client/utils'
 @ (webpack)-dev-server/client/utils/log.js 3:10-29
 @ (webpack)-dev-server/client?http://localhost:9000
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/t.js ./src/t2.js

ERROR in (webpack)-dev-server/client/clients/SockJSClient.js
Module not found: Error: Can't resolve 'sockjs-client/dist/sockjs' in '/home/roroco/Downloads/js/test-webpack/node_modules/webpack-dev-server/client/clients'
 @ (webpack)-dev-server/client/clients/SockJSClient.js 28:13-49
 @ (webpack)-dev-server/client/socket.js
 @ (webpack)-dev-server/client?http://localhost:9000
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/t.js ./src/t2.js

ERROR in (webpack)-dev-server/client?http://localhost:9000
Module not found: Error: Can't resolve 'strip-ansi' in '/home/roroco/Downloads/js/test-webpack/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:9000 6:16-37
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/t.js ./src/t2.js

ERROR in (webpack)-dev-server/client?http://localhost:9000
Module not found: Error: Can't resolve 'webpack/hot' in '/home/roroco/Downloads/js/test-webpack/node_modules/webpack-dev-server/client'
 @ (webpack)-dev-server/client?http://localhost:9000 76:17-67
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/t.js ./src/t2.js

ERROR in (webpack)-dev-server/client/utils/reloadApp.js
Module not found: Error: Can't resolve 'webpack/hot/emitter' in '/home/roroco/Downloads/js/test-webpack/node_modules/webpack-dev-server/client/utils'
 @ (webpack)-dev-server/client/utils/reloadApp.js 21:21-51
 @ (webpack)-dev-server/client?http://localhost:9000
 @ multi (webpack)-dev-server/client?http://localhost:9000 ./src/t.js ./src/t2.js

Answer 1

我找到了解决方案：在webpack.config.js中，我应该手动解析特定的node_modules路径例如：

module.exports = {
  resolve: {
    modules: [
      path.resolve(__dirname, "src"),
      path.resolve(__dirname, "node_modules")
    ],
  },
}

当`npx webpack-dev-server`时，webpack-dev-server引发“找不到模块：错误：无法解析”

1 个答案: