CSS 资源处理及其差异

1. 资源内联。使用 html-inline-css-webpack-plugin
2. 单独的文件。

css-loader

作用：用于加载 .css 文件，并且转换成 CommonJS 对象。也就是说样式代码会被放到 JS 里面去。

配置（只用了 css-loader)：

// webpack.config.js
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['css-loader'],
      }
    ]
  }
}

结果：

打包后的文件不包含任何 CSS 文件。

样式代码在 JS 文件里。

style-loader

作用：将样式通过 <style> 标签插入到 head 中。

插入是一个动态的过程，打包后生成的 HTML 文件没有 <style></style> 标签，而是在代码运行时动态的创建 style 标签，然后将 CSS Style 插入到 style 标签里面去。

配置：

// webpack.config.js
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

结果：

打包后的文件不包含任何 CSS 文件。

样式代码在 JS 文件里。

运行时（运行时插入）：

使用 style-loader 可以配置 options.injectType: 'singletonStyleTag'。

mini-css-extract-plugin

作用：将 CSS 提取到单独的文件中。

配置：

// webpack.config.js
module.exports = {
  //...
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  }
}

结果：

打包后的文件中 CSS 文件，并且 HTML 文件中使用 <link /> 链接了该 CSS 文件。

<link href="search_7860b96e.css" rel="stylesheet" />

html-inline-css-webpack-plugin

使用 html-inline-css-webpack-plugin 需要 mini-css-extract-plugin 和 html-webpack-plugin。

作用：内联样式

<link rel="stylesheet" /> ====> <style>...<style/>

配置：

// webpack.config.js
module.exports = {
  //...
  plugins: [
    new MiniCssExtractPlugin(),
    new HtmlWebpackPlugin(),
    new HTMLInlineCSSWebpackPlugin()
  ],
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  }
}

结果：

总结：

CSS 内联的思路是：先将 CSS 提取打包成一个单独的 CSS 文件（使用 MiniCssExtractPlugin.loader)，然后再将提取的 CSS 内容注入到页面的 style 里面去。这个过程在构建阶段完成。