webpack.config.js
const webpack = require('webpack');
const path = require('path');
const config = {
entry: [
'react-hot-loader/patch',
path.resolve(__dirname, 'src', 'index.js')
],
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js',
publicPath: '/'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.svg$/,
use: 'file-loader'
},
{
test: /\.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}
]
}
]
},
resolve: {
extensions: [
'.js',
'.jsx'
],
alias: {
'react-dom': '@hot-loader/react-dom'
}
},
devServer: {
historyApiFallback: true,
contentBase: path.resolve(__dirname, './dist'),
open: true,
hot: true,
compress: true,
}
};
module.exports = config;
index.html
<!DOCTYPE html>
<html>
<head>
<title>example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app"></div>
<script src='../bundle.js'></script>
</body>
</html>
