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

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

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

package.json 的配置如下

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只会输出一个}),],
}