babel-loader：转译一个未命名为 app.js 的条目？答案

【问题标题】：babel-loader: transpile an entry not named app.js?babel-loader：转译一个未命名为 app.js 的条目？
【发布时间】：2017-04-13 17:06:55
【问题描述】：

一段时间以来，我们一直在使用带有 babel-loader 插件的 webpack 来转译 ES。对于我们的开发环境，我们的配置文件如下所示：

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],
  },
};

我用webpack-dev-server --inline --config=webpack-dev.config.js --content-base='client' 运行这个。

问题是，如果我将条目中的 app.js 更改为 app2.js 或其他任何内容，该文件仍由 webpack 服务器提供（在 8080 上运行），但不再被转译。

就 babel-loader 而言，app.js 这个名字有什么独特/神奇之处吗？几乎我能找到的每个示例教程，包括 webpack 文档，都使用app.js 约定，但显然它看起来名称应该可以是任何东西。

【问题讨论】：

标签： webpack babeljs babel-loader

【解决方案1】：

您确定它没有工作并且您正在检查正确的文件（app.js，始终如此）？如果 “文件 [...] 不再转译”，您的意思是名为 app2.js 的文件在您 GET 时没有转译，这是预期的行为从你的配置来看。

根据您的配置，您的转译文件将始终命名为 app.js，无论您的输入文件如何：

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

[name] 替换为块的名称，即“app”：

 entry: {
    app: ...
 },

为避免输入和输出之间的混淆，您可以对块进行不同的命名，或者简单地为输出使用硬编码名称，例如“bundle.js”

【讨论】：