babel-loader：转译未命名的条目 app.js？

Question

我们使用带有 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 上的运行ning）提供服务，但是不再转译。

关于 babel-loader 的名称 app.js 有什么 unique/magical 吗？实际上，我能找到的每个示例教程，包括 webpack 文档，都使用 app.js 约定，但显然名称应该可以是任何东西。

Answer 1

您确定它没有工作并且您正在检查正确的文件（app.js，总是）？如果 "the file is [...] no longer transpiled"，你的意思是当你 GET 时，名为 app2.js 的文件没有被转译，这是预期的行为从你的配置来看。

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

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

[name] 替换为块的名称，即 "app" :

 entry: {
    app: ...
 },

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

babel-loader：转译未命名的条目 app.js？

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

webpack

babeljs

babel-loader