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的错误,求解怎么解决
修改tsconfig.json可解决: