如何獲取一堆CSS文件並為所有應用程序制作一個CSS文件

Question

我有webpack.config，不知道我需要在其中放置什么模塊，因為我找到了模塊，因此只能使css或scss文件最小化，而不能收集它們。

所以我有8-9個scss文件，並且需要一個css文件，該文件從中收集所有代碼

 var path = require('path'); module.exports = { entry: { home: './src/main/js/home/home.js', products: './src/main/js/products/products.js', product: './src/main/js/product/product.js', profile: './src/main/js/profile/profile.js', topics: './src/main/js/topics/topics.js', topic: './src/main/js/topic/topic.js', }, cache: true, mode: 'development', output: { path: __dirname, filename: './src/main/resources/static/built/[name].bundle.js' }, module: { rules: [ { test: path.join(__dirname, '.'), exclude: /(node_modules)/, use: [{ loader: 'babel-loader', options: { presets: ["@babel/preset-env", "@babel/preset-react"] } }] } ] } }; 

我應該安裝什么模塊，以及需要在webpack.config中放置代碼的位置。 請幫助，我從未使用過webpack！

 var path = require('path'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { entry: { home: './src/main/js/home/home.js', products: './src/main/js/products/products.js', product: './src/main/js/product/product.js', profile: './src/main/js/profile/profile.js', topics: './src/main/js/topics/topics.js', topic: './src/main/js/topic/topic.js', _article: './src/main/resources/static/sass/_article.scss', _catalog: './src/main/resources/static/sass/_catalog.scss', _home: './src/main/resources/static/sass/_home.scss', _header: './src/main/resources/static/sass/_header.scss', _footer: './src/main/resources/static/sass/_footer.scss', }, cache: true, mode: 'development', output: { path: __dirname, filename: './src/main/resources/static/built/[name].bundle.js' }, module: { rules: [ { test: [ /\\.scss$/, path.join(__dirname, '.')], exclude: /(node_modules)/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: ['css-loader', 'sass-loader'] })[{ loader: 'babel-loader', options: { presets: ["@babel/preset-env", "@babel/preset-react"] } }] } ] }, plugins: [ new ExtractTextPlugin("styles.css"), ] }; 

那就是我的webpack.config

Answer 1

webpack的工作原理與gulp不同。 Gulp是一個任務運行程序，可以使用globs和文件模式。 Webpack是一個捆綁程序，它根據給定的入口點來分析依賴關系樹，以便能夠創建捆綁程序。

為了使用webpack並捆綁所有scss文件，需要從入口點將其導入。 這是webpack知道這些文件存在的唯一方法。

編輯：正確的配置。

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

module.exports = {
    entry: {
        home: './src/main/js/home/home.js',
        products: './src/main/js/products/products.js',
        product: './src/main/js/product/product.js',
        profile: './src/main/js/profile/profile.js',
        topics: './src/main/js/topics/topics.js',
        topic: './src/main/js/topic/topic.js',
        _article: './src/main/resources/static/sass/_article.scss',
        _catalog: './src/main/resources/static/sass/_catalog.scss',
        _home: './src/main/resources/static/sass/_home.scss',
        _header: './src/main/resources/static/sass/_header.scss',
        _footer: './src/main/resources/static/sass/_footer.scss',

    },
    cache: true,
    mode: 'development',
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ]
};