从四个角度考虑问题

css的引入

  1.   在webpck中可以使用loader来操作管理资源，需要搭配 css-loader 以及 style-loader,当该模块运行时，含有 CSS 字符串的 `<style>` 标签，将被插入到 html 文件的 `<head>`

style-loader


style-loader将模块的导出作为样式添加到 DOM ，负责将生成的页面元素插入.

  • transform

是一个配置函数，不是在打包的时候运行，而是在浏览器的环境下可以使用，可以拿到windows，例如可以判断浏览器的类别，来进行样式的处理.

  • insertAt

  • insertInto 可以控制插入的位置

<br />下面的配置中通过使用style-loader/useable，来过滤掉不是不使用的css

{
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
        ],
      },
      {
        test: /\.useable\.css$/,
        use: [
          {
            loader: "style-loader/useable"
          },
          { loader: "css-loader" },
        ],
      },
    ],
  },
}

css-loader

css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们,可以在js中通过import来引入css文件,设置css类别名.

可以压缩css

cssmodule

在css-loader中可以通过，modules配置来开启css-module，使用localIdentName 可以控制生成的类名

  1. :local 本地样式

  2. :global 全局样式

  • compose 组合样式

可以从另一个文件中引入css文件样式，注意要将引入的样式放在上方，以免造成覆盖

  • compose from path

配置less和sass

在webpage中支持less和sass很简单，通过使用相关loader以可

less-loader,需要注意的是在webpack之中，rules中use的loader是从后往前使用，比如，必须先使用less-loader然后加入css-loder再引入style-loader

  {
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
            option: {
              transform: './transform.css.js',
              insertInto: 'head',
            }
          },
          {
            loader: 'css-loader',
            option: {
              localIdentName: '[path][name]__[local]--[hash:base64:5]'
            }
          }, {
            loader: 'less-loader',
          }
        ],
  }，

提取css文件

在webpack v4中官网建议使用 MiniCssExtractPlugin插件来提取css样式文件，插件搭配loader来配置.
此插件将CSS提取到单独的文件中。并为每个包含CSS的JS文件创建一个CSS文件。它支持CSS和SourceMap的按需加载。

相比于 extract-text-webpack-plugin，有一些有点。

配置 extract-text-webpack-plugin的配置项目是
一个allchunks是一个配置项目，默认不会提取异步加载的样式文件, 类如webpack的import().

  import(/* webpackChunkName:'a' */ './css/common.css').then(res => {

  })

如何切分css代码，类如compoents目录下的组件样式。搭配使用js中的代码切分，利用allChunks:false。
在output中设置chunkfilename