我一直ts-loader
在 Webpack 中使用。我还想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 错误时,似乎ExtractTextPlugin
不会在此上下文中运行。这可以通过修复这些错误来解决。一个不太优雅的解决方案是将导入样式的文件更改.ts
为.js
. 这会将其从 TypeScript 中删除,因此错误不会阻止ExtractTextPlugin
运行。