错误：在将Webpack与Express一起使用时无法解析模块“ Json-loader”

Question

I am trying to use webpack with express but have encountered some errors. This is the error I am currently getting: Error: Cannot resolve module 'json-loader'

package.json: (json loader in both, as is webpack and config etc)

"devDependencies": {
    "json-loader": "^0.5.4",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1"
  },
  "dependencies": {
    "express": "^4.14.0",
    "firebase": "^3.3.0",
    "json-loader": "^0.5.4",
    "webpack-config": "^6.1.2"
  }

webpack.config.js:

module.exports = {
  entry: "./app.js",
  target: 'node',
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
    module: {
      loaders: [
        { test: /\.json$/, loader: 'json-loader'},
      ]
    }

}

As can be seen above, I have json loader there and have entry pointing to my app.js that looks like so:

var express = require('express');
var app = express();
var firebase = require('firebase');

app.get('/', function (req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.get('/welcome', function (req, res) {
  res.sendFile(__dirname + '/welcome.html');
});

What am i doing wrong? ie how do I get rid of the error and make express work with webpack?

Answer 1

I was facing a similar problem, and this is how I fixed it. Note that this solution might not fix @Waterman1's issue, unless my guess that we're not seeing the entire webpack.config.js is correct.

(1)
install / add to package.json json-loader

(2)
edit webpackage.json.js changing (this may vary slightly for you)

module: {
  preLoaders: [
  {
    test: /\.js|\.jsx$/,
    loaders: ['eslint-loader'],
    exclude: ['node_modules']
  }
  ],
  loaders: [
  {
    test: /\.js|\.jsx$/,
    loaders: ['babel'],
    include: path.join(__dirname, 'src')
  }
  ]
}

to

module: {
  preLoaders: [
  {
    test: /\.js|\.jsx$/,
    loaders: ['eslint-loader'],
    exclude: ['node_modules',/\.json$/]
  }
  ],
  loaders: [
  {
    test: /\.json$/,
    loader: "json-loader"
  },
  {
    test: /\.js|\.jsx$/,
    loaders: ['babel'],
    include: path.join(__dirname, 'src')
  }
  ]
}

In particularly noting the changes:

• adding loader-json first to loaders
• adding /\\.json$/ to exclude in the preLoaders