1
현재 프로젝트는 다음과 같이 설정되어 있습니다. 
각도 재질은 내 프로젝트에서 큰 다운로드 크기이므로 흰색 화면은 약 45 초 동안로드됩니다. 내 응용 프로그램을 빠르게로드 할 수 있도록 코드를 분할하려고하지만 오류가 발생합니다. 코드 분할이 나를 위해 작동하지 않는 것 같습니다.Webpack 각도 코드 분할
코어/app.module.js
'use strict'; require.ensure([], function (require) { require('angular/angular.min'); require('angular-aria/angular-aria.min'); require('angular-animate/angular-animate.min'); require('angular-ui-router/release/angular-ui-router.min'); }, 'common'); var page1Module = require('./../page1/page1.module'); var page2Module = require('./../page2/page2.module'); var appRunBlock = require('./app.run'); var appConfig = require('./app.config'); var moduleName = 'app'; var app = angular.module(moduleName, [ 'ui.router', page1Module, page2Module ]) .config(appConfig) .run(appRunBlock); module.exports = moduleName; PAGE1/page1.module.js
'use strict';
require.ensure([], function (require) {
require('angular-material/modules/js/core/core.min.js');
require('angular-material/modules/js/core/core.min.css');
require('angular-material/modules/js/core/default-theme.js');
require('angular-material/modules/js/button/button.min.js');
require('angular-material/modules/js/button/button.min.css');
}, 'page1');
var page1Route = require('./page1.route');
var page1Controller = require('./page1.controller');
var moduleName = 'app.page1';
angular.module(moduleName, [
'material.components.button'
])
.config(page1Route)
.controller('Page1Controller', page1Controller);
module.exports = moduleName;
페이지 2/page2.module.js
'use strict';
require.ensure([], function (require) {
require('angular-material/modules/js/core/core.min.js');
require.include('angular-material/modules/js/core/core.min.css');
require.include('angular-material/modules/js/core/default-theme.js');
require('angular-material/modules/js/toolbar/toolbar.min.js');
require('angular-material/modules/js/toolbar/toolbar.min.css');
require('angular-material/modules/js/content/content.min.js');
require('angular-material/modules/js/content/content.min.css');
require('angular-material/modules/js/input/input.min.js');
require('angular-material/modules/js/input/input.min.css');
}, 'page2');
var page2Route = require('./page2.route');
var page2Controller = require('./page2.controller');
var moduleName = 'app.page2';
angular.module(moduleName, [
'material.components.toolbar',
'material.components.content',
'material.components.input'
])
.config(page2Route)
.controller('Page2Controller', page2Controller);
module.exports = moduleName;
나는이 webpack.config.js이
var webpack = require('webpack');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
var webpack_config = {
context: path.join(__dirname + '/app'),
entry: {
app: './core/app.module.js'
},
output: {
path: path.join(__dirname + '/release'),
publicPath: 'http://localhost:8080/',
filename: '/js/[name].js',
chunkFilename: '/js/[name].js'
},
module: {
loaders: [
{
test: /\.css$/,
exclude: 'node_modules',
loader: 'style!css'
},
{
test: /\.scss$/,
exclude: 'node_modules',
loader: 'style!css!sass'
},
{
test: /\.html$/,
exclude: 'node_modules',
loader: 'ngtemplate?relativeTo=' + (path.join(__dirname, './app')) + '/!html?' +
JSON.stringify({attrs: ['img:src', 'img:ng-src', 'md-icon:md-svg-src']})
}
]
},
plugins: [
new CopyWebpackPlugin([
{from: './index.html', to: './index.html'}
])
],
devServer: {
contentBase: path.resolve('./release')
},
watch: true
};
module.exports = webpack_config;
내가 그들을 필요로 내 파일을로드 할 require.ensure 내부 require.include를 사용하려고하고 그것이 작동하지 않습니다 있습니다. 내 libs 경로를 require.ensure ([]) 배열에 넣었지만 작동하지 않습니다.
webpack.config.js에 두 번째 항목을 넣고 모든 libs를 'vendor'라는 공통 청크에 넣거나 require.ensure()가 아닌 require()를 사용하는 경우에만 작동합니다.
내 각 재료로드는 약 1.5MB이며 약 30 초 또는 1m가 소요됩니다. 앱이로드되면 모든 libs가로드 될 때까지 흰색 화면이 표시됩니다. 그것이 코드 분할을 필요로하는 이유입니다. webpack-dev-server를 사용하고 있는데 다음과 같은 오류가 발생합니다. 
도와주세요.