Webpack output naming when using chunks

Question

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

// Is the current build a development build
const IS_DEV = (process.env.NODE_ENV === 'dev');
const THEMES = process.env.THEMES.split(',');

const dirNode = 'node_modules';
const dirApp = path.join(__dirname, 'src/app');
const dirAssets = path.join(__dirname, 'src/assets');
const dirSass = path.join(__dirname, 'src/sass');

const appHtmlTitle = 'Webpack Boilerplate';

let entry = {
    vendor: [
        'lodash'
    ]
}

let themeName = '';

let themes = THEMES.map((theme) => {
    console.log('theme: ', theme);
    themeName = theme;
    return path.join(dirApp, theme);
});

console.log(themes)

entry[themeName] = themes

/**
 * Webpack Configuration
 */
module.exports = {
    entry: entry,
    resolve: {
        modules: [dirNode, dirApp, dirAssets, dirSass],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    plugins: [
        new webpack.DefinePlugin({
            IS_DEV: IS_DEV
        }),

        new webpack.ProvidePlugin({
            // lodash
            _: "lodash"
        }),

        new HtmlWebpackPlugin({
            template: path.join(__dirname, "index.ejs"),
            title: appHtmlTitle
        }),

        new ExtractTextWebpackPlugin({
            filename: "[name].css",
            disable: false,
            allChunks: true
        })
    ],
    module: {
        rules: [
            // BABEL
            {
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /(node_modules)/,
                options: {
                    compact: true
                }
            },

            // CSS / SASS
            {
                test: /\.scss/,
                use: ExtractTextWebpackPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        {
                            loader: "css-loader",
                            options: { sourceMap: true }
                        },
                        {
                            loader: "sass-loader",
                            options: { sourceMap: true }
                        }
                    ],
                    publicPath: "/dist"
                })
            },

            // EJS
            {
                test: /\.ejs$/,
                loader: "ejs-loader"
            },

            // IMAGES
            {
                test: /\.(jpe?g|png|gif)$/,
                loader: "file-loader",
                options: {
                    name: "[path][name].[ext]"
                }
            }
        ]
    }
};

webpack.config.build.js

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpackConfig = require('./webpack.config');

module.exports = Object.assign(webpackConfig, {

    devtool: 'source-map',

    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    },

    plugins: webpackConfig.plugins.concat([
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor']
        }),

        new CleanWebpackPlugin(['dist'])
    ])

});

package.json build tasks line

"build-wacoal": "cross-env NODE_ENV=dev THEMES='index,red' 
webpack -p --progress --config webpack.config.build.js"

"build-wacoal": "cross-env NODE_ENV=dev THEMES='index,blue' 
webpack -p --progress --config webpack.config.build.js"

Running one of the above will emit the following files (other left out for brevity):

• vendor.js
• red.js (or blue.js)
• red.css (or blue.css)

What if I want the js file to only be called bundle.js. If I didn't need a vendor.js file I could just name it bundle in the output but I have to use [name].js or it will affect the name of any chunks.

How can I rename the red.js or blue.js to bundle.js, without affecting the vendor.js and css files?

Answer 1

Ok so I figured this out, I added the chunk-rename-webpack-plugin which allowed me to list my themes and rename accordingly.

const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ChunkRenameWebpackPlugin = require('chunk-rename-webpack-plugin');
const webpackConfig = require('./webpack.config');

module.exports = Object.assign(webpackConfig, {
  devtool: 'source-map',

  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },

  plugins: webpackConfig.plugins.concat([
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor']
    }),

    new CleanWebpackPlugin(['dist']),

    new ChunkRenameWebpackPlugin({
      red: 'bundle.js',
      blue: 'bundle.js'
    })
  ])
});