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'
        ]
      }
    ]
  }
}

结果：