Unresolved variable or type console.
tsconfig.json
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
// "sourceMap": false
"strict": true,
"noEmitOnError": true
}
}
webpack.config.js
//引入包
const path = require("path");
//引入html配置插件
const htmlweback = require("html-webpack-plugin");
//引入消除dist
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
//webpack中所有的配置信息都应该写在module.exports中(commandjs)
//require只能看到通过 module.exports 导出的内容,require 是运行时
module.exports = {
//指定入口文件
entry: "./src/index.ts",
//指定打包路径
output: {
//打包的文件目录
path: path.resolve(__dirname, "dist"),
//打包后的文件
filename: "bundle.js",
environment: {
arrowFunction: false
}
},
//指定webpack打包要使用模块
module: {
//指定加载的规则
rules: [
{
//test指定的是规则生效的文件
test: /\.ts$/,
//要使用的loader
use: [
{
//指定加载器
loader: 'babel-loader',
options: { //设置预定义的环境,需要运行的环境
presets: [
[
"@babel/preset-env",
{
targets: {
"chrome": "58",
"ie": "11"
},
"corejs": "3",
"useBuiltIns": "usage"
}
]
]
},
},
'ts-loader'
],
//要排除的文件
exclude: /node_modules/
}
]
},
//配置webpack插件
plugins: [
new htmlweback({
// title:""
template: './src/index.html',
}),
new CleanWebpackPlugin()
],
resolve: {
extensions: ['.ts', '.js']
},
devServer: {
host: "localhost",
port: 8099,
}
}
package.json
{
"name": "tsdemowb",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode=production",
"start": "webpack serve --open --mode=development"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.21.4",
"@babel/preset-env": "^7.21.4",
"babel-loader": "^9.1.2",
"clean-webpack-plugin": "^4.0.0",
"core-js": "^3.30.1",
"html-webpack-plugin": "^5.5.1",
"ts-loader": "^9.4.2",
"typescript": "^5.0.4",
"webpack": "^5.79.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.13.3"
}
}
参考网上说法是没有tsconfig.json,但是我的项目已经配置了。
根据其他同学的项目配置更新package.json 下的devDependencies的配置,把大部分的版本都降低。
{//...
"devDependencies": {
"@babel/core": "^7.13.15",
"@babel/preset-env": "^7.13.15",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"core-js": "^3.10.1",
"css-loader": "^5.2.1",
"html-webpack-plugin": "^5.3.1",
"less": "^4.1.1",
"less-loader": "^8.1.0",
"postcss": "^8.2.10",
"postcss-loader": "^5.2.0",
"postcss-preset-env": "^6.7.0",
"style-loader": "^2.0.0",
"ts-loader": "^8.1.0",
"typescript": "^4.2.4",
"webpack": "^5.32.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2"
}
//...
}
现在运行与打包显示代码:console.log都没有报红了。