Webpack 3自定义打包文件名失效：配置filename仍生成main.*文件

Hey there! Let's figure out why your production build is spitting out main.js and main.css instead of the index.js and styles.css you're expecting. Even if you think your config is right, there are a few easy-to-miss spots in Webpack 3 that could be causing this mismatch.

1. Your Entry Point Key is Overriding the Filename #

Webpack uses the key in your entry object to generate filenames when you use placeholders like [name]. If your entry looks like this:

entry: {
  main: './src/index.js' // Oops! The key here is "main"
}

Even if you set output.filename: 'index.js', if you're using [name] (or if some plugin is), it will prioritize the entry key. Fix this by changing the entry key to index:

entry: {
  index: './src/index.js' // Now [name] will resolve to "index"
}

2. ExtractTextPlugin Configuration is Off #

Since you're generating a separate CSS file, you're almost certainly using extract-text-webpack-plugin (the v3 version, compatible with Webpack 3). Double-check your plugin setup:

• If you want styles.css specifically, don't use a placeholder here unless your entry key aligns. Instead, hardcode the filename directly:

const ExtractTextPlugin = require('extract-text-webpack-plugin');

// In plugins array
new ExtractTextPlugin('styles.css') // This ensures the CSS file is named exactly styles.css

• If you accidentally used [name].css here and your entry key is main, that's why you're getting main.css.

3. Output Filename Placeholder Mistake #

Make sure your output.filename is set correctly. For a single entry, you can either:

• Hardcode the filename:

output: {
  filename: 'index.js',
  path: path.resolve(__dirname, 'dist')
}

• Or use [name] with the corrected entry key (as mentioned in point 1):

output: {
  filename: '[name].js', // Resolves to index.js when entry key is "index"
  path: path.resolve(__dirname, 'dist')
}

4. Check for Conflicting Plugins #

If you're using CommonsChunkPlugin, make sure it's not renaming your main bundle. For example, if you're splitting out vendor code, ensure your main entry isn't being merged into a chunk named main by accident.

Full Working Config Example #

Here's a minimal Webpack 3 config that should generate index.js and styles.css as expected:

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  mode: 'production', // Webpack 3 uses "production" mode for optimizations
  entry: {
    index: './src/index.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
      // Add other loaders (Babel, etc.) here as needed
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css')
  ]
};

Start by verifying the entry key and ExtractTextPlugin filename first—those are the most common culprits in Webpack 3 for this kind of issue.

内容的提问来源于stack exchange，提问作者Vel Green