Webpack 特定的 css 包答案

【问题标题】：Webpack especific css bundleWebpack 特定的 css 包
【发布时间】：2020-04-04 15:01:16
【问题描述】：

我在 webpack 3.11 中有以下代码

var path = require('path');
var webpack = require("webpack");
var HtmlWebpackPlugin = require('html-webpack-plugin');

const MinifyPlugin = require("babel-minify-webpack-plugin");
if (process.argv.indexOf('-p') !== -1) {
  process.env.NODE_ENV = 'production';
}

let config = {
  output: {
    path: __dirname + '/dist',
  }
}

let ExtractTextPlugin = require('extract-text-webpack-plugin');
let extractSCSS = new ExtractTextPlugin('bundle.css');

module.exports = {
  entry: {
    bundle2: "./src2/main2.js",
    bundle: "./src/main.js",
  },
  output: {
    path: config.output.path,
    filename: '[name].js',
  },

  module: {
    rules: [{
        test: /\.scss$/,
        use: extractSCSS.extract({
          use: [{
            loader: "css-loader"
          }, {
            loader: "sass-loader"
          }]
        })
      }
    ]
  },
  devtool: 'source-map',
  plugins: [
    extractSCSS
  ],
  devServer: rutasServer
};

例如，我想要的是能够从 src 文件夹中存在的 scss 文件创建一个 bundle.css，同时为 src2 中存在的 scss 文件创建一个 bundle2.css文件夹。有可能吗？

【问题讨论】：

标签： css webpack webpack-3

【解决方案1】：

您可以创建不同的条目并在它们上使用css-minify-plugin 或extract-plugin。

在你的 webpack.config.js 上：

 entry: {
            bundle1: ['./src/your/path.scss'],
            bundle2: ['./src/your/other-path.scss'],
        },

和插件：

new ExtractTextPlugin({ filename: 'css/[name].css' }),

实际上 ExtractTextPlugin 已被弃用。尝试使用 mini-css-extract-plugin

【讨论】：