【问题标题】：Webpack: Bundle required css filesWebpack：捆绑所需的 css 文件
【发布时间】：2017-09-19 22:06:36
【问题描述】：

作为Webpack 的新手，我正在关注Recomended way to require CSS in webpack 的讨论，作者：

配置我的 Webpack 配置 { test: /(\.css|\.scss)$/, loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap'], },
在我的代码中需要 css 文件： require('./style1.css'); require('./style2.css');

但是上面的两个css文件不会捆绑在一起。如何指示Webpack 捆绑所有需要的css 文件？

【问题讨论】：

定义“不捆绑在一起”。如果您希望 CSS 成为单独的文件而不是包含在 JS 中，请使用 ExtractTextPlugin。
@TatsuyukiIshi：嗯，我的意思是，当由 Webpack 提供服务时，所有必需的 css 文件必须神奇地组合成一个大 css 文件。有能力吗？
见stackoverflow.com/a/31462849
@TatsuyukiIshi：非常感谢！你让我很开心。
Getting css output using webpack ExtractTextPlugin的可能重复

标签： css webpack

【解决方案1】：

默认情况下，webpack 不会捆绑你的 css，它会在 HTML 中创建内联样式标签并将你的 css 放在那里。要提取所有的 css 并捆绑到一个 css 文件中，你需要 extract text plugin

对于 webpack 2

npm install --save-dev extract-text-webpack-plugin

对于 webpack 1

npm install --save-dev extract-text-webpack-plugin@1.0.1

在 webpack 2 中

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

Webpack 1

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css")
    ]
}

【讨论】：

【解决方案2】：

正如我在您的 Webpack 配置中看到的那样，您正在指示 Webpack 使用 css-loader 和 style-loader 捆绑您的 css 文件注入然后作为内联 css。css-loader 获取一个 CSS 文件并读取其所有依赖项，而 style-loader 会将这些样式作为标记直接嵌入到标记中在文档的中。

就我个人而言，为了保持整洁，我更愿意拥有一个单独的 CSS 文件，而不是添加所有内联代码。为此，我们需要使用一个名为 extract-text-webpack-plugin 的 Webpack 插件，它将入口块中的每个 require('style.css') 移动到一个单独的 css 输出文件。我们必须用 npm 安装它：

对于 webpack 2

npm install --save-dev extract-text-webpack-plugin

对于 webpack 1

npm install --save-dev extract-text-webpack-plugin@1.0.1

现在我们可以再次更新我们的 webpack.config.js 文件，方法是请求它并将我们的 CSS 加载器放入其中：

var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src',
output: {
    path: 'build',
    filename: 'bundle.js',
},
module: {
    loaders: [
        {
            test: /\.js/,
            loader: 'babel',
            include: __dirname + '/src',
        },
        {
            test: /\.css/,
            loader: ExtractTextPlugin.extract("css")
        }
    ],
},
plugins: [
    new ExtractTextPlugin("styles.css")
]
};

然后它会为我们创建一个 styles.css 文件！我们现在可以在

中添加这个样式表文件

<link rel="stylesheet" href="build/styles.css">

【讨论】：