Here my config:
var path = require('path');
const webpack = require('webpack');
const publicPath = '/dist/assets/';
module.exports = {
entry: './src/index.js',
devtool: 'cheap-module-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin() // Enable HMR
],
output: {
path: path.join(__dirname, '/dist/assets'),
filename: '[name].bundle.js',
publicPath: publicPath,
sourceMapFilename: '[name].map'
},
devServer: {
port: 7777,
host: 'localhost',
historyApiFallback: true,
noInfo: false,
stats: 'minimal',
publicPath: publicPath
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}, {
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
}
]
}
}
And here the index.js:
import _ from 'lodash';
import './style.css';
import Icon from './icon.png';
import Library from './library';
function component() {
var element = document.createElement('div');
// Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
// Add the image to our existing div.
var myIcon = new Image();
myIcon.src = Icon;
element.appendChild(myIcon);
return element;
}
if (module.hot) {
module.hot.accept('./library', function() {
console.log('Accepting the updated library module!');
Library.log();
})
}
document.body.appendChild(component());
Here is the CMD log:
Project is running at link webpack output is served from / dist / assets / 404s will fallback to /index.html 97 modules webpack: Compiled successfully.
And the full code here .
PS: The location of my index.html is in assets as specified in the config output.