ExtractTextPlugin可以与`ts-loader`一起使用吗?

时间:2017-07-07 15:09:40

标签: css webpack ts-loader extract-text-plugin extracttextwebpackplugin

我一直在Webpack中使用ts-loader。我还想将ExtractTextPlugincss-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运行。

0 个答案:

没有答案