iframe-proxy | Sunbelt Computer Software

253 lines (214 loc) · 5.81 KB
'use strict';
const path = require( 'path' );
const BrowserSyncPlugin = require( 'browser-sync-webpack-plugin' );
const CheckerPlugin = require( 'awesome-typescript-loader' ).CheckerPlugin;
const ContextReplacementPlugin = require( 'webpack/lib/ContextReplacementPlugin' );
const FriendlyErrorsWebpackPlugin = require( 'friendly-errors-webpack-plugin' );
const HotModuleReplacementPlugin = require( 'webpack/lib/HotModuleReplacementPlugin' );
const HtmlWebpackPlugin = require( 'html-webpack-plugin' );
const NamedModulesPlugin = require( 'webpack/lib/NamedModulesPlugin' );
const SourceMapDevToolPlugin = require( 'webpack/lib/SourceMapDevToolPlugin' );
const ScriptExtHtmlWebpackPlugin = require( 'script-ext-html-webpack-plugin' );
const SimpleProgressWebpackPlugin = require( 'simple-progress-webpack-plugin' );
 * Webpack Configuration
module.exports = {
	mode: 'development',
	// Entry files
			path.resolve( process.cwd(), 'src', 'demo', 'main.ts' )
		polyfills: [
			path.resolve( process.cwd(), 'src', 'demo', 'polyfills.ts' )
		demoStyles: [
			path.resolve( process.cwd(), 'src', 'demo', 'styles.css' )
		styles: [
			path.resolve( process.cwd(), 'src', 'lib', 'styles.scss' )
	// File types to resolve
	resolve: {
		extensions: [
		modules: [
			path.resolve( process.cwd(), 'src' ),
			path.resolve( process.cwd(), 'node_modules' )
	// Output files
		path: path.resolve( process.cwd(), 'build', 'dev' ),
		filename: '[name].js'
			// Handle TypeScript files
				exclude: [
					/\.spec\.ts$/
				test: /\.ts$/,
					// Compile TypeScript into JavaScript
						loader: 'awesome-typescript-loader',
						options: {
							configFileName: path.resolve( process.cwd(), 'tsconfig.json' ),
							// silent: true // Disable any output
					// Make Angular templateUrl definitions webpack-compatible (using 'require')
					// Note: This loader requires '@types/node' to be installed, else the TypeScript compiler throws an error
						loader: 'angular2-template-loader'
			// Handle SASS files
				test: /\.scss$/,
					// Inject CSS into the index.html file (inline)
						loader: 'style-loader',
						options: {
							sourceMap: true // Enable support for SourceMaps
					// Read SASS
					// We use the 'css-loader' instead of the (theoratically more performant) 'raw-loader' as the 'raw-loader' does not seem
					// to work properly with the generation of SourceMaps
						loader: 'css-loader',
						options: {
							sourceMap: true // Enable support for SourceMaps
					// Compile SASS into CSS
						loader: 'sass-loader',
						options: {
							outputStyle: 'expanded',
							sourceMap: true, // Enable support for SourceMaps
							sourceMapContents: true
			// Handle CSS files
				test: /\.css$/,
					// Inject CSS into the index.html file (inline)
						loader: 'style-loader',
						options: {
							sourceMap: true // Enable support for SourceMaps
					// Read SASS
					// We use the 'css-loader' instead of the (theoratically more performant) 'raw-loader' as the 'raw-loader' does not seem
					// to work properly with the generation of SourceMaps
						loader: 'css-loader',
						options: {
							sourceMap: true // Enable support for SourceMaps
			// Handle HTML files
				exclude: [
					path.resolve( process.cwd(), 'src', 'demo', 'index.html' ) // Ignore index.html file
				test: /\.html$/,
					// Read HTML
						loader: 'raw-loader'
	plugins: [
		// Fix Angular-specific warnings
		// For details, see <https://github.com/angular/angular/issues/11580> and <https://github.com/angular/angular/issues/14898>
		new ContextReplacementPlugin(
			/\@angular(\\|\/)core(\\|\/)fesm5/,
			path.resolve( __dirname, "./src" )
		// Better TS compiler performance
		new CheckerPlugin(),
		// Source code generator
		new SourceMapDevToolPlugin( {
			filename: "[file].map",
			include: [ // Only generate sourcemaps for the app source code
				'styles'
			columns: false // Cheap & fast (good enough for development)
		new HtmlWebpackPlugin( {
			template: path.resolve( process.cwd(), 'src', 'demo', 'index.html' ),
			chunksSortMode: 'dependency',
			inject: 'head'
		new ScriptExtHtmlWebpackPlugin( {
			defaultAttribute: 'defer'
		// Enable HMR globally
		new HotModuleReplacementPlugin(),
		// Print more readable module names in the browser console (on HMR updates)
		new NamedModulesPlugin(),
		// Browser Sync
		new BrowserSyncPlugin( {
			// Browser Sync options
			logPrefix: 'BrowserSync',
			host: 'localhost',
			port: 3000,
			proxy: 'http://localhost:3100/', // Webpack Dev Server Endpoint
			notify: {
				styles: { // Custom styles for the notification in the browser, bottom center
					top: 'initial',
					bottom: '0',
					right: 'initial',
					left: '50%',
					padding: '15px 28px',
					fontSize: '12px',
					backgroundColor: 'rgba( 0, 0, 0, .9 )',
					transform: 'translateX( -50% )',
					borderRadius: '0'
				// Browser Sync Plugin options
				reload: false // Disable auto-reloading, the Webpack Dev Server will take over this task
		new SimpleProgressWebpackPlugin( {
			format: 'minimal'
		new FriendlyErrorsWebpackPlugin( {
			compilationSuccessInfo: {
				messages: [ 'You application is running here http://localhost:3000' ],
				notes: [ 'Some additionnal notes to be displayed unpon successful compilation' ]
	devServer: {
		historyApiFallback: true,
		host: 'localhost',
		hot: true,
		port: 3100,
Sunbelt Computer Software

PL/B Language Development and Support

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sunbelt Computer Software

PL/B Language Development and Support

FilesExpand file tree

webpack.dev.config.js

Latest commit

History

webpack.dev.config.js

File metadata and controls
