can't set custom file naming of bundled files in webpack 3

Question

I expect to have my bundled files with the names index.js and styles.css (like the names of source files) after running webpack for production. But I get files with names main.js and main.css instead. My webpack config seems to be set up correcty, when I set filename prop in both cases. And i can't understand why this is not working. What can be wrong with my config?

"webpack": "^3.1.0"

 const path = require('path'); // Plugins const ExtractTextPlugin = require('extract-text-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); // Webpack Plugins const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin'); const NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin'); // VARS const NODE_ENV = process.env.NODE_ENV; const DEVELOPMENT = NODE_ENV === 'development'; const PRODUCTION = NODE_ENV === 'production'; module.exports = { context: path.resolve(__dirname, "src"), entry: "./index.js", output: { path: path.resolve(__dirname, "public"), filename: "assets/js/[name].js" }, module: { rules: [ { test: /\\.js$/, exclude: /node_modules/, loader: "babel-loader" }, { test: /\\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader', 'sass-loader'], }) } ] }, plugins: [ new NamedModulesPlugin(), new LoaderOptionsPlugin({ debug: !PRODUCTION, cache: !PRODUCTION, minimize: PRODUCTION, options: { sassLoader: { outputStyle: PRODUCTION ? 'compressed' : 'expanded', precision: 10, sourceComments: false, sourceMap: PRODUCTION, } } }), new ExtractTextPlugin({ filename: 'assets/css/[name].css', disable: !PRODUCTION, }), new HtmlWebpackPlugin({ filename: 'index.html', hash: false, inject: 'body', chunksSortMode: 'dependency', template: './index.html', }) ], devtool: DEVELOPMENT ? "cheap-module-eval-source-map" : "hidden-source-map", devServer: { contentBase: path.resolve(__dirname, "public"), historyApiFallback: true, host: '127.0.0.1', port: '3000' } };

Answer 1

When you want to use regex [name] , your should provide a object as entry because webpack will use each key of this object for for the file name of output.
If you only have one entry specified as string or array, I suppose that main is the default name for bundles when none is specified .

So, to achieve what you want, you should do the following:

module.exports = {
    entry: {
        "index": "./index.js",
        "styles.css": "./path/to/styles.scss" //The .css in the key to avoid .js file
    }
    output: {
        path: path.resolve(__dirname, "public"),
        filename: "assets/js/[name].js"
    },
    plugins: [
        //...
        new ExtractTextPlugin({
           filename: 'assets/css/[name]'
        }),
    ]
    //Rest of your config...
}

BE CAREFUL:

• As you are using styles as entry, remove the import/require of the styles.scss file from your index.js . If not it will generate a extra and useless index.css file.

• Unfortunately, with this configuration, if you are using automatic inject of HtmlWebpackPlugin, you will get an extra script with src to your .css file in the index.html. So this solution won't work with automatic inject.