webpack 多个入口输出多个文件解决方案 | webpack 输出多个css文件

字数 182阅读 1140
  • 1、webpack 多个单页面入口,需要重复写多个entry;
  • 2、webpack entry不支持glob,不可以使用模糊匹配符号
  • 3、webpack 会打包所有的css到一个文件,而有需求是分开输出

一、解决webpack会打包所有css到一个文件

入口要命名,分开写,就会分开打包

const entry = require('webpack-glob-entry')
module.exports = [
    {
        entry: {
            index: './src/index.css',
            main: './src/main.css',
        },
        ...
    },

二、解决以css为入口文件时,仍然会输出多余的空js文件

引入修正插件,会删除多余的js文件

npm install -D webpack-fix-style-only-entries
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries')
module.exports = {
        plugins: [
            new FixStyleOnlyEntriesPlugin(),
            ...
        ],
    },

三、解决webpack不支持glob,模糊匹配问题

npm install -D webpack-glob-entry
const entry = require('webpack-glob-entry')
module.exports = [
    {
        entry: entry('./src/*.scss'),
        ...
    },

四、最终webpack.config.js配置

以下配置用于将多个scss文件转换成多个css文件

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const entry = require('webpack-glob-entry')
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");

const baseConfig = {
    module : {
        rules: [
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract({
                    use: ['css-loader', 'sass-loader']
                }),
            }
        ]
    },
    output: {
        path: path.resolve(__dirname, './lib'),
    },
}
module.exports = [
    {
        ...baseConfig,
        entry: entry('./src/*.scss'),
        plugins: [
            new FixStyleOnlyEntriesPlugin(),
            new ExtractTextPlugin({
                filename: `/css/[name].css`,
            }),
        ],
    },
    {
        ...baseConfig,
        entry: entry('./src/component/*.scss'),
        plugins: [
            new FixStyleOnlyEntriesPlugin(),
            new ExtractTextPlugin({
                filename: `/css/component/[name].css`,
            }),
        ],
    },
];

推荐阅读更多精彩内容

  • 写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较...
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
  • 从V1迁移到V2由于使用的是webpack版本是2.2.1,所以针对原文做了一些修改。针对webpack2的修改部...
  • 前言 本文主要从webpack4.x入手,会对平时常用的Webpack配置一一讲解,各个功能点都有对应的详细例子,...