webpack引入ts后html-webpack-plugin报错

webpack.config.js:

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
const optimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const styleLoader = [
{
loader:miniCssExtractPlugin.loader,
options:{
publicPath:'../'
}
},
// 'style-loader',
'css-loader'
]
module.exports = {
entry:'./index.ts',
output:{
path:path.resolve(__dirname,'bundle'),
filename:'bundle.js'
},
module:{
rules:[
{
oneOf:[
{
test:/\.css$/,
use:[
...styleLoader
]
},
{
test:/\.ts$/,
exclude:/node_modules/,
use:[
{
loader:'babel-loader',
options:{
cacheDirectory:true
}
},
'ts-loader'
]
},
{
// * 处理html中的图片资源
test:/\.html/,
loader:'html-loader'
},
{
test:/\.(jpg|jpeg|png|gif)$/,
use:[
'url-loader'
]
}
]
}
]
},
plugins:[
new htmlWebpackPlugin({
template:'./index.html'
}),
new miniCssExtractPlugin({
filename:'css/bundle.css'
}),
new optimizeCssAssetsWebpackPlugin()
],
devServer:{
port:8899,
contentBase:path.resolve(__dirname,'bundle'), // * 监听哪一层目录
hot:true, // * 这个选项开启的话就说明开了了HMR(热模块替换)功能
open:true,
compress:true, // * 一切服务都启用 gzip 压缩：
},
devtool:'cheap-module-source-map',
optimization:{
splitChunks:{
chunks:'all'
}
},
resolve: {
extensions : [ '.ts' , '.js' ]
},
mode:'development'
}

自从改用了ts后，项目能跑起来，但是报了很多html-webpack-plugin的错误，求解怎么解决
webpack引入ts后html-webpack-plugin报错
webpack引入ts后html-webpack-plugin报错

回答

修改tsconfig.json可解决：

{
    "compilerOptions": {
        "module": "es6",
        "target": "es2015",
        "noImplicitAny": true,
        "removeComments": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "allowJs":true
    },
    "include": [
        "js/"
    ],
    "exclude": [
        "node_modules",
    ]
}

tsconfig.json中加上

"include": [
    "TS文件所在的文件夹/"
]

以上是 webpack引入ts后html-webpack-plugin报错 的全部内容， 来源链接： utcz.com/a/58321.html

回到顶部