Webpack：捆绑所需的css文件

Question

作为Webpack的新手，我正在通过以下方式讨论：Recomended way to require CSS in webpack：

1. 使用配置我的Webpack配置 { test: /(\.css|\.scss)$/, loaders: ['style-loader', 'css-loader?sourceMap', 'postcss-loader', 'sass-loader?sourceMap'], },

2. 我的代码中需要css文件： require('./style1.css'); require('./style2.css');

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

Answer 1

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

for webpack 2

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

for 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")
    ]
}

了解更多https://github.com/webpack-contrib/extract-text-webpack-plugin

Answer 2

正如我在您的Webpack配置中看到的那样，您正在指示Webpack使用css-loader和style-loader将您的css文件注入到内联css中。 css-loader 获取CSS文件并读取其所有依赖项，而 样式加载器 将这些样式直接嵌入到标记中 < / em>标记在文档的 中。

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

for webpack 2

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

for webpack 1

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

现在我们可以通过要求它并将我们的CSS加载器放入其中来再次更新我们的webpack.config.js文件：

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">