Skip to content

Instantly share code, notes, and snippets.

@N0taN3rd
Last active November 21, 2017 07:59
Show Gist options
  • Select an option

  • Save N0taN3rd/7807d8c3ccd8eaafad88a952ee25594f to your computer and use it in GitHub Desktop.

Select an option

Save N0taN3rd/7807d8c3ccd8eaafad88a952ee25594f to your computer and use it in GitHub Desktop.
Webpack Simple Hot Reloading
<!doctype html>
<html>
<head>
</head>
<body>
<script src='http://localhost:9000/dist/bundle.js'></script>
</body>
</html>
{
"name": "awesomeness",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "node ./node_modules/.bin/webpack-dev-server --port=9000 --config webpack.config.dev.js --watch-content-base --hot --inline",
"dev-win": "node_modules\\.bin\\webpack-dev-server.cmd --port=9000 --config webpack.config.dev.js --watch-content-base --hot --inline"
},
"devDependencies": {
"webpack": "^3.8.1",
"webpack-dev-server": "^2.9.4"
}
}
const path = require('path')
const webpack = require('webpack')
const cwd = process.cwd()
module.exports = {
devtool: 'inline-source-map',
entry: './index.js',
output: {
filename: 'bundle.js',
// chunkFilename: '[name]-chunk.js',
path: path.join(cwd, 'dist'),
publicPath: '/dist'
// necessary for HMR to know where to load the hot update chunks
},
context: cwd,
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
// prints more readable module names in the browser console on HMR updates
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development')
})
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment