1

一段时间以来，我们一直在使用带有 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 上运行），但不再被转译。

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

4

1 回答 1

1

您确定它不起作用并且您正在检查正确的文件（app.js，总是）？如果“文件 [...] 不再转译”，您的意思是当您获取名为app2.js的文件时，它没有转译，这是您的配置的预期行为。

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

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

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

 entry: {
    app: ...
 },

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

于 2017-04-19T11:43:33.110 回答