A manual configuration has been set up to accommodate all the technologies mentioned in the title (webpack, typescript, phaser, and angular).
While it works perfectly for angular component stylesheets, there seems to be an issue with including a global stylesheet. Below are the relevant configuration files:
HTML file:
<!-- src/index.html -->
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<!-- included here! -->
<link rel="stylesheet" href="styles/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
</body>
</html>
CSS file:
/*
src/styles/main.css
This file is correctly loaded in the dev environment but disappears when I build the project. :(
*/
body {
background: #253050 url('../assets/design/main_background.jpg') no-repeat center;
}
Webpack configuration:
// config/webpack.common.js
'use strict';
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
const path = require('path');
var helpers = require('./helpers');
var distDir = path.resolve(__dirname, '../dist');
// Phaser webpack config
const phaserModule = path.join(__dirname, '/../node_modules/phaser-ce/');
const phaser = path.join(phaserModule, 'build/custom/phaser-split.js');
const pixi = path.join(phaserModule, 'build/custom/pixi.js');
const p2 = path.join(phaserModule, 'build/custom/p2.js');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
"app": "./src/main.ts"
},
// What files webpack will manage
resolve: {
extensions: ['.js', '.ts', '.tsx'],
alias: {
'phaser': phaser,
'pixi': pixi,
'p2': p2
}
},
output: {
path: distDir,
filename: '[name]_bundle.js'
},
module: {
rules: [
{ test: /assets(\/|\\)/, use: [ 'file-loader' ] },
{
test: /\.tsx?$/,
loaders: ['ts-loader', 'angular2-template-loader'],
exclude: [
/.+phaser-ce\/typescript\/.+\.ts$/,
/typescript\/.+\.d\.ts$/
]
},
{
test: /\.html$/,
loader: 'html-loader'
},
{ test: /\.css$/, loaders: ['to-string-loader', 'css-loader'] },
{
test: /\.scss$/,
use: ['to-string-loader', 'css-loader', 'sass-loader']
},
{ test: /pixi\.js/, use: [{loader: 'expose-loader', options: 'PIXI'}] },
{ test: /phaser-split\.js$/, use: [{loader: 'expose-loader', options: 'Phaser'}] },
{ test: /p2\.js/, use: [{loader: 'expose-loader', options: 'p2'}] }
]
},
plugins: [
new webpack.ContextReplacementPlugin(
/\@angular(\\|\/)core(\\|\/)esm5/,
helpers.root('src')
),
new CleanWebpackPlugin([distDir]),
new HtmlWebpackPlugin({
template: 'src/index.html',
chunksSortMode: function(a, b) {
var order = ["polyfills", "app"];
return order.indexOf(a.names[0]) - order.indexOf(b.names[0]);
}
})
]
};
And here is the webpack.prod.js configuration:
module.exports = merge(common, {
devtool: 'source-map',
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new UglifyJSPlugin({sourceMap: true}),
new ExtractTextPlugin('[name].[hash].css'),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
});
When running
webpack --config config/webpack.prod.jsIf anyone could provide insights on how to successfully load SCSS, especially during development mode, it would be greatly appreciated!