使用 Webpack 连接和缩小 CSS 文件而不需要它们

【问题标题】：Concat and minify CSS files with Webpack without require them使用 Webpack 连接和缩小 CSS 文件而不需要它们
【发布时间】：2016-07-13 12:58:23
【问题描述】：

我有一个应用程序的旧部分，其中包含一些用 gulp 脚本连接和缩小的 CSS 文件。

我有一个与 Webpack 捆绑在一起的新应用程序。

是否可以使用 Webpack 组装旧的 CSS 而无需任何额外的 require 调用？只需从 old_css/**/*.css 中获取所有 CSS、concat、缩小并写入 assets/old.css？

【问题讨论】：

标签： gulp bundle webpack

【解决方案1】：

您可以通过单独的entry“要求”CSS 文件来实现此目的。你最终会得到这样的结果：

{
    entry: {
        styles: glob('old_css/**/*.css'), // array of css files
        ...
    },
    output: {
        filename: '[name].[chunkhash].js',
        ...
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },
            ...
        ]
    },
    plugins: [
        new ExtractTextPlugin('[name].[chunkhash].css'),
        ...
    ],
    ...
}

除了 CSS 文件之外，您最终还会得到一个以您的样式条目命名的 JavaScript 文件。不过，你可以忽略它。

【讨论】：