Error:Cannotfindmodule'D:\webpack\bin\webpack.js'

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

{

  "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"

  }

}

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: '},//生成的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)