webpack.js regex problems (linux and windows)

[ofbeaton]

The test line in webpack.js is incorrect for all systems and has 2 issues and 1 possible source of problems for users building on the tutorial.

 module: {
    loaders: [
      {
        test: /src\/.+.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      }
    ]
  }

Please note the 2nd . is not escaped, it should read /src\/.+\.js$/. This was undetected because the regex still works even if it does not match properly.

However real problems begin on windows, the \/ slash doesn't work, producing a Unexpected reserved word You may need an appropriate loader to handle this file type. error.

This can be fixed by accepting either slash, with the regex /src(\/|\\).+\.js$/.

Finally, a specific user may expand and convert the client.js into a client.jsx and change their entry line, but find things stop working. Or they may use this as a learning project and copy it to another project where their entry is a jsx. You could help them out by giving them a reg ex that handles this case, in the form of: /src(\\|\/).+\.jsx?$/ which takes js or jsx.

I imagine this improvement can be made your flux tutorial as well.

[ofbeaton]

In the react-hot-boilerplate I saw there might be an even better to this, by specifying the src directory in a include instruction instead of the regex and exclude.

module: {
    loaders: [{
      test: /\.jsx?$/,      
      loader: 'babel-loader',
      include: path.resolve(__dirname, '../src')
    }]
  }

This bring sthe test in line with what you will find in most examples, and you don't have to worry about having to start excluding things like bower components down the line.

[wwsun]

good issue

[waspar]

5 years! 5 years have passed since ...
We were young in those years and believed!
Do not judge us strictly, everyone wants to believe!

[waspar]

The real problem is not to define a delimiter.
It can simply be saved into a variable and changed depending on the system.

The real problem is to apply the capture group after RegEx is running, like this:

loader: 'url-loader',
options: {
	regExp: /src\\(.*)/i,
	name: '[1]',
	limit: 8192,
},

Windows will not use "/" (from [1]) in the path for new file.