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'
}
};