[英]Hot reload with typescript and webpack
I'm facing problems while developing both frontend (Redux) and backend (Express) in Typescript.我在 Typescript 中开发前端 (Redux) 和后端 (Express) 时遇到了问题。 I could not make hot reload work.我无法使热重载工作。 Here is configuration of webpack.config.js
in root folder:这是根文件夹中webpack.config.js
配置:
const webpack = require('webpack');
const path = require('path');
const { CheckerPlugin } = require('awesome-typescript-loader');
const config = {
cache: true,
mode: 'development',
entry: {
'user': ['./dist/client/User/index', 'webpack-hot-middleware/client'],
'guest': ['./dist/client/Guest/index', 'webpack-hot-middleware/client']
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new CheckerPlugin()
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/static'
},
devServer: {
contentBase: './dist',
hot: true
},
resolve: {
extensions: ['.tsx', '.ts', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
exclude: /node_modules/,
include: path.join(__dirname, 'client'),
options: { cacheDirectory: true }
}
]
},
node: { fs: 'empty' }
};
module.exports = config;
And tsconfig.json
:和tsconfig.json
:
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"jsx": "react",
"esModuleInterop": true,
"outDir": "dist",
"sourceMap": true,
"baseUrl": "."
},
"include": ["src/**/*.ts", "src/**/*.tsx"],
"exclude": ["node_modules"]
}
In src
I separate two folders client
and server
, my npm start
script is tsc && node dist/server
.在src
我将两个文件夹client
和server
分开,我的npm start
脚本是tsc && node dist/server
。 In server/index
I declare utilization of webpack compiler like this:在server/index
我像这样声明了 webpack 编译器的使用:
import config from '../../webpack.config';
const compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}));
app.use(require('webpack-hot-middleware')(compiler));
When I start the application, webpack builds normally, but it never build hot reload when I make changes in client files.当我启动应用程序时,webpack 正常构建,但当我在客户端文件中进行更改时,它永远不会构建热重载。 I spent a whole day but still confused and don't know how to fix it yet.我花了一整天,但仍然困惑,不知道如何解决它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.