0

I am little bit curios that how instagram doesn't load any css but rendering the styles is that a webpack configuration if so how to do it

enter image description here

How to configure my webpack file to act like that My production webpack

import path from 'path';
import webpack from 'webpack';
import qs from 'querystring';

import autoprefixer from 'autoprefixer';
import AssetsPlugin from 'assets-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';

const root = process.cwd();
const src  = path.join(root, 'src');

const clientSrc    = path.join(src, 'client');
const build = path.join(root,'build');


const clientInclude = [clientSrc];


const vendor = [
    'react',
    'react-dom',
    'react-router',
    'react-redux',
    'redux',
    'react-router-dom'
];

export default {
    context: src,
    entry: {
        app: [
            'babel-polyfill/dist/polyfill.js',
            './client/client.js'
        ],
        vendor

    },
    output: {
        path: build,
        filename: '[name].js'
    },
    resolve: {
        extensions: ['.js'],
        modules: [src, 'node_modules'],
        unsafeCache: true
    },
    node: {
        dns: 'mock',
        net: 'mock'
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new ExtractTextPlugin('[name].css'),

        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: "vendor.js",
            minChunks: Infinity
        }),
        new webpack.optimize.AggressiveMergingPlugin(),
        /* minChunkSize should be 50000 for production apps
         * 10 is for this example */
        new webpack.optimize.MinChunkSizePlugin({minChunkSize: 50000}),
        new webpack.optimize.UglifyJsPlugin({compressor: {warnings: false}, comments: /(?:)/}),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.DefinePlugin({
            '__CLIENT__': true,
            '__PRODUCTION__': true,
            'process.env.NODE_ENV': JSON.stringify('production')
        })



        // new webpack.optimize.DedupePlugin(),
        // new webpack.optimize.UglifyJsPlugin(),
        // new webpack.optimize.OccurrenceOrderPlugin()
    ],
    module: {
        loaders: [
            {test: /\.(png|j|jpeg|gif|svg|woff|woff2)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10000
                    }
                }
            },

            // JavaScript
            {test: /\.js$/,
                loader: 'babel-loader',
                include: clientInclude
            },

            // CSS
            {test: /\.css|less$/,
                include: clientInclude,
                loaders: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {loader: 'css-loader',
                            options: {
                                root: src,
                                modules: true,
                                importLoaders: 1,
                                localIdentName: '[name]_[local]_[hash:base64:5]'
                            }}
                    ]})
            }

        ]
    }
}
Nane
  • 2,370
  • 6
  • 34
  • 74
  • looks like they use https://github.com/iiegor/isostyle – Slim Shady Jun 22 '17 at 18:42
  • They probably use something like webpack and bundle everything into the bundle.js file. – Hoyen Jun 22 '17 at 18:53
  • @Hoyen But how they do it I would like to follow their pattern – Nane Jun 22 '17 at 18:54
  • @Nane basically webpack is used to bundle all your code into one JavaScript file. In your JavaScript files you will have code similar to `import '/css/app.css'`. That CSS file will be part of the bundled JavaScript file. – Hoyen Jun 22 '17 at 19:18
  • That's what I did But When I changed to production css comes with the separated file I don't How to properly configure the webpack.. @Hoyen – Nane Jun 22 '17 at 19:36
  • @Hoyen I've updated my webpack file Pls I want like Instagram – Nane Jun 22 '17 at 19:38
  • @Nane It's not that easy to help you. Your HTML file is not including the CSS file is it? `` – Hoyen Jun 22 '17 at 19:40
  • There comes the problem I have 10 different css files it not easy to load dynamically .That's the reason I've posted .@Hoyen – Nane Jun 22 '17 at 19:53

0 Answers0