Webpack code splitting strange naming

Question

So I've been working on a little side project for a few days now familiarizing myself with webpack. I've gotten almost everything to work the way I want but I the naming convention on webpack split chunks is very strange, and I feel like I'm not doing something quite right.

Currently I have all my Javascript exporting to content\js[name].bundle.js which works fine until I start using ensure.

For example, my main module is called app, so the final destination for app is currently content\js\app.bundle.js however when I use ensure it creates a file like 1.content\js\1.bundle.js. I'd like to get it to output to something like content\js\1.bundle.js or something similar. If I can at least drop that 1 prefix then I'd be in good shape I think for what I'd like to do...

Apparently I'm not able to post images until I gain more rep, but here is my output and current webpack config file.

I appreciate the help!

Hash: 23e616429710d37754d3
Version: webpack 1.13.1
Time: 12793ms
                        Asset     Size  Chunks             Chunk Names
     content\js\app.bundle.js  3.16 kB       0  [emitted]  app
     1.content\js\1.bundle.js  15.1 kB       1  [emitted]
  content\js\vendor.bundle.js  4.31 MB       2  [emitted]  vendor
   content\css\app.styles.css  6.27 kB       0  [emitted]  app
content\css\vendor.styles.css   463 kB       2  [emitted]  vendor
                   index.html  5.19 kB          [emitted]
   [0] multi app 28 bytes {0} [built]
   [0] multi vendor 88 bytes {2} [built]
    + 455 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child extract-text-webpack-plugin:
        + 2 hidden modules
Child html-webpack-plugin for "index.html":
        + 20 hidden modules
Child extract-text-webpack-plugin:
        + 7 hidden modules

    var path = require('path');
    var webpack = require('webpack');
    var autoprefixer = require('autoprefixer');

    // Webpack Plugins
    var ExtractTextPlugin = require('extract-text-webpack-plugin');
    var CleanWebpackPlugin = require('clean-webpack-plugin');
    var HtmlWebpackPlugin = require('html-webpack-plugin');

    // Figure out what mode we're running in
    var mode   = process.env.NODE_ENV;

    if (mode == 'production') {
        console.log('Building for production...');
    }
    else {
        console.log('Building for development...');
    }

    // Define some paths that we'll use throughout the application
    var pathBaseOutput = path.join(__dirname, 'public');
    var pathEntryApp = path.join(__dirname, 'app');
    var pathJsOutput = 'content/js/';//path.join('content', 'js');
    var pathCssOutput = path.join('content', 'css');
    var pathIndexOutput = pathBaseOutput;

    // App webpack
    var app_pack = {};

    // Add the entries for our app
    app_pack['entry'] = {
        // The app itself
        'app': [ path.join(pathEntryApp , 'app.client')],
        // The vendor modules we want to abstract out
        'vendor': [ 'jquery', 'react', 'react-bootstrap', 'react-dom', 'bootstrap-loader', 'tether' ]
    }

    // Define the output directory of the javascript files
    app_pack['output'] = {
        path: pathBaseOutput,
        filename: path.join(pathJsOutput, '[name].bundle.js')
    }

    // Define any extra module loaders we might be interested in
    app_pack['module'] = {
        loaders: [
            // Inject css
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
            },
            // Process and inject SASS
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader!sass-loader')
            },
            // Process and inject .woff2 fonts
            {
                test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader'
            },
            // Process and inject .tff, .eot, and .svg files
            {
                test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
                loader: 'url-loader'
            },
            // Transform JSX in .jsx files
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                query: {
                    presets: [ 'es2015', 'react' ]
                }
            },
            {
                test: /\.hbs$/,
                loader: "handlebars"
            }
        ]
    }

    // Define where modules should be resolved from
    app_pack['resolve'] = {
        // Allow require('./blah') to require blah.jsx
        extensions: [ '', '.js', '.jsx' ],
        // The root of our web modules
        root: [
            path.resolve('./app/modules'),
        ],
        // Allow requiring modules from npm
        modulesDirectories: [
            'node_modules'
        ]
    }

    // Define what plugins we want to use
    app_pack['plugins'] = [
        // Create a vendor chunk for all our vendor code
        new webpack.optimize.CommonsChunkPlugin('vendor', path.join(pathJsOutput, '[name].bundle.js'), Infinity),
        // Resolve $, and jQuery so that modules that use them can resolve to require('jquery')
        // Note: This does NOT expose them to the global browser accessible namespace
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery'
        }),
        // Extract CSS files to a seperate place
        new ExtractTextPlugin(path.join(pathCssOutput, '[name].styles.css'), { allChunks: true }),
        // Pass the node environment down the webpack
        new webpack.EnvironmentPlugin([
            'NODE_ENV'
        ]),
        new CleanWebpackPlugin( [pathCssOutput, pathJsOutput, path.join(pathIndexOutput, 'index.html')] ),
        new webpack.BannerPlugin('Copyright 2016 Brandon Garling. Released under the MIT license'),
        new HtmlWebpackPlugin({
            title: 'Taskie',
            template: 'app/index.hbs',
            hash: true
        })
    ];

    // Allow postcss using autoprefixer
    app_pack['postcss'] = [ autoprefixer ];

    /*
    * Mode specific injections
    */

    // Production
    if (mode == 'production') {
        // Add plugins
        app_pack['plugins'].push(
            new webpack.optimize.UglifyJsPlugin()
        );
        // Search for equal or similar files and deduplicate them in the output.
        // This comes with some overhead for the entry chunk, but can reduce file size effectively.
        app_pack['plugins'].push(
            new webpack.optimize.DedupePlugin()
        )
    }
    // Other (Development)
    else {
        // Add source maps inline
        app_pack['devtool'] = '#inline-source-map';
        // Add plugins
    }


    module.exports = app_pack;

Answer 1

You are setting a path with backslashes as output.filename option. Use output.path to set the destination folder and output.filename for the actual filename only.