《基于 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只会输出一个
            }),
        ],
    }
相关推荐
神仙别闹1 小时前
基于ASP.NET+ SQL Server实现(Web)医院信息管理系统
前端·后端·asp.net
步行cgn5 小时前
Vue 中的数据代理机制
前端·javascript·vue.js
GH小杨5 小时前
JS之Dom模型和Bom模型
前端·javascript·html
星月心城6 小时前
JS深入之从原型到原型链
前端·javascript
你的人类朋友7 小时前
🤔Token 存储方案有哪些
前端·javascript·后端
烛阴7 小时前
从零开始:使用Node.js和Cheerio进行轻量级网页数据提取
前端·javascript·后端
liuyang___7 小时前
日期的数据格式转换
前端·后端·学习·node.js·node
字节逆旅7 小时前
老板说15分钟内把这个样式改好
css
贩卖纯净水.8 小时前
webpack其余配置
前端·webpack·node.js