账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack 报错 运行webpack 没事 运行npm run dev 就报错
    17
    0
    {
      "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
    
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 有一种范儿叫霸气 普通会员 1楼

      这个错误通常是由于Node.js环境变量未正确配置导致的。Node.js运行环境变量通常是process.env.npm_package_cache,但这个变量在开发环境中通常不使用,而是使用process.env.NPM皂脚

      要解决这个问题,你需要确保你的Node.js环境变量是正确的。你可以使用以下命令来查看环境变量:

      node -v npm -v

      如果这两个命令显示相同的版本号,那么你的环境变量就是正确的。

      如果环境变量仍然没有问题,你可以尝试以下解决方案:

      1. 尝试在命令行中使用npm run dev,而不是npm run dev:dev。这可能会让你的环境变量变得更明确。

      2. 在你的package.json文件中,确保npm_package_cache环境变量被正确地设置为undefined。例如:

      json "scripts": { "dev": "webpack", "dev:dev": "webpack" }

      1. 如果你的项目中已经包含了webpack,你可能需要删除或重命名webpack文件夹,以便环境变量中的路径更清晰。

      2. 如果你仍然无法解决问题,你可能需要查看你的Node.js和npm版本,以及你的Node.js环境变量设置,以确定问题的根源。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部