Webpack：如何合并 css 和 less，然后应用 cssnano答案

【问题标题】：Webpack: How to merge css and less, THEN apply cssnanoWebpack：如何合并 css 和 less，然后应用 cssnano
【发布时间】：2018-03-01 12:35:45
【问题描述】：

我设法将我的css和较少的资源（从javascript“导入”）编译到all-my-LESS|CSS，使用ExtractTextPlugin提取它们并将它们与MergeFilesPlugin合并到combinedStyles.css。

我缺少的一点：如何在此之上运行 cssnano（例如通过 postcss？）作为最后一点？（哦，虽然我使用内联源映射，但我没有设法生成外部 combinedStyles.map 文件）。

这是我合并的webpack.config.babel.js（忽略 babel 位，只是意味着你可以用 ES6 编写它，使用更高级的 import 语句）：

import path from 'path';

const webpack = require('webpack'); //to access built-in plugins
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import MergeFilesPlugin from 'merge-files-webpack-plugin';

const extractCSS = new ExtractTextPlugin("all-my-CSS.css");
const extractLESS = new ExtractTextPlugin("all-my-LESS.css");

export default {
    entry: [ './src/index_5.js' ],
    output: {
        path: path.resolve( 'dist')
        filename: 'bundle.js',
        sourceMapFilename: './bundle.js.map'
    },

    module: {
        rules: [{
                test: /\.css$/,
                use: extractCSS.extract(
                    [{  // This is basically "use"
                        loader: "css-loader",
                        options: {
                            minimize: false, // done later
                            sourceMap: true,
                            modules: false, // no css modules, all global styles
                        }
                    }]
                )
            },
            {
                test: /\.less$/,
                use: extractLESS.extract(  // This is basically "use"
                    [// No style-loader here! We want this external!
                    {
                        loader: "css-loader", // translates CSS into CommonJS
                        options: {
                            minimize: false,
                            sourceMap: true
                        }
                    }, {
                        loader: "less-loader", // compiles Less to CSS
                        options: {
                            sourceMap: true,
                        }
                    }]
                )
            }
        ] // rules
    }, // module

    devtool: 'inline-source-map',
    devServer: { inline: true },

    plugins: [
        extractCSS,
        extractLESS,
        new MergeFilesPlugin({
            filename: 'combinedStyles.css', //output filename
            test: /\.css$/,
            deleteSourceFiles: false // for now
        })
    ]
};

【问题讨论】：

标签： webpack source-maps webpack-3 cssnano less-loader

【解决方案1】：

我添加了postcss-loader 和css-nano，看看是否有帮助。

我也看不到这里需要使用 MergeFilesPlugins （只是我的意见）。 ExtractTextPlugin 在这里很有用。

只需使用一个 ExtractTextPlugin 并将所有 css 或更少的文件放在一个文件夹中（使用 .css 或 .less ext ），加载器将选择性地应用于它们，稍后在插件中只需使用

new ExtractTextPlugin('style.css')

提取一个通用的css文件。

使用 cssnano ：

[{
                test: /\.css$/,
                use: ExtractTextPlugin.extract(
                    [{  // This is basically "use"
                        loader: "css-loader",
                        options: {
                            minimize: false, // done later
                            sourceMap: true,
                            modules: false, // no css modules, all global styles
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                                plugins: function () {
                                        return [
                                        require('cssnano')({
                                            autoprefixer: false,
                                            safe: true
                                            })
                                        ];
                                }
                           }
                    }]
                )
            },
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract(  // This is basically "use"
                    [// No style-loader here! We want this external!
                    {
                        loader: "css-loader", // translates CSS into CommonJS
                        options: {
                            minimize: false,
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                                plugins: function () {
                                        return [
                                        require('cssnano')({
                                            autoprefixer: false,
                                            safe: true
                                            })
                                        ];
                                 }
                            }
                    },
                    {
                        loader: "less-loader", // compiles Less to CSS
                        options: {
                            sourceMap: true,
                        }
                    }]
                )
            }
        ]

【讨论】：