webpack 报错 运行webpack 没事 运行npm run dev 就报错

Question

{
  "name": "webpack-demo1",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "watch": "webpack --watch",
    "start": "webpack-dev-server",
    "dev": "webpack",
    "build": "webpack --mode production"
  },
  "license": "MIT",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "cross-env": "^5.1.4",
    "css-loader": "^0.28.10",
    "html-webpack-plugin": "^3.0.6",
    "style-loader": "^0.20.3",
    "watch": "^1.0.2",
    "webpack": "^4.1.1",
    "webpack-dev-server": "^3.1.1"
  }
}

这是package.json文件

var path = require("path");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack'); // 引入 webpack 便于调用其内置插件

console.log(CleanWebpackPlugin);

module.exports = {
    devtool: 'inline-source-map',
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        hot: true, // 告诉 dev-server 我们在用 HMR
        hotOnly: true, // 指定如果热加载失败了禁止刷新页面 (这是 webpack 的默认行为)，这样便于我们知道失败是因为何种错误
        inline:true,
        
    },
    entry: {
            main:'./src/js/main.js',
          index:'./src/js/index.js'
    },
      module:{
          rules:[
              {
                  test:/\.css$/,
                  use:['style-loader','css-loader']
              }
          ]
      },
      plugins: [
        new CleanWebpackPlugin(['dist']),
        // new HtmlWebpackPlugin({
        //     title: 'Development'
        // }),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        path: path.resolve(__dirname,'./dist'),
        filename: '[name].js',
        chunkFilename:'[name].js',
    },
};

这是webpack.config.js文件

为啥我直接运行webpack 没问题 运行npm run dev watch 等命令就报错

    npm ERR! node v6.9.3
    npm ERR! npm  v3.10.10
    npm ERR! code ELIFECYCLE
    npm ERR! webpack-demo1@1.0.0 dev: `webpack`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the webpack-demo1@1.0.0 dev script 'webpack'.
    npm ERR! Make sure you have the latest version of node.js and npm installed.
    npm ERR! If you do, this is most likely a problem with the webpack-demo1 package,
    npm ERR! not with npm itself.
    npm ERR! Tell the author that this fails on your system:
    npm ERR!     webpack
    npm ERR! You can get information on how to open an issue for this project with:
    npm ERR!     npm bugs webpack-demo1
    npm ERR! Or if that isn't available, you can get their info via:
    npm ERR!     npm owner ls webpack-demo1
    npm ERR! There is likely additional logging output above.
    
    npm ERR! Please include the following file with any support request:
    npm ERR!     D:\WorkSpace\webpack-app\webpack-demos\demo01\npm-debug.log

Answer 1

webpack4 需要装webpack-cli，而且node 和 npm 需要是最新版
package.json 要加
"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"build": "webpack --mode production"

},

Answer 2

看错误提示，你wepback配置有错误。告诉你用这俩命令定位具体未知。你可以试一下，如果还是不行，可以把接下来的错误一起贴出来

Answer 3

安装webpack-cli

Answer 4

命令行直接敲的 webpack 应该是全局的 webpack ？

npm script 的是项目 node_modules 下的。

建议先看看两个 webpack 的版本问题