Error: Cannot find module 'D:\webpack\bin\webpack.js'

Question

在学习webpack时，出现了问题，当运行npm run build或者npm run dev时突然报错，之前运行这两条命令可以，当我打算解决sass的引入问题时运行以上两条命令才报错。错误如下：

D:\Learn&Test\webpack\webpack4_demo1>npm run build

> webpack4_demo1@1.0.0 build D:\Learn&Test\webpack\webpack4_demo1
> webpack

'Test\webpack\webpack4_demo1\node_modules\.bin\' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
internal/modules/cjs/loader.js:775
    throw err;
    ^
Error: Cannot find module 'D:\webpack\bin\webpack.js'
?[90m    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:772:15)?[39m
?[90m    at Function.Module._load (internal/modules/cjs/loader.js:677:27)?[39m
?[90m    at Function.Module.runMain (internal/modules/cjs/loader.js:999:10)?[39m
?[90m    at internal/main/run_main_module.js:17:11?[39m {
  code: ?[32m'MODULE_NOT_FOUND'?[39m,
  requireStack: []
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webpack4_demo1@1.0.0 build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack4_demo1@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-11-19T09_26_01_704Z-debug.log

package.json:

{
  "name": "webpack4_demo1",
  "version": "1.0.0",
  "private": true,
  "description": "my webpackDemo",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.7.1",
    "autoprefixer": "^9.7.1",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.2.0",
    "file-loader": "^4.2.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.13.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.0",
    "style-loader": "^1.0.0",
    "url-loader": "^2.2.0",
    "webpack": "^4.40.3",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }
}

webpack.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'static/[name]-[chunkhash:5].js'
  },
  mode: 'development',
  module: {
    rules: [
      { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] },
      { test: /\.css$/,
        use: [ // ['file-loader']
          { loader: 'style-loader',options: {} },
          { loader: 'css-loader',options: {  modules: true } },
          { loader: 'postcss-loader',options: {} }
        ]
      }, // 仅有style-loader样式不生效 
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader',include: path.resolve(__dirname, 'src') },
      { test: /\.(sa|sc)ss$/, use: ['style-loader','css-loader','postcss-loader','sass-loader'] }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new htmlWebpackPlugin({
      title: 'webpack4 test',
      template: './public/index.html',// 需要注入到输出文件的模板
      filename: 'index.html', // 注意这里的目录是dist目录，也就是在dist文件夹下生成index.html
      meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'},//生成的html文件是否产生的meta标签内容
      // hash: true,// 产生的css，js文件是否hash
    })
  ],
  devServer: {
    contentBase: path.join(__dirname, "public"), // default configs
    // // host: "0.0.0.0", 默认值
    // open: true, //已在pakage.json脚本中配置
    port: 8099,
    historyApiFallBack: true, // 使用H5 history API时，任意404不会被替代为index.html(官)
  },
  // devtool: 'source-map', // 打包时生成调试的完整.map文件，但同时影响打包速度！
  stats: { // 以下配置是为了避免出现 Entrypoint undefined = index.html
    children: false,
  }
}

尝试过的办法：

1.有说版本不兼容，对webpack和webpack-cli都进行了降级分别为4.40.0，和3.3.0。
2.重新安装所有依赖（重新生成node-modules)

有老哥指点迷津吗

Answer 1

问题出在我npm cnpm，混着用了，自始至终用一个就行！！以前安装的依赖我全部重新cnpm安装了一下,webpack-dev-server我也是cnpm全局安装的（局部安装报错），最终能够顺利运行了！