003 webpack基础 - webpack处理样式资源

[A] webpack处理样式资源

　　1. 样式资源包括css, less, sass, stylus资源

　　 2. webpack本身是不能识别样式资源的, 我们需要借助loader来帮助webpack解析样式资源,可以去webpack官方文档查找相关loader

　　处理css资源:

　　　　示例:

　　　　　　1. 创建一个css文件资源:

          // body.css
          .box {
          　　width: 100px;
          　　height: 200px;
          }

 

            2. 在main.js中导入该css文件

　　　　　　const css = require('./css/body.css')

            3. 打包编译

          npx webpack

            4. 发现执行报错, 这是因为webpack本身就识别不了css文件

 

        解决: 安装相关loader来帮助解析

            根据官方文档,加载css-loader即可

            module: {
                rules: [
                    // loader的配置
                    {
                        test: /\.css$/,     // 需要检测的文件
                        use: [
                            // 执行顺序,从右向左
                            'style-loader',     // 将js中css通过创建style标签添加到html中生效
                            'css-loader'        // 将css资源编译成commonJS的模块打包到js中
                        ]
                    }
                ]
            },

　　

　　处理less资源:

        　　官网查询使用

        　　{
            　　test: /\.less$/,
           　　 use: [
           　　     'style-loader', // 将js中css通过创建style标签添加到html中生效
       　　         'css-loader',   // 将css资源编译成commonJS的模块打包到js中
       　　         'less-loader'   // 将less编译成css
      　　      ]
    　　    }

　　处理sass资源:

　　　　官网查询

　　处理stylus资源:

　　　　官网查询

 

 

[B] webpack提取样式到单独的文件中

　　1. 安装

　　　　npm i mini-css-extract-plugin -D

　　2. webpack配置

　　　　const MiniCssExtractPlugin = require("mini-css-extract-plugin")

　　　　插件配置：

            plugins: [
                // 提取css成单独文件
                new MiniCssExtractPlugin({
                    // 定义输出文件名和目录
                    filename: "static/css/main.css",
                }),
            ],

　　　　load配置：在每一个 css-loader 处理过后，再使用 MiniCssExtractPlugin.loader 处理一遍

            {
                // 用来匹配 .css 结尾的文件
                test: /\.css$/,
                // use 数组里面 Loader 执行顺序是从右到左
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },

　　3. 此时，打包的时候，css文件就会被提取到单独的文件夹中

 

[C] webpack样式兼容性处理：

        css中的某些语法是迭代后新增的，在旧版本的浏览器上，可能出现不识别的问题

        css打包的流程是：

            先用less-loader等将更高级的样式编译成普通的css样式

            再用css-loader将css语言编译成commenJS的模块打包到js中

            再用style-loader将js中的css通过style标签添加到html页面中

        而兼容性处理，在css样式被编译成commenJS之前进行处理，即在上述的 less-loader 与 css-loader 之前

　　1. 安装

        npm i postcss-loader postcss postcss-preset-env -D

　　2. webpack配置

        {
            test: /\.less$/,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader",
                {
                    loader: "postcss-loader",
                    options: {
                        postcssOptions: {
                            plugins: [
                                "postcss-preset-env", // 能解决大多数样式兼容性问题
                            ],
                        },
                    },
                },
                "less-loader",
            ],
        },

　　3. 此外，我们还可以在 package.json 中控制兼容性的问题

        　　我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。

            {
                // 其他省略
                "browserslist": ["last 2 version", "> 1%", "not dead"]
            }

 

 

[D] webpack压缩css代码：

    1. 下载

        npm i css-minimizer-webpack-plugin -D

    2. webpack配置

        const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
        plugins: [
            // css压缩
            new CssMinimizerPlugin(),
        ]

    3. 压缩后的css会去除空格和换行