为什么 webpack 有单独的加载器来加载 css 并将其注入网站？

Question

为什么 webpack 有单独的加载器来加载 css (css-loader) 并将其注入网站 (style-loader)，如果第一个没有第二个就没用了？

你能指出我使用 css-loader 而不使用 style-loader 的场景吗？

Answer 1

style-loader 加载程序只是最终将您的样式包含在页面中的众多不同方法之一。例如，您可以使用 ExtractTextPlugin 生成与捆绑文件分开的 .css 文件：

module: {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        use: ['css-loader']
      })
    }
  ]
},
plugins: [
  new ExtractTextPlugin({
    filename: 'app.css'
  })
]

这使您可以灵活地从其他包中单独加载 css，这样您就可以防止 FOUC。

为什么 webpack 有单独的加载器来加载 css 并将其注入网站？

Why does webpack have separate loaders for loading css and injecting it to the website?

javascript

webpack

webpack-style-loader

css-loader