WebPack如何将所有css个文件放入一个css个文件中

Question

我是 WebPack 的新手，我希望能够获取 CSS 文件的目录（.app/styles/[css 文件...]）和将它们输出到一个 CSS 文件中 (dist/styles.css).

目前，所有 JavaScript 文件都被编译成一个 "index_bundle.js" 文件，这是完美的，但我想为我的 CSS 文件实现同样的效果。

经过大量 "Googling"，我发现 WebPack 的 ExtractTextPlugin 应该可以帮助解决这个问题，但这只适用于添加到 [=28] 的一个 CSS 文件=] 属性 (eg: entry: {style: "./app/styles/style.css"}) 然后作为 [=] 添加到 html 的头部44=] 标签，这很好，但我希望我所有的 css 文件都进入一个 styles.css 文件，然后在 html 的头部使用它作为 link.

我当前的 WebPack 配置如下所示：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ExtractTextPluginConfig = new ExtractTextPlugin(
    "styles.css", 
    {
        allChunks: false
    }
);

module.exports = {
    entry: {
        index: "./app/index.js"//,
        //styles: "./app/styles/style1.css" // I don't want one file, I want to use a directory eg: "./app/styles/"
    },
    output: {
        path: __dirname + '/dist',
        filename: 'index_bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader'
            },
            { 
                test: /\.css$/, 
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            }
        ]
    },
    plugins: [
        HtmlWebpackPluginConfig,
        ExtractTextPluginConfig
    ]
}

有人能给我指出正确的方向吗？即使它是另一个插件或不同的方法。任何帮助将不胜感激！

编辑：我的新 WebPack 配置如下所示：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ExtractTextPluginConfig = new ExtractTextPlugin(
    "index_bundle.css"
);

module.exports = {
    entry: [
        './app/index.js',
        './app/index.css'
    ],
    output: {
        path: __dirname + '/dist',
        filename: 'index_bundle.js'
    },
    module: {
        preloaders: [
            {
                test: /\.css/,
                exclude: /styles/, 
                loader: 'import-glob-loader'
            }
        ],
        loaders: [
            {
                test: /\.js$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader'
            },
            { 
                test: /styles\.css$/, 
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },
            { 
                test: /\.json$/, 
                loader: 'json' 
            }
        ]
    },
    devServer: {
        historyApiFallback: true
    },
    plugins: [
        HtmlWebpackPluginConfig,
        ExtractTextPluginConfig
    ]
}

Answer 1

好的，看来是驼峰问题。

在 Davin Tryon 的帮助下，我解决了我的问题 - 谢谢！

如果您查看：https://www.npmjs.com/package/import-glob-loader 他们有以下内容：

preloaders: [{
    test: /\.scss/,
    loader: 'import-glob-loader'
}]

应该是：

preLoaders: [{
    test: /\.scss/,
    loader: 'import-glob-loader'
}]

所以最后，我的整个 webpack.config.json 看起来像这样：

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ExtractTextPluginConfig = new ExtractTextPlugin(
    "index_bundle.css"
);

module.exports = {
    entry: [
        './app/index.js',
        './app/index.css'
    ],
    output: {
        path: __dirname + '/dist',
        filename: 'index_bundle.js'
    },
    module: {
        preLoaders: [
            {
                test: /\.css$/,
                exclude: /styles/, 
                loader: 'import-glob-loader'
            }
        ],
        loaders: [
            {
                test: /\.js$/, 
                exclude: /node_modules/, 
                loader: 'babel-loader'
            },
            { 
                test: /\.css$/, 
                loader: ExtractTextPlugin.extract("style-loader", "css-loader")
            },
            { 
                test: /\.json$/, 
                loader: 'json' 
            }
        ]
    },
    devServer: {
        historyApiFallback: true
    },
    plugins: [
        HtmlWebpackPluginConfig,
        ExtractTextPluginConfig
    ]
}

我的 index.css 文件如下所示：

@import './styles/**/*';

这对我有用，我得到了一个 css 输出文件 "index_bundle.css"。样式和脚本也会自动注入到 html 模板中。

index.html注射前：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Admin - Login</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

index.html 在 /dist 文件夹中注入后：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Admin - Login</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/>
    <link href="index_bundle.css" rel="stylesheet"></head>
    <body>
        <div id="app"></div>
    <script type="text/javascript" src="index_bundle.js"></script></body>
</html>

WebPack如何将所有css个文件放入一个css个文件中

WebPack how to put all css files into one css file

javascript

css

webpack

html-webpack-plugin