我目前有一个使用 webpack 的 Angular (v4.0.1) 应用程序并部署到 Heroku。我有一个加载微调器设置为在应用程序加载时显示在页面上。目前我已经设置了它，以便它在本地工作，但由于某种原因，当我部署到 heroku 时，加载微调器(或者更具体地说是用于旋转加载微调器的 CSS)似乎没有被拉入。
我已经尝试了许多可能的修复程序，但我很难弄清楚我需要更改什么才能使其在生产中工作，而且我在 stackoverflow 上找到的所有内容似乎都只能在本地工作。我还应该澄清一下，我在应用程序中的所有 css 文件(如在应用程序加载后加载的组件样式中)工作正常，它只是我包含在索引中的一个 css 文件.html专门用于加载微调器需要在 Angular 应用程序加载之前可用。
我的文件结构(简化)：
.
+-- config/
+-- src/
| +-- app/
| +-- assets/
| +-- icons/
| +-- loading-spinner.svg
| +-- stylesheets/
| +--- loading-spinner.css
| +-- vendor/
| +-- index.html
| +-- main.ts
| +-- polyfills.ts
| +-- tsconfig.json
+-- package.json
+-- server.js
我的索引.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Stylist Suite 2.0</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="src/assets/stylesheets/loading-spinner.css">
</head>
<body>
<ss-app>
<div class="loading-spinner ss-loading"></div>
</ss-app>
</body>
</html>
加载微调器.css文件：
/* --- Loading Spinner - Needed Before App Loads ---*/
.loading-spinner {
width: 42px;
height: 44px;
background: url("../icons/loading-spinner.svg") no-repeat;
margin: 0 auto;
animation: spin 2.5s linear infinite;
-webkit-animation: spin 2.5s linear infinite;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-spinner .ss-loading {
position: fixed;
top:50%;
left:50%;
margin-left:-21px;
margin-top: -22px;
align-self: center;
justify-self: center;
}
My webpack.common.js (位于 config/下)
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor/vendor.ts',
'app': './src/main.ts'
},
resolve: {
extensions: ['.ts', '.js']
},
devtool: 'source-map',
module: {
rules: [
{
test: /.html$/,
loader: 'html-loader'
},
{
test: /.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /.css$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin.extract({ loader: 'style-loader', use: 'css-loader?sourceMap' })
},
{
test: /.css$/,
include: helpers.root('src', 'app'),
loader: 'raw-loader'
},
{
test: /.css$/,
exclude: helpers.root('src', 'assets'),
loader: ExtractTextPlugin.extract({ loader: 'style-loader', use: 'css-loader?sourceMap' })
},
{
test: /.css$/,
include: helpers.root('src', 'assets'),
loader: 'raw-loader'
},
{
test: /.scss$/,
exclude: /node_modules/,
loaders: ['to-string-loader', 'style-loader', 'css-loader', 'resolve-url-loader', 'sass-loader?sourceMap']
},
{
test: /.ts$/,
loaders: [
{
loader: 'awesome-typescript-loader',
options: { configFileName: helpers.root('src', 'tsconfig.json') }
}, 'angular2-template-loader'
]
}
]
},
plugins: [
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\|/) piece accounts for path separators in *nix and Windows
/angular(\|/)core(\|/)(esm(\|/)src|src)(\|/)linker/,
helpers.root('./src'), // location of your src
{} // a map of your routes
),
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
})
]
};
My webpack.dev.js (位于 config/下)
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
module.exports = webpackMerge(commonConfig, {
devtool: 'cheap-module-eval-source-map',
output: {
path: helpers.root('dist'),
publicPath: 'http://localhost:4200/',
filename: '[name].js',
chunkFilename: '[id].chunk.js'
},
plugins: [
new ExtractTextPlugin('[name].css'),
new webpack.DefinePlugin({
'process.env.API_APPLICATION_ID': JSON.stringify(""),
'process.env.REDIRECT_URL': JSON.stringify("http://localhost:4200/login"),
'process.env.API_BASE_URL': JSON.stringify("http://localhost:3000"),
'process.env.SITE_URL': JSON.stringify("http://localhost:3000")
})
],
devServer: {
historyApiFallback: true,
stats: 'minimal'
}
});
My webpack.prod.js (位于 config/下)
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var helpers = require('./helpers');
const ENV = process.env.NODE_ENV = process.env.ENV = 'production';
module.exports = webpackMerge(commonConfig, {
devtool: 'source-map',
output: {
path: helpers.root('dist'),
publicPath: '/',
filename: '[name].[hash].js',
chunkFilename: '[id].[hash].chunk.js'
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
mangle: {
keep_fnames: true
}
}),
new ExtractTextPlugin('[name].[hash].css'),
new webpack.DefinePlugin({
'process.env.API_APPLICATION_ID': JSON.stringify(process.env.API_APPLICATION_ID),
'process.env.REDIRECT_URL': JSON.stringify(process.env.REDIRECT_URL),
'process.env.API_BASE_URL': JSON.stringify(process.env.API_BASE_URL),
'process.env.SITE_URL': JSON.stringify(process.env.REDIRECT_URL)
}),
new webpack.LoaderOptionsPlugin({
htmlLoader: {
minimize: false // workaround for ng2
}
})
]
});
同样，一旦应用程序加载，我的所有资产(其他样式表，图标文件夹下的图像)都可以正常加载，因为它们由我的 webpack.common.js 中的各种 css 和文件加载器正确处理。我假设问题与我的 webpack.prod.js 文件有关，因为所有这些都在本地完美运行，但我尝试的所有内容似乎都无法解决问题，加载微调器.css文件根本没有加载。任何建议将不胜感激。
从您的配置来看，您似乎只是逐字逐句地遵循了 webpack 上的 Angular 文档。在这些文档中，他们使用全局样式表src/assets/css/styles.css。他们在AppComponent中导入了这个
import '../assets/css/styles.css';
@Component({
})
export class AppComponent { }
这将导致ExtractTextPlugin从您import或require的(在本例中为 css)文件中提取文本，将其放入styles.css文件中，然后将该文件添加为<link>。输出文件名与实际文件名没有关联。styles.css恰好是为ExtractTextPlugin配置的名称。
如果检查dist文件夹，并签出index.html，您将看到此styles.[hash].css文件已添加为<link>。
话虽如此，您应该对加载器 css 执行相同的操作。只需将其导入AppComponent即可。这将导致加载器将 css内容放入styles.[hash].css。如果你想让加载器 css 与其他全局样式分开，请再想一想，因为这并不重要。浏览器不会开始呈现，直到加载完所有样式表。
它适用于开发服务器的原因是因为开发服务器的工作方式略有不同。它配置为为服务器添加公共路径，以便从某个位置服务器文件。
在这种情况下，可以从服务器访问资产。但是，当您为生产环境构建时，不会转移这些资产。它们需要导入到某个地方，因为这是 webpack 在大多数端口上的工作方式。通过导入，webpack 知道它是一个应该为分发而构建的模块。
您也不需要像以前那样手动将加载程序 css 添加到index.html。它既适用于开发和生产，只需导入即可。此外，您不需要在任何地方导入 svg，因为 webpack 已经在加载器 css url 中检测到它，并将其传输到生产版本中。