standard React webpack.config.js notes
'use strict';
//to-do
const HtmlPlugin = require('html-webpack-plugin');
//to extract sass loader
const ExtractPlugin = require('extract-text-webpack-plugin');
module.exports = {
//enter app where reactjs Components live
entry: `${__dirname}/src/main.js`,
//options how/where to output bundles
output: {
path: `${__dirname}/build`,
publicPath: '/',
filename: 'bundle-[hash].js'
},
//how to treat modules in project
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
loader: ExtractPlugin.extract(['css-loader', 'sass-loader'])
}
]
},
//customize build for js and css modules
plugins: [
new HtmlPlugin({ template: `${__dirname}/src/index.html` }),
new ExtractPlugin('bundle-[hash].css')
],
//server configurations
devServer: {
hot: true,
inline: true
},
//how to generate source maps for compressed debugging
devtool: 'cheap-module-eval-source-map'
}