Я не могу определить, почему загружается html, а затем загружается css, из-за чего страница сначала выглядит странно. Ниже приведены мои файлы conf:
webpack.conf.js
const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const autoprefixer = require('autoprefixer');
module.exports = {
module: {
preLoaders: [
{
test: /\.ts$/,
exclude: /node_modules/,
loader: 'tslint'
}
],
loaders: [
{
test: /.json$/,
loaders: [
'json'
]
},
{
test: /\.css$/,
loaders: ['css-loader?sourceMap']
},
{
test: /\.(sass|scss)$/,
loaders: ['css-loader?sourceMap', 'resolve-url', 'sass-loader?sourceMap']
},
{
test: /\.(woff|woff2)$/,
loader: 'url',
query: {
limit: 10000,
minetype: 'application/font-woff'
}
},
{
test: /\.(ttf|eot|svg|jpg|png|gif)$/,
loader: 'url',
},
{
test: /\.ts$/,
exclude: /node_modules/,
loaders: [
'ts'
]
},
{
test: /\.html$/,
exclude: /index\.html$/,
loader: [
'html'
]
}
],
noParse: [ /zone\.js\/dist\/.+/, /angular2\/bundles\/.+/ ]
},
plugins: [
//https://github.com/AngularClass/angular2-webpack-starter/issues/993 fixes typescript warning
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
__dirname
),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
template: `${conf.path.src('index.html')}`,
inject: true,
appD: conf.getAppDID()
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(conf.environment),
'root': JSON.stringify(conf.paths.root)
}
})
],
postcss: () => [autoprefixer],
debug: true,
devtool: 'inline-source-map',
output: {
path: path.join(process.cwd(), conf.paths.tmp),
filename: 'index.js'
},
resolve: {
extensions: [
'',
'.webpack.js',
'.web.js',
'.js',
'.ts'
]
},
entry: [
`bootstrap-loader/lib/bootstrap.loader?configFilePath=../../../.bootstraprc!bootstrap-loader/no-op.js`,
`./${conf.path.src('polyfills')}`,
`./${conf.path.src('vendor')}`,
`./${conf.path.src('index')}`
],
ts: {
configFileName: 'tsconfig.json'
},
tslint: {
configuration: require('../tslint.json')
}
};
package.json
{
"dependencies": {
"@angular/animations": "4.3.5",
"@angular/common": "4.3.5",
"@angular/compiler": "4.3.5",
"@angular/core": "4.3.5",
"@angular/forms": "4.3.5",
"@angular/http": "4.3.5",
"@angular/platform-browser": "4.3.5",
"@angular/platform-browser-dynamic": "4.3.5",
"@angular/platform-server": "4.3.5",
"@angular/router": "4.3.5",
"@stomp/ng2-stompjs": "0.4.1",
"angular2-moment": "1.6.0",
"core-js": "2.4.1",
"enhanced-resolve": "^3.3.0",
"font-awesome": "4.7.0",
"lodash": "4.17.4",
"net": "1.0.2",
"ng2-file-upload": "^1.2.1",
"primeng": "4.1.2",
"quill": "1.2.6",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.2",
"uuid": "3.1.0",
"zone.js": "0.8.14"
},
"devDependencies": {
"@angular/compiler-cli": "4.3.5",
"@ngtools/webpack": "1.5.3",
"@types/core-js": "^0.9.42",
"@types/debug": "^0.0.29",
"@types/jasmine": "^2.5.53",
"@types/lodash": "4.14.73",
"@types/node": "^8.0.14",
"@types/sinon": "^2.3.3",
"@types/uglify-js": "^2.6.29",
"@types/webpack": "^2.2.16",
"angular2-template-loader": "^0.6.2",
"argv": "^0.0.2",
"async": "^2.5.0",
"autoprefixer": "^7.1.2",
"awesome-typescript-loader": "^3.2.1",
"bootstrap-loader": "^2.1.0",
"bootstrap-sass": "^3.3.7",
"codelyzer": "^3.1.2",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.4",
"electron": "^1.6.11",
"eslint": "^2.11.0",
"eslint-loader": "^1.9.0",
"extract-text-webpack-plugin": "^2.1.2",
"fail-on-errors-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.2",
"gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
"gulp-cheerio": "^0.6.2",
"gulp-modify-file": "^0.1.0",
"gulp-remove-empty-lines": "^0.1.0",
"gulp-rename": "^1.2.2",
"gulp-util": "^3.0.8",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.29.0",
"ignore-loader": "^0.1.2",
"intl": "^1.2.5",
"istanbul-instrumenter-loader": "^2.0.0",
"jasmine-core": "2.6.4",
"json-loader": "^0.5.4",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.2.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.1.0",
"karma-junit-reporter": "^1.2.0",
"karma-mocha-reporter": "^2.2.3",
"karma-phantomjs-launcher": "^1.0.4",
"karma-remap-coverage": "^0.1.4",
"karma-sinon": "^1.0.5",
"karma-source-map-support": "^1.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.4",
"mime": "1.3.6",
"ng2-popover": "0.0.13",
"node-sass": "^4.5.3",
"npm-run-all": "^4.0.2",
"phantomjs-prebuilt": "^2.1.14",
"postcss-loader": "^2.0.6",
"pretty-data": "^0.40.0",
"progress-bar-webpack-plugin": "^1.10.0",
"raw-loader": "^0.5.1",
"resolve-url-loader": "^2.1.0",
"sass-loader": "^6.0.6",
"sass-resources-loader": "^1.3.0",
"sinon": "^2.3.8",
"style-loader": "^0.18.2",
"tslint": "^5.6.0",
"tslint-loader": "^3.5.3",
"tslint-microsoft-contrib": "^5.0.1",
"typescript": "^2.4.2",
"url-loader": "^0.5.9",
"wallaby-webpack": "^0.0.38",
"webpack": "2.5.1",
"webpack-bundle-analyzer": "^2.8.3",
"webpack-dev-server": "^2.5.1",
"webpack-merge": "^4.1.0",
"yargs": "^8.0.2"
},
"scripts": {
"clean": "npm-run-all --parallel clean:*",
"clean:coverage": "rimraf coverage",
"clean:dist": "rimraf dist",
"clean:npm": "rimraf node_modules",
"clean:tmp": "rimraf .tmp",
"build": "webpack --config conf/webpack.config.js",
"build:dist": "npm run build -- --env.serve=dist",
"build:dist:prod": "npm run build:dist -- --env.node=production",
"i18n:extract": "ng-xi18n --i18nFormat=xlf -p tsconfig-i18n.json",
"lint": "tslint --type-check --project tsconfig.json",
"start": "webpack-dev-server --config conf/webpack.config.js",
"start:dist": "npm start -- --env.serve=dist",
"start:dist:prod": "npm run start:dist -- --env.node=production",
"test": "karma start conf/karma.conf.js --single-run",
"test:auto": "npm test -- --no-single-run"
},
"eslintConfig": {
"root": true,
"env": {
"browser": true,
"jasmine": true
}
}
}
Что требуется сделать в этом случае? Нужно ли мне что-либо менять в файле webpack.conf или для этой цели потребуется какой-либо пакет.
