我正在使用Webpack和typescript启动一个项目。但当我尝试运行开发服务器时，我在html webpack插件上遇到了很多错误。这是我的输出：
> tecnilab-frontend@0.1.0 dev /home/alejo/tecnimaq/tecnilab/tecnilab-frontend
> cross-env NODE_ENV=development webpack-dev-server --mode=development --inline --hot
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from ./public
ℹ ｢wds｣: 404s will fallback to /index.html
ℹ ｢wdm｣: wait until bundle finished: /
✖ ｢wdm｣: Hash: 9d40f5b1be348f5478dc
Version: webpack 4.43.0
Time: 10565ms
Built at: 21/07/2020 11:05:56 a. m.
Asset Size Chunks Chunk Names
bundle.js 3.82 MiB main [emitted] main
index.html 369 bytes [emitted]
Entrypoint main = bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.tsx 52 bytes {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^./log$] (webpack)/hot sync nonrecursive ^./log$ 170 bytes {main} [built]
[./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {main} [built]
[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 75 bytes {main} [built]
[./src/index.tsx] 218 bytes {main} [built]
+ 36 hidden modules
ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js
[tsl] ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js(16,19)
TS2306: File '/home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/lodash/lodash.js' is not a module.
ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js
[tsl] ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js(183,15)
TS2322: Type 'this' is not assignable to type 'HtmlWebpackPlugin'.
Type 'import("/home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index")' is not assignable to type 'import("/home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/typings")'.
Types of property 'apply' are incompatible.
Type '(compiler: import("/home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/webpack/lib/Compiler")) => void' is not assignable to type '(compiler: import("/home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/@types/webpack/index").Compiler) => void'.
Types of parameters 'compiler' and 'compiler' are incompatible.
Type 'Compiler' is missing the following properties from type 'Compiler': parentCompilation, recordsInputPath, recordsOutputPath, records, and 21 more.
ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js
[tsl] ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js(201,13)
TS2322: Type 'this' is not assignable to type 'HtmlWebpackPlugin'.
ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js
[tsl] ERROR in /home/alejo/tecnimaq/tecnilab/tecnilab-frontend/node_modules/html-webpack-plugin/index.js(213,15)
TS2322: Type 'this' is not assignable to type 'HtmlWebpackPlugin'.
还有很多错误，我不得不截断它，这样它就可以适应这个stackoverflow问题，在https://pastebin.com/NJXnbkAq
如果你需要更多的细节来了解这个问题的原因，请告诉我
这是我的包.json:
{
"name": "tecnilab-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --mode=development --inline --hot",
"prestart": "npm run build",
"start": "sirv build -s -e",
"prebuild": "mkdirp build",
"build": "cross-env NODE_ENV=production webpack --mode=production --progress",
"test": "jest --watchAll --passWithNoTests",
"lint": "find . -path ./node_modules -prune -o -type f \( -iname \*\.ts -o -iname \*.tsx -o -iname \*.js -o -iname \*\.jsx \) -print | xargs -I{} npx eslint {}",
"lintFix": "find . -path ./node_modules -prune -o -type f \( -iname \*\.ts -o -iname \*.tsx -o -iname \*.js -o -iname \*\.jsx \) -print | xargs -I{} npx eslint --fix {}"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^3.7.0",
"@typescript-eslint/parser": "^3.7.0",
"eslint": "^7.5.0",
"eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.20.3",
"eslint-plugin-standard": "^4.0.1",
"jest": "^26.1.0"
},
"dependencies": {
"@babel/core": "^7.10.5",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"@testing-library/jest-dom": "^5.11.1",
"@testing-library/react": "^10.4.7",
"@testing-library/user-event": "^12.0.11",
"@types/jest": "^26.0.5",
"@types/node": "^14.0.24",
"@types/react": "^16.9.43",
"@types/react-dom": "^16.9.8",
"autoprefixer": "^9.8.5",
"babel-eslint": "^10.1.0",
"babel-jest": "^26.1.0",
"babel-loader": "^8.1.0",
"babel-preset-jest": "^26.1.0",
"bootstrap": "^5.0.0-alpha1",
"cross-env": "^7.0.2",
"css-loader": "^3.6.0",
"html-webpack-plugin": "^4.3.0",
"mini-css-extract-plugin": "^0.9.0",
"postcss-loader": "^3.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-test-renderer": "^16.13.1",
"sass": "^1.26.10",
"sass-loader": "^9.0.2",
"style-loader": "^1.2.1",
"terser-webpack-plugin": "^3.0.7",
"ts-loader": "^8.0.1",
"typescript": "^3.9.7",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
我的webpack.config.js
const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ENV = process.env.NODE_ENV || 'development'
module.exports = {
entry: './src/index.tsx',
devtool: 'inline-source-map',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /.(ts|tsx)?$/,
use: 'ts-loader',
exclude: /node_modules/
},
{
test: /.scss$/,
use: [
'style-loader', // inject CSS to page
'css-loader', // translates CSS into CommonJS modules
{
loader: 'postcss-loader', // Run postcss actions
options: {
plugins: function () { // postcss plugins, can be exported to postcss.config.js
return [
require('autoprefixer')
]
}
}
},
'sass-loader' // compiles Sass to CSS
]
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
node: {
browser: true,
node: true
},
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
sourceMap: true, // Must be set to true if using source-maps in production
terserOptions: {
// https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
}
})
]
},
plugins: ([
new MiniCssExtractPlugin(),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(ENV)
}),
new HtmlWebpackPlugin({
template: './src/index.html',
hash: true,
minify: { collapseWhitespace: true }
})
]).concat(ENV === 'production' ? [
new webpack.ProgressPlugin()
] : []),
devServer: {
port: process.env.PORT || 8080,
host: 'localhost',
publicPath: '/',
contentBase: './public',
historyApiFallback: true,
open: true,
openPage: ''
}
}
还有我的index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './css/main.scss'
ReactDOM.render(<App message="The count is:"/>, document.getElementById('root'))
尝试将@types/html webpack插件添加到您的devDependencies中，希望它能起作用。：(
我发现HtmlWebpackPlugin与ts-loader不能很好地配合使用。
在我的情况下，我只需要将"moduleResolution": "node"添加到tsconfig.json
建议在TS文档中使用模块解析策略
我解决了将html webpack插件降级到3.2.0 的问题
我还不得不降级jest、babel jest和terser webpack插件，以解决jest worker 的类似问题
现在它编译没有错误