我将webpack从3.8.1
版本升级到4.19.0
和其他一些必需的软件包,但是,在此升级之后,HMR不知何故停止了重建工作(当我更改.tsx文件中的任何内容时)构建应用程序工作正常。
package.json
{
"name": "MyApp",
"private": true,
"version": "1.0.0",
"devDependencies": {
"@types/webpack": "4.0.0",
"@types/webpack-env": "1.13.6",
"aspnet-webpack": "3.0.0",
"aspnet-webpack-react": "4.0.0",
"awesome-typescript-loader": "3.2.1",
"event-source-polyfill": "1.0.4",
"css-loader": "0.28.4",
"mini-css-extract-plugin": "0.4.4",
"file-loader": "2.0.0",
"isomorphic-fetch": "2.2.1",
"less": "3.7.1",
"less-loader": "4.1.0",
"node-noop": "1.0.0",
"style-loader": "0.18.2",
"typescript": "3.0.1",
"url-loader": "0.5.9",
"webpack": "4.19.0",
"webpack-cli": "3.1.2",
"webpack-hot-middleware": "2.24.3"
},
"dependencies": {
"@progress/kendo-data-query": "1.4.1",
"@progress/kendo-drawing": "1.5.7",
"@progress/kendo-react-buttons": "2.3.2",
"@progress/kendo-react-dateinputs": "2.3.2",
"@progress/kendo-react-dialogs": "2.3.2",
"@progress/kendo-react-dropdowns": "2.3.2",
"@progress/kendo-react-grid": "2.3.2",
"@progress/kendo-react-inputs": "2.3.2",
"@progress/kendo-react-intl": "2.3.2",
"@progress/kendo-react-layout": "2.3.2",
"@progress/kendo-react-pdf": "2.3.2",
"@progress/kendo-react-popup": "2.3.2",
"@progress/kendo-react-animation": "2.3.2",
"@progress/kendo-theme-default": "2.60.0",
"@types/deep-equal": "1.0.1",
"@types/history": "4.6.0",
"@types/prop-types": "15.5.6",
"@types/react": "16.4.2",
"@types/react-dom": "16.0.7",
"@types/react-hot-loader": "3.0.3",
"@types/react-redux": "4.4.45",
"@types/react-router": "4.0.12",
"@types/react-router-dom": "4.0.5",
"@types/react-router-redux": "5.0.3",
"babel-polyfill": "6.26.0",
"bootstrap-less-port": "0.3.0",
"deep-equal": "1.0.1",
"history": "4.6.3",
"jquery": "3.3.1",
"moment": "2.22.2",
"query-string": "5.1.1",
"react": "16.4.2",
"react-appinsights": "1.0.4",
"react-dom": "16.4.2",
"react-hot-loader": "3.0.0-beta.7",
"react-redux": "5.0.5",
"react-resize-detector": "3.1.1",
"react-router-dom": "4.1.1",
"react-router-redux": "5.0.0-alpha.6",
"redux": "3.7.1",
"redux-form": "7.4.2",
"redux-logger": "3.0.6",
"redux-thunk": "2.2.0",
"serialize-error": "2.1.0",
"webpack-dev-middleware": "3.4.0"
},
"scripts": {
"build-dev": "webpack --config webpack.config.vendor.js --env.environment=development && webpack --config webpack.config.js --env.environment=development",
"build-prod": "webpack --config webpack.config.vendor.js --env.prod && webpack --config webpack.config.js --env.prod"
}
}
webpack配置文件
const path = require('path');
const webpack = require('webpack');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = (env) => {
if (!env) {
env = {
environment: "development"
};
}
const isDevBuild = env && env.environment === "development";
return [{
stats: { modules: false },
entry: { 'main-client': './ClientApp/boot-client.tsx' },
mode: "development",
resolve: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
modules: [
'./node_modules',
'./ClientApp'
]
},
output: {
path: path.join(__dirname, clientBundleOutputDir),
filename: '[name].js',
publicPath: 'dist/'
},
module: {
rules: [
{ test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
{ test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },
{
test: /\.less$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'less-loader', options: { strictMath: true, noIeCompat: true } }
]
},
//{ test: /\.less$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ["css-loader", "less-loader"] }) },
{
test: /\.(woff|woff2|eot|ttf)$/,
use: [
{
loader: 'file-loader',
options: {
publicPath: ""
}
}
]
}
]
},
plugins: [
new CheckerPlugin(),
new MiniCssExtractPlugin({
filename: "site.css",
chunkFilename: "site.css"
}),
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./wwwroot/dist/vendor-manifest.json')
}),
].concat(isDevBuild ? [
// Plugins that apply in development builds only
new webpack.SourceMapDevToolPlugin({
filename: '[file].map', // Remove this line if you prefer inline source maps
moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
})
] : [
// Plugins that apply in production builds only
//new webpack.optimize.UglifyJsPlugin()
])
}];
};