ReactJS – Unable to get the webpack require.ensure chunking method work with React-Router and generate a separate bundle file

By React

I want to use the webpack chunking method to generate separate packages for the individual routes in my routing configuration.
One way to achieve it is to use require.ensure to define splits for the chunks Click and load the module asynchronously according to browser requirements.

This is what I got:

webpack.config.js (according to the executed npm script and dev/prod webpack configs merge):

var autoprefixer = require('autoprefixer');
var html = require('html-webpack-plugin');
 var path = require('path');
var webpack = require('webpack');

var node_modules_dir = path.resolve('./node_modules')
< br />var HappyPack = require('happypack');

module.exports = {
 context: path.resolve('./src'),
 entry: { 
 app: ['./scripts/index.js','./styles/index.scss'],
 vendor: ['react','react-dom','react-redux' ,'redux','immutable'],
 },
 module: {
 loaders: [
 {
 test: /\.(jpg|png|gif |json)$/,
 loader:'file',
 query: {
 name:'assets/[hash].[ext]',
 },
 },
 {
 test: /\.svg$/,
 loader:'happypack/loader?id=svg'
 },
 ],
 },
 output: {< br /> filename:'[name].js',
 path: path.resolve('./build'),
 },
 plugins: [
 new webpack. optimize.OccurrenceOrderPlugin(),
 // new webpack.optimize.LimitChunkCountPlugin({maxChunks: 5}),
 // new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000)),
 new html({
 minify: {
 collapseWhitespace: true,
 },
 template:'./index.html',
 title: process.env.npm_package_config_title ,
 }),
 new webpack.optimize.CommonsChunkPlugin('vendor','vendor.bundle.js'),
 new HappyPack({
 id:'svg', 
 threads: 5,
 loaders: [
'svg-inline'
 ]
 })
 ],
 postcss: function() {
 return [
 autoprefixer,
 ];
 },
 resolve: {
 alias: {
 asse ts: path.resolve('./src/assets'),
 lib: path.resolve('./src/lib'),
 modules: path.resolve('./src/scripts /modules'),
 scripts: path.resolve('./src/scripts'),
 styles: path.resolve('./src/styles'),
 toolbox: path .resolve('./node_modules/react-toolbox'),
 vendors: path.resolve('./src/vendors'),

'react-redux': node_modules_dir + ' /react-redux/dist/react-redux.min.js',
'redux': node_modules_dir +'/redux/dist/redux.min.js',
'immutable': node_modules_dir +' /immutable/dist/immutable.min.js'
 },
 extensions: [
'',
'.js',
'.jsx',< br />'.css',
'.scss',
 ],
 },
 toolbox: {
 theme: path.resolve('./toolbox /index.scss'),
 },
};

webpack.config.dev.js (dev webpack configuration [merge with above]):

var merge = require('webpack-merge');
var webpack = require('webpack');
var path = re quire('path');
var config = require('./config');

var HappyPack = require('happypack');
var ExtractTextPlugin = require( "extract-text-webpack-plugin");

module.exports = merge(config, {
 // devtool:'eval',
 devServer: {
 contentBase:'build',
 historyApiFallback: true,
 hot: true,
 host: '0.0.0.0',
 inline: true,
 port: parseInt (process.env.npm_package_config_port),
 },
 module: {
 loaders: [
 {
 test: /\.jsx?$/,
 exclude: /node_modules/,
 loader:'happypack/loader?id=jsx'
 },
 {
 test: /\.s?css$/,
 loader:'happypack/loader?id=css'
 },
 ],
 },
 output: {
 chunkFilename: "[name].js ",
 publicPath:'http://localhost:' + process.env.npm_package_config_port + process.env.npm_package_config_public_path,
 pathInfo: true,
 },
 pl ugins: [
 new webpack.PrefetchPlugin('react'),
 new webpack.PrefetchPlugin('react-toolbox'),
 new webpack.PrefetchPlugin('react-redux'),< br /> new webpack.PrefetchPlugin('redux'),
 new webpack.PrefetchPlugin('immutable'),
 new webpack.PrefetchPlugin('./scripts/routes.jsx'),

 new webpack.PrefetchPlugin('./scripts/components/smart/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/login/index.jsx') ,
 new webpack.PrefetchPlugin('./scripts/components/views/companies_list/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/shortlists/index.jsx '),
 new webpack.PrefetchPlugin('./scripts/components/views/testing_shortlist/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools/components /index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools/horizontal_chart/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/ components/views/tools/smarts/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools/view_content/index.jsx'),
 new webpack.PrefetchPlugin ('./scripts/components/views/tools/views/index.jsx'),

 new webpack.PrefetchPlugin('./scripts/components/views/tools.old/refactorized_tools/components/ index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools.old/refactorized_tools/composed/index.jsx'),
 new webpack.PrefetchPlugin('./ scripts/components/views/tools.old/refactorized_tools/view_content/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools.old/refactorized_tools/views/index.jsx' ),

 new webpack.PrefetchPlugin('./scripts/components/views/tools.old/tools/cities_list_with_filters/index.jsx'),
 new webpack.PrefetchPlugin('./ scripts/components/views/tools.old/tools/city_path_start/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools. old/tools/company_path_start/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools.old/tools/compare_cities_datapoints/index.jsx'),
 new webpack .PrefetchPlugin('./scripts/components/views/tools.old/tools/compare_companies_datapoints/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools.old/tools/ compare_result/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools.old/tools/scan_your_brand/index.jsx'),
 new webpack.PrefetchPlugin(' ./scripts/components/views/tools.old/tools/subcomponents/index.jsx'),

 new webpack.PrefetchPlugin('./lib/ui/multi_select/RTAutocomplete/index.js' ),

 new webpack.PrefetchPlugin('./scripts/components/views/tools/view_content/charts/style/charts.scss'),
 new webpack.PrefetchPlugin('./ scripts/components/views/tools/view_content/filters_box/style/city.scss'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools/ view_content/filters_box/style/company.scss'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools/view_content/map_with_bottom_stats/style.scss'),
 new webpack.PrefetchPlugin ('./scripts/components/views/tools/view_content/city_boxes/style/city_boxes.scss'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools/view_content/company_boxes/style/ company_boxes.scss'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools/view_content/filters_box_with_header_box/style/city.scss'),
 new webpack.PrefetchPlugin('./ scripts/components/views/tools/view_content/filters_box_with_header_box/style/company.scss'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools/view_content/selected_entities/style/selected_entities.scss' ),
 new webpack.PrefetchPlugin('./scripts/components/views/tools/view_content/human_resources_table_box/style/_human_resources_table_box.scss'),
 // new webpack.PrefetchPlugin(''),< br /> new ExtractTextPlugin("[hash].css"),
 new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
 'process.env.LANDING_ONLY': JSON.stringify(false),
 }),
 new webpack.HotModuleReplacementPlugin(),
 new HappyPack({
 id:'jsx' ,
 threads: 5,
 loaders: ['babel?presets[]=react-hmre']
 }),
 new HappyPack({
 id: ' css',
 threads: 5,
 loaders: [
'style',
'css?sourceMap,modules,localIdentName=[local]__[hash:base64:5] ',
'postcss',
'resolve-url',
'sass?sourceMap',
'toolbox'
 ]
 })
 ],
});

routes.jsx:

[some module imports here]

 export default (
 
 
 
 


 {/* Landing */} 
 
 
  path={ paths.landingPageCities} 
 getComponent={(location, callback) => {
 require.ensure(['modules/landing_page/smarts/SmartLandingCities'], function (require) {
 callback(null, require( 'modules/landing_page/smarts/SmartLandingCities').default);
 },'SmartLandingCities');
 }} 
 />
  path={ paths.landingPageCompanies }
 getComponent={(location, callback) => {
 require.ensure(['modules/landing_page/smarts/SmartLandingCompanies'], function (require) {
 callback( null, require('modules/landing _page/smarts/SmartLandingCompanies').default);
 },'SmartLandingCompanies');
 }} 
 />
  path={ paths.aboutUsPage } 
 getComponent={(location, callback) => {
 require.ensure(['modules/landing_page/views/AboutUsPage'], function (require) {
 callback(null, require ('modules/landing_page/views/AboutUsPage').default);
 },'AboutUsPage');
 }} 
 />
 
 

 {/* Login */ }

I read The content of the blog post and the tutorial, it all seems to be here. However, webpack did not generate a separate bundle for my routing using require.ensure:

> SmartLandingCities
> SmartLanding Company
>About us

I have been very desperate, because the application package size is 2mb, I have used all available size reduction methods.

Thank you for your help!

Since there have been three requests to access repo containing working solutions, here are:)
Have a good coding!

https://bitbucket.org/azrahel/crit_calendar/

I want to use the webpack chunking method to configure the Separate routing generates separate packages.
One way to achieve it is to use require.ensure to define split points for blocks and load modules asynchronously according to browser requirements.

This is me Obtained:

webpack.config.js (combined with dev/prod webpack configs based on the executed npm script):

var autoprefixer = require(' autoprefixer');
var html = require('html-webpack-plugin');
var path = require('path');
var webpack = require('webpack'); 

var node_modules_dir = path.resolve('./node_modules')

var HappyPack = require('happypack');

module.exports = {
 context: path.resolve('./src'),
 entry: {
 app: ['./scripts/index.js','./styles/index. scss'],
 vendor: ['react','react-dom','react-redux','redux','immutable'],
 },
 module: {< br /> loaders: [
 {
 test: /\.(jpg|png|gif|json)$/,
 loader:'file',
 query: {< br /> name:'assets/[hash].[ext]',
 },
 },
 {
 test: /\.svg$/,
 loader:'happypack/loader?id=svg'
 },
 ],
 },
 output: {
 filename:'[name].js',
 path: path.resolve('./build'),
 },
 plugins: [
 new webpack.optimize.OccurrenceOrderPlugin(),
 // new webpack.optimize.LimitChunkCountPlugin({maxChunks: 5}),
 // new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000}),
 new html({
 minify: {
 collapseWhitespace: true,
 },
 template:'. /index.html',
 title: process.env.npm_package_config_title,
 }),
 new webpack.optimize.CommonsChunkPlugin('vendor','vendor.bundle.js'),< br /> new HappyPack({
 id:'svg',
 threads: 5,
 loaders: [
'svg-inline'
 ]
 })
 ],
 postcss: function() {
 return [
 autoprefixer,
 ];
 },
 res olve: {
 alias: {
 assets: path.resolve('./src/assets'),
 lib: path.resolve('./src/lib'),
 modules: path.resolve('./src/scripts/modules'),
 scripts: path.resolve('./src/scripts'),
 styles: path.resolve('. /src/styles'),
 toolbox: path.resolve('./node_modules/react-toolbox'),
 vendors: path.resolve('./src/vendors'),

'react-redux': node_modules_dir +'/react-redux/dist/react-redux.min.js',
'redux': node_modules_dir +'/redux/dist/redux.min. js',
'immutable': node_modules_dir +'/immutable/dist/immutable.min.js'
 },
 extensions: [
'',
 ' .js',
'.jsx',
'.css',
'.scss',
 ],
 },
 toolbox: { 
 theme: path.resolve('./toolbox/index.scss'),
 },
};

webpack.config.dev.js(dev webpack Configuration [merge with above]):

var merge = require('webpack-merge');
var webpack = req uire('webpack');
var path = require('path');
var config = require('./config');

var HappyPack = require( 'happypack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = merge(config, {
 // devtool: 'eval',
 devServer: {
 contentBase:'build',
 historyApiFallback: true,
 hot: true,
 host: '0.0.0.0',< br /> inline: true,
 port: parseInt(process.env.npm_package_config_port),
 },
 module: {
 loaders: [
 {
 test: /\.jsx?$/,
 exclude: /node_modules/,
 loader:'happypack/loader?id=jsx'
 },
 {
 test: /\.s?css$/,
 loader:'happypack/loader?id=css'
 },
 ],
 },
 output : {
 chunkFilename: "[name].js",
 publicPath:'http://localhost:' + process.env.npm_package_config_port + process.env.npm_package_config_public_path,
 pathInfo: true,
 },
 plugins: [
 new webpack.PrefetchPlugin('react'),
 new webpack.PrefetchPlugin('react-toolbox'),
 new webpack.PrefetchPlugin('react-redux'),
 new webpack.PrefetchPlugin('redux'),
 new webpack.PrefetchPlugin('immutable'),
 new webpack.PrefetchPlugin( './scripts/routes.jsx'),

 new webpack.PrefetchPlugin('./scripts/components/smart/index.jsx'),
 new webpack.PrefetchPlugin('. /scripts/components/views/login/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/companies_list/index.jsx'),
 new webpack.PrefetchPlugin( './scripts/components/views/shortlists/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/testing_shortlist/index.jsx'),
 new webpack. PrefetchPlugin('./scripts/components/views/tools/components/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools/horizontal_chart/index.jsx'),< br /> new webpack.PrefetchPlugin('./scripts/components/views/tools/smarts/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools/view_content/index.jsx' ),
 new webpack.PrefetchPlugin('./scripts/components/views/tools/views/index.jsx'),

 new webpack.PrefetchPlugin('./scripts/components/ views/tools.old/refactorized_tools/components/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools.old/refactorized_tools/composed/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools.old/refactorized_tools/view_content/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools. old/refactorized_tools/views/index.jsx'),

 new webpack.PrefetchPlugin('./scripts/components/views/tools.old/tools/cities_list_with_filters/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools.old/tools/city_path_start/index.jsx'),
 new webpack.PrefetchPlu gin('./scripts/components/views/tools.old/tools/company_path_start/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools.old/tools/compare_cities_datapoints /index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools.old/tools/compare_companies_datapoints/index.jsx'),
 new webpack.PrefetchPlugin('. /scripts/components/views/tools.old/tools/compare_result/index.jsx'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools.old/tools/scan_your_brand/index.jsx '),
 new webpack.PrefetchPlugin('./scripts/components/views/tools.old/tools/subcomponents/index.jsx'),

 new webpack.PrefetchPlugin('. /lib/ui/multi_select/RTAutocomplete/index.js'),

 new webpack.PrefetchPlugin('./scripts/components/views/tools/view_content/charts/style/charts.scss') ,
 new webpack.PrefetchPlugin('./scripts/components/views/tools/view_content/filters_box/style/city.scss'),
 new webpack.PrefetchPlu gin('./scripts/components/views/tools/view_content/filters_box/style/company.scss'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools/view_content/map_with_bottom_stats/style .scss'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools/view_content/city_boxes/style/city_boxes.scss'),
 new webpack.PrefetchPlugin('./scripts /components/views/tools/view_content/company_boxes/style/company_boxes.scss'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools/view_content/filters_box_with_header_box/style/city.scss') ,
 new webpack.PrefetchPlugin('./scripts/components/views/tools/view_content/filters_box_with_header_box/style/company.scss'),
 new webpack.PrefetchPlugin('./scripts/components/views /tools/view_content/selected_entities/style/selected_entities.scss'),
 new webpack.PrefetchPlugin('./scripts/components/views/tools/view_content/human_resources_table_box/style/_human_resources_table_box.scss'),
 // new webpack.PrefetchPlugin(''),
 new ExtractTextPlugin("[hash].css"),
 new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON .stringify('development'),
'process.env.LANDING_ONLY': JSON.stringify(false),
 }),
 new webpack.HotModuleReplacementPlugin(),
 new HappyPack({
 id:'jsx',
 threads: 5,
 loaders: ['babel?presets[]=react-hmre']
 }),
 new HappyPack({
 id:'css',
 threads: 5,
 loaders: [
'style',
'css?sourceMap,modules,localIdentName =[local]__[hash:base64:5]',
'postcss',
'resolve-url',
'sass?sourceMap',
'toolbox'< br /> ]
 })
 ],
});

routes.jsx:

[some module imports here]


export default (
 
 
 
 


 {/* Landing */ }
 
 
  path={ paths.landingPageCities} 
 getComponent={(location, callback) => {
 require.ensure(['modules/landing_page/smarts/SmartLandingCities'], function (require) {< br /> callback(null, require('modules/landing_page/smarts/SmartLandingCities').default);
 },'SmartLandingCities');
 }} 
 />
  path={ paths.landingPageCompanies }
 getComponent={(location, callback) => {
 require.ensure(['modules/landing_page/smarts/SmartLandingCompanies'], function ( require) {
 call back(null, require('modules/landing_page/smarts/SmartLandingCompanies').default);
 },'SmartLandingCompanies');
 }} 
 />
  path={ paths.aboutUsPage} 
 getComponent={(location, callback) => {
 require.ensure(['modules/landing_page/views/AboutUsPage'], function (require) { 
 callback(null, require('modules/landing_page/views/AboutUsPage').default);
 },'AboutUsPage');
 }} 
 />
 
 


 {/* Login */ }
 < /pre> 


I read the content of the blog post and the tutorial, and it all seems to be here. However, webpack did not generate a separate bundle for my routing using require.ensure:


> SmartLandingCities 
> SmartLanding Company
>About Us


I have been very desperate because the application package size is 2mb, and I have used all available size reduction methods.


 thank you for your help! 




Since there have been three requests to access the repo containing working solutions, here are:) 
There is a good code! 


https://bitbucket.org/azrahel/crit_calendar/
, , , , , , , , , , , , , ,

WordPress database error: [Table 'yf99682.wp_s6mz6tyggq_comments' doesn't exist]
SELECT SQL_CALC_FOUND_ROWS wp_s6mz6tyggq_comments.comment_ID FROM wp_s6mz6tyggq_comments WHERE ( comment_approved = '1' ) AND comment_post_ID = 5964 ORDER BY wp_s6mz6tyggq_comments.comment_date_gmt ASC, wp_s6mz6tyggq_comments.comment_ID ASC

Leave a Comment

Your email address will not be published.