babel-loader: transpile an entry not named app.js?

we've been using webpack with the babel-loader plugin for transpiling ES for a while. for our development environment, our config file looks like this:

module.exports = {
  entry: {
    // When I change the below to app2.js, it's no longer transpiled
    app: path.resolve(__dirname, 'client', 'app.js'),
  },
  module: {
    loaders: [
      {
        exclude: /node_modules/,
        loader: 'babel',
        test: /\.js$/,
      },
      {
        test: /\.s?css$/,
        loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!')),
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    publicPath: 'http://localhost:8080/',
    filename: '[name].js',
  },
  plugins: [
    new ExtractTextPlugin('[name].css'),
    new webpack.DefinePlugin(processEnvPlugin),
  ],
  postcss: [
    autoprefixer({
      browsers: ['last 2 versions'],
    }),
  ],
  resolve: {
    extensions: ['', '.js', '.scss', '.css'],
    root: [__dirname],
  },
};

I run this with webpack-dev-server --inline --config=webpack-dev.config.js --content-base='client'.

Problem is, if I change app.js in entry to app2.js, or anything else, the file is still served by the webpack server (running on 8080), but is no longer transpiled.

Is there something unique/magical about the name app.js in terms of babel-loader? Virtually every example tutorial I can find, including the webpack docs, use the app.js convention, but obviously it looks like the name should be able to be anything.

Solution

Are you sure that it's not working and that you're checking the right file (app.js, always) ? If by "the file is [...] no longer transpiled", you mean that the file named app2.js is not transpiled when you GET it, it's expected behavior from what your configuration looks like.

According to your configuration, your transpiled file will always be named app.js, regardless of your input file :

filename: '[name].js', // => translates to "app.js"

[name] is replaced by the name of the chunk, which is "app" :

 entry: {
    app: ...
 },

To avoid confusion between your input and your output, you can name your chunk differently, or simply use an hardcoded name for the ouput, like 'bundle.js'