I'm trying to add hot module reloading into my typescript project. I have the following settings:
package.json
"start": "webpack-dev-server"
tsconfig.js
{
"compilerOptions": {
"outDir": "/public/",
"target": "es5",
"noImplicitAny": true,
"experimentalDecorators": true,
"sourceMap": true,
"jsx": "react"
},
"include": [
"./src/**/*"
]
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var publicFolder = path.join(__dirname, 'public');
var sourceFolder = path.join(__dirname, 'src');
module.exports = {
devtool: 'source-map',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index.tsx',
],
output: {
filename: 'bundle.js',
path: publicFolder,
publicPath: publicFolder,
},
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
},
module: {
loaders: [
{
test: /\.tsx?$/,
loaders: ['react-hot', 'awesome-typescript'],
include: sourceFolder,
},
],
preLoaders: [
{
test: /\.js$/,
loader: 'source-map-loader',
include: sourceFolder,
},
],
},
devServer: {
colors: true,
port: 3000,
hot: true,
inline: true,
progress: true,
historyApiFallback: true,
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
],
};
I get the following error message in my explorer:
GET http://localhost:3000/public/bundle.js 404 (Not Found)
It seems that the public path is wrongly defined. Please can you help me what am I doing wrong?
ts-loader uses tsc , the TypeScript compiler, and relies on your tsconfig. json configuration. Make sure to avoid setting module to "CommonJS", or webpack won't be able to tree-shake your code.
To enabling HMR in your project, you need to let your application know how to handle hot updates. You can do so by implementing the module. hot API exposed by Webpack. Once the hot update is accepted, the HMR runtime and the loaders will take over to handle the update.
Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways: Retain application state which is lost during a full reload.
Like Babel, Webpack depends on TSC to transpile TypeScript to JavaScript but as TSC doesn't have a clue about Webpack, hence Webpack needs a loader to talk to TSC. This is where the ts-loader comes into play. Webpack compiles a TypeScript file using ts-loader package which asks TSC to do the compilation.
Your output.publichPath
is incorrect. It should be an url: publicPath: '/public/'
. Not a path on your local filesystem.
From the webpack documentation
The publicPath specifies the public URL address of the output files when referenced in a browser. For loaders that embed or tags or reference assets like images, publicPath is used as the href or url() to the file when it's different than their location on disk (as specified by path)
Webpack dev server will generate an in memory bundle and serve it from output.publicPath
From webpack dev server documentation
This modified bundle is served from memory at the relative path specified in publicPath (see API). It will not be written to your configured output directory. Where a bundle already exists at the same URL path, the bundle in memory takes precedence (by default).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With