Instagram如何加载任何CSS?

时间:2017-06-22 18:34:42

标签: reactjs webpack instagram webpack-style-loader

我有点好奇,Instagram如何不加载任何CSS但渲染样式是一个webpack配置,如果是这样的话

enter image description here

如何配置我的webpack文件以便这样做 我的生产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]'
                            }}
                    ]})
            }

        ]
    }
}

0 个答案:

没有答案