4
Я хотел бы использовать метод пакетной загрузки webpack для создания отдельных пакетов для отдельных маршрутов в моей конфигурации маршрута. Одним из способов достижения этого является использование require.ensure для определения точек разделения для кусков и асинхронной загрузки модулей по требованию браузера.Не удается получить метод webpack require.ensure chunking для работы с реактивным маршрутизатором и генерировать отдельные файлы пакетов
Вот что я ве получил:
webpack.config.js (объединен с DEV/прод WebPack конфиги в зависимости от выполняемой НПМ сценария):
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: {
loaders: [
{
test: /\.(jpg|png|gif|json)$/,
loader: 'file',
query: {
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'),
new HappyPack({
id: 'svg',
threads: 5,
loaders: [
'svg-inline'
]
})
],
postcss: function() {
return [
autoprefixer,
];
},
resolve: {
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 (конфигурация WebPack DEV [объединен с выше]):
var merge = require('webpack-merge');
var webpack = require('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',
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'),
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(''),
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 (
<Route component={ PermisionProvider } >
<Route component={ AppProvider } >
<Route component={ SnackbarProvider } >
<Redirect from={ paths.root } to={ localStorage.get('user') ? paths.login : paths.landingPageCities } />
{ /* Landing */ }
<Route onEnter={ _hasPermission.bind(null, 'landingPage') }>
<Route component={ LandingLayout }>
<Route
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');
}}
/>
<Route
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');
}}
/>
<Route
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');
}}
/>
</Route>
</Route>
{ /* Login */ }
<Route onEnter={ _hasPermission.bind(null, 'login') }>
Я прочитал тоны блога и учебники, и все это, кажется, в месте здесь. Тем не менее, WebPack не создает отдельные пучки для ни один из маршрутов, в которых я использую require.ensure:
- SmartLandingCities
- SmartLandingCompanies
- AboutUsPage
Am супер отчаянный уже, как приложение пучок размером 2 МБ, и я уже использовал все доступные методы сокращения размера.
Спасибо за помощь!
Возможный дубликат [Использование Webpack и среагировать-маршрутизатор для lazyloading и код расщепления не загрузки] (http://stackoverflow.com/questions/34925717/using-webpack-and-react-router- for-lazyloading-and-code-split-not-loading) –
@azrahel, у меня такая же проблема, и вы также разместили вопрос http://stackoverflow.com/questions/39757297. Хотя вы смотрите на свой файл webpack.config, вы не определяете chunkFilename: «[name] .js», тогда как в dev config вы сделали. попробуйте добавить это в конфигурацию производства. Если вы уже решили, сообщите мне. – jasan
Эй, да решил уже. Я действительно не помню, в чем была конкретная проблема, но я могу отправить вам небольшой проект, который я недавно начал с выше работающего кода. – azrahel