-
使用 webpack 插件 mini-css-extract-plugin 需要额外安装
npm i mini-css-extract-plugin@latest -D
; -
同时打包 js 和 css 文件时,可参考 entry 高级用法;
-
package.json
的配置如下jsconst { 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只会输出一个 }), ], }
《基于 Vue 组件库 的 Webpack5 配置》3.将 CSS 提取到单独的文件
AvatarGiser2023-09-01 15:31
相关推荐
小桥风满袖几秒前
Three.js-硬要自学系列31之专项学习动画混合Lanqing_07603 分钟前
淘宝商品详情图API接口返回参数说明karshey13 分钟前
【Element Plus】Menu组件:url访问页面时高亮对应菜单栏xiaogg367813 分钟前
系统网站首页三种常见布局vue+elementui日升17 分钟前
AI 组件库-MateChat × 大模型:DeepSeek、OpenAI 和 阿里通义问 (Qwen)的全流程接入实战(三)Barcke18 分钟前
AI赋能开发者工具:智能提示词编写与项目管理实践wordbaby23 分钟前
React Router v7 中的 `ErrorBoundary` 详解gsls20080824 分钟前
使用xdocreport导出word木子李i27 分钟前
flex多行多列布局小技巧