iviireczech
5/25/2017 - 4:29 AM

webpack dev config

webpack dev config

let path = require('path');

let ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin');
let DefinePlugin = require('webpack/lib/DefinePlugin');
let HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let NamedModulesPlugin = require('webpack/lib/NamedModulesPlugin');
let NoEmitOnErrorsPlugin = require('webpack/lib/NoEmitOnErrorsPlugin');

const PORT = process.env.npm_package_config_port || 8090;
const URL = `http://localhost:${PORT}/`;
const ABSOLUTE_BASE = path.normalize(path.join(__dirname, '..'));

function getUU5Version() {
	return require(path.join(ABSOLUTE_BASE, 'package.json')).dependencies.uu5g03.match('file:npm\/uu5g03-(.*)\.tgz')[1];
}

module.exports = {
	entry: [
		// activate HMR for React
		'react-hot-loader/patch',

		// bundle the client for webpack-dev-server
		// and connect to the provided endpoint
		`webpack-dev-server/client?${URL}`,

		// bundle the client for hot reloading
		// only- means to only hot reload for successful updates
		'webpack/hot/only-dev-server',

		// the entry point of our app
		path.join(ABSOLUTE_BASE, 'src', 'js', 'index.jsx')
	],

	output: {
		// the output bundle filename
		filename: 'assets/js/bundle.js',

		// the output directory as an absolute path
		path: path.join(ABSOLUTE_BASE, 'target', 'classes', 'public'),

		// specifies the public URL address of the output files when referenced in a browser
		publicPath: URL
	},

	// controls if and how Source Maps are generated
	devtool: 'eval',

	module: {
		rules: [
			{
				test: /\.(jpg|png|gif)$/,
				use: {
					loader: 'url-loader',
					options: {
						limit: 25000
					}
				}
			},
			{
				test: /\.(otf|eot|svg|ttf|woff|woff2)/,
				use: {
					loader: 'file-loader',
					options: {
						name: 'assets/fonts/[name]-[hash].[ext]',
						size: '6'
					}
				}
			},
			{
				test: /\.less$/,
				use: [
					'style-loader',
					{
						loader: 'css-loader',
						query: { modules: false, sourceMap: true }
					},
					{
						loader: 'postcss-loader',
						options: { plugins: () => [require('autoprefixer')], sourceMap: true }
					},
					{
						loader: 'less-loader',
						query: { sourceMap: true }
					}
				]
			},
			{
				test: /\.jsx?$/,
				use: [
					{
						loader: 'babel-loader'
					}
				],
				include: [
					path.join(ABSOLUTE_BASE, 'src', 'js'),
					path.join(ABSOLUTE_BASE, 'node_modules', 'uu5')
				]
			},
			{
				test: /\.js$/,
				use: [
					{
						loader: 'imports-loader',
						options: { define: '>false' }
					}

				],
				include: [
					path.join(ABSOLUTE_BASE, 'src', 'js', 'api')
				]
			}
		]
	},

	plugins: [

		// provide context to UU5's use of System.import
		new ContextReplacementPlugin(
			// the (\\|\/) piece accounts for path separators in *nix and Windows
			/uu5g03/,
			path.join(ABSOLUTE_BASE, 'src')
		),

		// enable HMR globally
		new HotModuleReplacementPlugin(),

		// prints more readable module names in the browser console on HMR updates
		new NamedModulesPlugin(),

		// do not emit compiled assets that include errors
		new NoEmitOnErrorsPlugin(),

		// select index.html template
		new HtmlWebpackPlugin({
			template: path.join(ABSOLUTE_BASE, 'src', 'index.ejs')
		}),

		// define uu5 version
		new DefinePlugin({
			'process.env': {
				NODE_ENV: JSON.stringify('development'),
				VERSION: JSON.stringify(getUU5Version())
			}
		})
	],

	devServer: {
		host: 'localhost',
		port: PORT,

		// respond to 404s with index.html
		historyApiFallback: true,

		// enable HMR on the server
		hot: true,

		proxy: {
			// proxy api requests to the separate api backend
			'/mwapi/**': {
				target: 'http://localhost:8080',
				changeOrigin: true
			}
		}
	},

	resolve: {
		extensions: ['.js', '.jsx']
	},

	externals: {
		// required by uu5
		'module': {}
	},

	// include mocks for when node.js specific modules may be required
	node: {
		// prevent loading the the `fs` module in the browser
		fs: 'empty'
	}

};