webpack如何打包编译成单独css文件

最新推荐文章于 2023-03-02 16:40:57 发布

绿茶程序媛

最新推荐文章于 2023-03-02 16:40:57 发布

阅读量483

点赞数

分类专栏： webpack

本文链接：https://blog.youkuaiyun.com/qq_43137725/article/details/104240486

版权

webpack 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何使用webpack将CSS从JavaScript中分离并打包成独立的样式文件。通过配置loaders和插件，你可以确保CSS在构建过程中正确处理，并在页面中单独加载，提高网页性能。

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

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    plugins: [new MiniCssExtractPlugin()],
    module: {
        rules: [
            {test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader']},
            {test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']},
        ]
    },
};

$ webpack 编译