我一直在Webpack中使用ts-loader
。我还想将ExtractTextPlugin
与css-loader
结合使用来捆绑CSS。但是,当ExtractTextPlugin
与其一起使用时,ts-loader
似乎会被忽略或覆盖。我在下面添加了一个示例webpack.config.js。是否有可能解决这个问题?
{
entry: './src/app.ts',
resolve:
{
extensions:
[
'.js',
'.html',
'.css'
]
},
output:
{
filename: 'app.js',
path: path.resolve(__dirname, 'deploy')
},
watch: true,
watchOptions:
{
ignored: /node_modules/
},
module:
{
rules:
[
{
use: ExtractTextPlugin.extract(
{
fallback: 'style-loader',
use: 'css-loader'
}),
test: /\.css$/,
exclude: /node_modules/
},
{
loader: 'ts-loader',
test: /\.tsx?$/,
exclude: /node_modules/
},
{
loader: 'svelte-loader',
test: /\.html$/,
exclude: /node_modules/
}
]
},
plugins:
[
new ExtractTextPlugin(
{
filename: 'app.css',
allChunks: true
})
]
}
更新
当存在TypeScript错误时,似乎{1 {}不会在此上下文中运行。这可以通过修复这些错误来解决。不太优雅的解决方案是将样式从ExtractTextPlugin
更改为.ts
。这会将其从TypeScript中删除,因此错误不会阻止.js
运行。