Entry points creating identical css files...

[alexduan]

I can get the example to run fine, but for the life of me, I can't make mine work.

I have 2 entry points - public.js and app.js, which require the corresponding public.scss and app.scss respectively.

webpackConfig:

'use strict';
var ExtractTextPlugin = require('extract-text-webpack-plugin'),
    path = require('path'),
    webpack = require('webpack'),
    webpackConfig = require('webpack-config');


var node_dir = path.join(__dirname, 'node_modules');

var config = {
    addVendor: function(name, path) {
        this.resolve.alias[name] = path;
        this.module.noParse.push(new RegExp(path))
    },
    entry: {
        public: [path.resolve(__dirname, 'app/public.js')],
        app: [path.resolve(__dirname, 'app/app.js')],
        vendors: ['react', 'react-router', 'react-router-bootstrap', 'jquery', 'bootstrap', 'lodash', 'html5shiv']
    },
    externals: {
        "jquery": "jQuery"
    },
    output: {
        filename: '[name].js',
        chunkFileName: '[name].js'
    },
    resolve: {
        alias: {}
    },
    devServer: {
        contentBase: "./public",
        info: false,
        hot: true,
        inline: true
    },
    useMemoryFs: true,
    debug: true,
    // must be 'source-map' or 'inline-source-map'
    devtool: '#source-map',
    module: {
        noParse: [],
        postLoaders: [
            {
                loader: "transform?envify"
            }
        ],
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'jsx-loader?harmony'
            },
            {
                test: /\.(jpe?g|png|gif)$/i,
                loaders: [
                    'file?name=images/[name].[ext]',
                    'image?bypassOnDebug&optimizationLevel=7&interlaced=false'
                ]
            },
            {
                test: /\.s?css$/,
                exclude: /.*\.min.css/,
                //loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!sass-loader')
                loader: ExtractTextPlugin.extract('style-loader',
                    'css-loader?sourceMap!sass-loader?includePaths[]=' + path.resolve(__dirname, './node_modules/'),
                    {publicPath: '../'}
                )
                //'&outputStyle=expanded&sourceMap=true&sourceMapContents=true')
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url-loader?limit=10000&minetype=application/font-woff&name=fonts/[name].[ext]" },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "file-loader?name=fonts/[name].[ext]"
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('styles/[name].css', {
            disable: false,
            allChunks: true
        }),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurenceOrderPlugin()
        //new webpack.optimize.CommonsChunkPlugin({
        //    name: 'common',
        //    file: 'common.js',
        //    chunks: ['common','app']
        //})
    ]
}
config.addVendor("html5shiv", path.join(node_dir, '/html5shiv/dist/html5shiv.min.js'));
config.addVendor("jquery", path.join(node_dir, '/jquery/dist/jquery.min.js'));
config.addVendor("bootstrap", path.join(node_dir, '/bootstrap-sass/assets/javascripts/bootstrap.min.js'));

module.exports = webpackConfig.fromObject(config);

Even if my public.scss is completely empty, it looks likes like the generated public.css is identical to app.css. I'm obviously doing something incredibly wrong...

[alexduan]

Figured it out. I had a method in my js files for me to dynamically load Stores/Actions.

function getRequirement(path, name, suffix) {
    var moduleName = name+suffix;
    var fileName = name.toLowerCase() + "-" + suffix.toLowerCase();
    console.log('Loading %s: %s', path, moduleName);
    window[moduleName] = require('./' + path + '/' + fileName + '.js');
}

Since path was dynamic, I'm guessing whatever engine webpack was using decided that all files ending in .js would be included - thus including the app.js which lived within the same root directory. By explicitly defining the path name (while leaving fileName dynamic), it worked properly.