3

I can't get webpack-dev-server working with eslint. Here is my wepback config:

const path = require('path');

const PATHS = {
  app: path.join(__dirname, 'app/js/app.js'),
  build: path.join(__dirname, 'build')
};

module.exports = {
  entry: {
    app: PATHS.app
  },
  output: {
    path: PATHS.build,
    filename: 'bundle.js'
  },

  devServer: {
        contentBase: 'dist'
    },

  module: {
    loaders: [
      {
        test: /\.(jsx|js)?$/,
        exclude: /node_modules/,
        loader: ['babel']
      },
      {
        test: /\.js$/, loader: "eslint-loader", exclude: /node_modules/
      },
      {
        test: /\.json$/, loader: "json-loader", exclude: /node_modules/
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      {
                test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
                loader: "url-loader?limit=10000"
            }
    ]
  },

  resolve: {
    extensions: ['', 'jsx', '.js', '.es6', '.css']
  }
};

And here is the npm scripts:

  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --content-base build eslint",
    "eslint": "eslint ./app"
  },

Do I need something else even though I have the .eslintrc.json file and it's from a different project I was working and it works there but using custom node server.

Thanks

Khpalwalk
  • 989
  • 1
  • 6
  • 11
  • Looks like you have to specify eslint config file path in the webpack.config like follows. And I am not sure, if the .eslintrc<.JSON> will work or not. eslint: { configFile: 'your-path/.eslintrc' } – Rishikesh Dhokare Aug 29 '16 at 03:42
  • @RishikeshDhokare Where do you put that line? In Webpack? – Khpalwalk Aug 29 '16 at 03:44
  • Yes, you can put it anywhere in the webpack.config file. – Rishikesh Dhokare Aug 29 '16 at 03:45
  • Also, you should define the eslint-loader in preLoaders not loaders so that they are not modified by loaders like babel. – Rishikesh Dhokare Aug 29 '16 at 03:48
  • Why do you have `'jsx'` over `.'jsx'` at `extensions`? That won't fix your issue, but it might not work as you expect. That `/\.(jsx|js)?$/` check is a little weird too. I'm not sure you would make that block optional (`?`). You also might want to push **eslint-loader** to `preLoaders` and make sure it matches your JSX files too. A standalone example would help. – Juho Vepsäläinen Aug 29 '16 at 07:41
  • @JuhoVepsäläinen I actually find it very handy to be explicit if that file has JSX in it or if it "just" a JS file. Just my 2 cents.. :p – jbarradas Jan 28 '19 at 19:36
  • @jbarradas Yeah, I've seen two schools of thought on this. One doesn't care, one puts the x suffix to a file. It's needed esp. with TypeScript as then you get ts and tsx. The advantage of going without x suffix is that then you end up with less renames as you work. – Juho Vepsäläinen Jan 29 '19 at 11:34

0 Answers0