《基于 Vue 组件库 的 Webpack5 配置》3.将 CSS 提取到单独的文件

  • 使用 webpack 插件 mini-css-extract-plugin 需要额外安装 npm i mini-css-extract-plugin@latest -D

  • 同时打包 js 和 css 文件时,可参考 entry 高级用法

  • package.json 的配置如下

    js 复制代码
    const { VueLoaderPlugin } = require('vue-loader');
    // 可将CSS提取到单独的文件
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    
    module.exports = {
        mode: 'production',
        entry: {
          "my-webcomponents": ['./index.js', './src/assets/stylus/main.styl'],
          "my-webcomponents2": ['./index2.js', './src/assets/stylus/main2.styl'],
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].js',
            clean: true, 
        },
        plugins: [
            new VueLoaderPlugin(),        
            new MiniCssExtractPlugin({
                filename: "[name].css",
                // filename: "main.css", // 也可以指定名称,但css只会输出一个
            }),
        ],
    }
相关推荐
小桥风满袖几秒前
Three.js-硬要自学系列31之专项学习动画混合
前端·css·three.js
Lanqing_07603 分钟前
淘宝商品详情图API接口返回参数说明
java·服务器·前端·api·电商
karshey13 分钟前
【Element Plus】Menu组件:url访问页面时高亮对应菜单栏
前端·javascript·vue.js
xiaogg367813 分钟前
系统网站首页三种常见布局vue+elementui
前端·vue.js·elementui
日升17 分钟前
AI 组件库-MateChat × 大模型:DeepSeek、OpenAI 和 阿里通义问 (Qwen)的全流程接入实战(三)
前端·ai编程·trae
Barcke18 分钟前
AI赋能开发者工具:智能提示词编写与项目管理实践
前端·后端
wordbaby23 分钟前
React Router v7 中的 `ErrorBoundary` 详解
前端·react.js
gsls20080824 分钟前
使用xdocreport导出word
前端·python·word
木子李i27 分钟前
flex多行多列布局小技巧
前端