1、把css插入到head的标签中

loader的顺序默认是从右向左执行从下到上执行

css-loader 接续 @import这种语法的
style-loader 他是把css 插入到head的标签中 ```javascript // npm i css-loader style-loader -D

module.exports = { module: { rules: [ { test: /.css$/, use: [‘style-loader’, ‘css-loader’] } ] } }

// 插入到header标签最顶部 use: [ { loader: ‘style-loader’, options:{ insertAt:’top’ } }, { loader: ‘css-loader’ } ]

> 默认是插在head的最底部
![image.png](https://cdn.nlark.com/yuque/0/2022/png/866396/1642078161401-f1ba5700-56be-4331-a634-58279a0ba51a.png#clientId=u703a9fc5-b5d0-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=81&id=u775800ea&margin=%5Bobject%20Object%5D&name=image.png&originHeight=162&originWidth=597&originalType=binary&ratio=1&rotation=0&showTitle=false&size=11082&status=done&style=none&taskId=ub85e7470-3483-469c-be93-fe0e6eeb293&title=&width=298.5)
<a name="n5wKN"></a>
# 2、less文件处理
less-loader: less转换为css
```javascript
npm i less less-loader -D
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  }
}

3、css抽离为单独的文件

This plugin should not be used with style-loader in the loaders chain. 注意：不能和style-loader一起使用

npm i mini-css-extract-plugin -D
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          // {
          //   loader: 'style-loader',
          //   options:{
          //     insertAt:'top'
          //   }
          // },
          {
            loader: 'css-loader'
          }
        ]
      },
      {
        test: /\.less$/,
        use: [/*'style-loader'*/MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      fileName: './css/main.css'
    })
  ]
}

4、添加游览器前缀

postcss.config.js
在根目录下创建一个postcss.config.js文件

没有设置浏览器类型导致的无法生效

// postcss.config.js
// 1. npm install postcss-loader autoprefixer --save
// 2. 在项目根目录下新建 postcss.config.js
// 注意： 如果没有配置在哪些浏览器上自动添加前缀，会无法添加成功
// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({
      "browsers": [
        "defaults",
        "not ie < 11",
        "last 2 versions",
        "> 1%",
        "iOS 7",
        "last 3 iOS versions"
      ]
    })
  ]

上述可以完成添加浏览器前缀，但是会报个警告
Replace Autoprefixer browsers option to Browserslist config.
Use browserslist key in package.json or .browserslistrc file.
Using browsers option cause some error. Browserslist config
can be used for Babel, Autoprefixer, postcss-normalize and other tools.
If you really need to use option, rename it to overrideBrowserslist.
Learn more at:
https://github.com/browserslist/browserslist#readme
https://twitter.com/browserslist

解决报警告问题

// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')()
    ]
}
// 然后在package.json中添加配置项
"browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

5、压缩css

npm mini-css-extract-plugin
https://webpack.docschina.org/plugins/css-minimizer-webpack-plugin/
可以看到我们抽离css文件的这个插件上面有写
To minify the output, use a plugin like css-minimizer-webpack-plugin.

npm i css-minimizer-webpack-plugin -D

借用下mini-css-extract-plugin的例子

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },
};

注意：用这个压缩了后，当我们把 mode:production的时候 js也不压缩了，所以要用单独的接口对js来进行压缩

这将仅在生产环境开启 CSS 优化。
如果还想在开发环境下启用 CSS 优化，请将 optimization.minimize 设置为 true:

// [...]
module.exports = {
  optimization: {
    // [...]
    minimize: true,
  },
};

6、vue中经常会看见“~”引入

当我们使用webpack打包应用程序的时候可以通过alias设置别名的方式避免类似于这种尴尬的局面require(‘../../path/to/foo’)。如果我们设置了别名@指向src

alias: {
    @: path.resolve(__dirname, 'path/to/src')
}

我们就可以轻松引入src下的文件，假设我们有如下目录src>img>foo.png
就可以这样引入 require(‘@/img/foo.png’)，或者import ‘@/img/foo.png’
这种写法在js文件中是有效的，但是如果我们的css中需要插入背景图片，这个时候如何写图片地址呢？

.foo{
  // 这种写法并不能成功解析，会构建出错
  background: url('@/assets/img/foo.png')
}

通常我们的css是需要css-loader进行处理的，自然我们就会想到，如果想要在css中使用alias功能，那么必定是css-loader的支持。所以我们打开css-loader的官方文档。
发现有如下描述：

To import assets from a node_modules path (include resolve.modules) and for alias, prefix it with a ~:

url(~module/image.png) => require('module/image.png')
url('~module/image.png') => require('module/image.png')
url(~aliasDirectory/image.png) => require('otherDirectory/image.png')

也就是说需要在alias前面加上一个~号，让css-loader识别出这是一个alias。

前端工程化