webpack加载css样式 ----css相关loader

一、什么是loader？

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。 loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

二、loader的使用方式

在 webpack 的配置中，loader 有两个属性： 1. test 属性，识别出哪些文件会被转换。 2. use 属性，定义出在进行转换时，应该使用哪个 loader。

module.exports = {
    module: {
        rules: [{ test: /\.txt$/, use: 'raw-loader' }],
    },
}

三、webpack加载css

为了在 JavaScript 模块中 import 一个 CSS 文件，你需要安装 style-loader 和 css-loader。

配置方式如下：

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

模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。链会逆序执 行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，依此类推。 最后，webpack 期望链中的最后的 loader 返回 JavaScript。 应保证 loader 的先后顺序： 'style-loader' 在前，而 'css-loader' 在后。如果 不遵守此约定，webpack 可能会抛出错误。webpack 根据正则表达式，来确定应该 查找哪些文件，并将其提供给指定的 loader。在这个示例中，所有以 .css 结尾的 文件，都将被提供给 style-loader 和 css-loader 。 这使你可以在依赖于此样式的 js 文件中 import './style.css' 。现在，在此模块 执行过程中，含有 CSS 字符串的style标签会被插入到html的head中，但是注意是由js代码动态插入的，可在浏览器中查看到，但是源码中是没有的。

四、抽离css

在多数情况下，我们也可以进行压缩CSS，以便在生产环境中节省加载时间，同时还 可以将CSS文件抽离成一个单独的文件。实现这个功能，需要 mini-css-extract-plugin 这个插件来帮忙。

本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文 件，并且支持 CSS 和 SourceMaps 的按需加载。 本插件基于 webpack v5 的新特性构建，并且需要 webpack 5 才能正常工作。

const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module: {
rules: [
{
    test: /\.css$/i,
    use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
]
}

单独的 mini-css-extract-plugin 插件不会将这些 CSS 加载到页面中。这里 html-webpack-plugin 帮助我们自动生成 link 标签或者在创建 index.html 文件时使 用 link 标签。

五、压缩css

上面的步骤会原样加载css文件，如果想要优化压缩输出文件，需要安装类似css-minimizer-webpack-plugin的插件，配置如下：

const CssMinimizerPlugin = require('css-minimizer-webpackplugin')
module.exports = {
    mode: 'production',
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
        ],
    },
}