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

Question

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

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

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

Answer 1

您可以通过单独的 entry "requiring" 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 文件。不过你可以忽略它。

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

Concat and minify CSS files with Webpack without require them

bundle

gulp

webpack