Webpack 2 System.import不分离块

时间:2017-01-31 01:45:03

标签: reactjs webpack react-router webpack-2

我用Redux创建了React项目,它没有很多代码,但是我想使用延迟加载并使用System.import函数来排除chunk,但不幸的是它没有排除文件

这是我的React Router,其中包含System.import

import App from './App.jsx';

function errorLoading(err) {
  console.error('Dynamic page loading failed', err);
}

function loadRoute(cb) {
  return (module) => cb(null, module.default);
}

export default {
    component: App,
    path: '/',
    childRoutes: [
        {
            path: 'stock/info/:symbol(/:tab)',
            getComponent(location, cb) {
                System.import('./StockPage')
                  .then(loadRoute(cb))
                  .catch(errorLoading);
            }
        },
        {
            path: '*',
            getComponent(location, cb) {
                System.import('./NoMatch')
                  .then(loadRoute(cb))
                  .catch(errorLoading);
            }
        }
    ]
};

注意

我没有警告或错误,只是警告我的代码对于UX来说太大了

CONFIG

这是我的webpack.config.js

let webpack = require('webpack');
let path = require('path');
let ExtractTextPlugin = require('extract-text-webpack-plugin');

var DefinePlugin = new webpack.DefinePlugin({
    __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false')),
    process: {
        env: {
            NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')     
        }
    }
});

let isProd = process.env.NODE_ENV == 'production';

module.exports = {
    context: __dirname,
    devtool: 'inline-source-map',
    entry: {
        bundle: './src/app/app-client.jsx',
        styles: './src/app/sass/main.scss',
        vendor: ['react', 'react-dom']
    },
    output: {
        filename: '[name].js',
        chunkFilename: '[name].[chunkhash].js',
        path: './src/build',
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module : {
        rules : [
            {
                test: /\.scss$/,
                loader: ExtractTextPlugin.extract(['css-loader','sass-loader'])
            },
            {
                test: /\.jsx?$/,
                exclude: [/node_modules/, /libs/],
                use: {
                    loader: "babel-loader",
                    query: {
                        presets: [['es2015', { modules: false }], 'react', 'stage-2' ],
                        plugins: [ "transform-runtime" ]
                    }
                }
            },
            {
                test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/,
                use: {
                    loader:'file-loader'
                }
            }
        ]
    },
    plugins: [
        DefinePlugin,
        new ExtractTextPlugin('[name].css'),
        new webpack.optimize.CommonsChunkPlugin({ 
            name: 'vendor',
            filename: "[name].js",
            minChunks: Infinity
        }),
    ]
}

0 个答案:

没有答案