4

what I'd like to achieve is the simplest way to concat and minify CSS with Webpack. I (successfully) tried ExtractTextPlugin and OptimizeCssAssetsPlugin, as follows

var ExtractTextPlugin = require("extract-text-webpack-plugin");
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    entry: {
        app:   "./assets/js/main.js"
    },
    output: {
        path: 'dist',
        filename: "main.bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            }
        ]
    },
    plugins: [

        new ExtractTextPlugin({
            filename: "style.min.css",
            allChunks: true
        }),

        new OptimizeCssAssetsPlugin()
    ]
}

But this only works requiring CSS files from within JS file, like that

require("../../css/normalize.css");
require("../../css/modal.css");

I would like JS files had nothing to do with CSS files. My question is: how can I avoid requiring CSS file from JS entry point, and thus how can I specify in webpack.config.js what CSS file to concat and minify? So I want to write in webpack.config.js something like "i want to concat and minify all CSS files contained in /assets/css/ folder".

Thank you

Marco
  • 759
  • 3
  • 9
  • 22
  • You have to include them somewhere for webpack to know to process them. Have a look at [specifying a complete sub directory in webpack 2 entry](https://stackoverflow.com/questions/43076133/specifying-a-complete-sub-directory-in-webpack-2-entry) for a possible solution to include every file. – Michael Jungo Apr 10 '17 at 09:52
  • I don't understand. After catching all sub-directory... what am I supposed to do with the files? Which plugin or else should I use to concat and minify? Thank you – Marco Apr 11 '17 at 13:42
  • You don't need to add anything, you already have the necessary rule/plugin configured to extract the CSS. Specifying files as an entry is to tell webpack where to start, it's an initial `require` if you will, and therefore the same rules/loaders will be applied to them as if you had `require`d them manually. The `require.context` is similar but you receive a modified `require` which you use in place, but the same rules will still be applied. – Michael Jungo Apr 11 '17 at 13:54
  • Does this solve your problem? I'm still searching for an answer and can not get it working. – softvar May 22 '17 at 16:42
  • No, what I learnt is that webpack works fine if everything is managed and processed by itself. I had same problems with images, and then fonts and everything. I moved from webpack to gulp, which is more simple. – Marco May 24 '17 at 06:48

0 Answers0