如何在 Webpack 4 中从单个 JS 文件输出多个 CSS 文件？

Question

在我的 js 文件“example.js”中，我想分别为桌面版和移动版网站导入两个 .scss 文件“example.scss”和“example.m.scss”。所以我需要三个输出 - example.js、example.scss 和 example.m.scss。我如何在 Webpack 4 中实现它？

JS文件：

// CSS
import '../../css/example.scss';
import '../../css/mobile/example.m.scss';

我当前的 Webpack 配置：

const path = require('path');
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        home: './src/AppBundle/Resources/public/js/main_home/main_home.js',
       // ...
    },

    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'web/assets'),
    },

    module: {
        rules: [
            {
                test: /\.scss|.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: ['file-loader'],
            },
            {
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file-loader'
                }]
            }
        ]
    },

    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
        }),
        
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            'window.$': 'jquery',
            'window.jQuery': 'jquery'
        })
    ]
};

Answer 1

我不确定它是否也适用于 .scss 文件，但根据此资源，您可以对 .css 文件执行以下操作（但是他们声明 webpack 不是最好的工具）：

将 CSS 文件合并为一个独立 CSS 文件的最佳方法是使用extract-text-webpack-plugin。

npm install --save-dev extract-text-webpack-plugin

编辑webpack.config.js以包含插件的设置。

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    'bundle.min.css': [
      path.resolve(__dirname, 'src/css/main.css'),
      path.resolve(__dirname, 'src/css/local.css')
    ],
    'bundle.js': [
      path.resolve(__dirname, 'src/index.js')
    ]
  },
  output: {
    filename: '[name]',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      },
    ],
  },
  plugins: [
    new ExtractTextPlugin("bundle.min.css"),
  ]
};

生成的dist/bundle.min.css是结合src/css/main.css和src/css/local.css 的纯 css 文件。

# npm run build
./node_modules/.bin/webpack
# build for production (with minified)
./node_modules/.bin/webpack -p

注意：如果您点击上面的链接，您还可以找到Lass和Less文件的步骤。