extract-text-webpack-plugin插件提取css单独打包

最新推荐文章于 2025-05-21 14:28:06 发布

hanxue_tyc

最新推荐文章于 2025-05-21 14:28:06 发布

阅读量8.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue踩坑记录

本文链接：https://blog.youkuaiyun.com/hanxue_tyc/article/details/78032344

vue踩坑记录专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何使用extract-text-webpack-plugin插件来提取并独立管理Webpack构建过程中的CSS文件。通过详细步骤说明如何安装该插件及在Webpack配置文件中进行设置的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装方法：
npm install extract-text-webpack-plugin –save-dev
使用：

const ExtractTextPlugin = require('extract-text-webpack-plugin')//引入
module.exports = {
     plugins: [
        new ExtractTextPlugin({
            filename: 'css/[name].css' //路径以及命名
        })
     ],
     module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        less: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader!less-loader' }),
                        css: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader' })
                    }
                    // other vue-loader options go here
                }
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }),
                exclude: /node_modules/,
            }
      ]
}