webpack---loader

Loader

需要的loader大全

使用loader步骤

• 通过npm安装对应的loader
• 按照loader作者的要求在webpack进行相关配置
• 使用配置好的loader

官方地址

fileloader(打包图片)

• 安装npm install file-loader --save-dev

• 导入文件

• 配置webpack文件

  • 	//module: 告诉webpack如何处理webpack不能够识别的文件
    module: {
        rules: [
          {
            test: /\.(png|jpe?g|gif)$/i,
             use: [
              {
                loader: 'file-loader',
                options:{},
              },
            ],
          },
        ],
      },
    

配置

以下配置都需要在options内进行额外配置

• name
  • 打包后的名称,默认情况下fileloader生成的图片名就是文件内容的 MD5 哈希值
  • 不想改名称,可以加新的配置name: "[name].[ext]"
    • [ext]
    • 类型：String默认值：file.extname
    • 目标文件/资源的文件扩展名。
    • [name]
    • 类型：String默认值：file.basename
    • 文件/资源的基本名称。
• outputPath
• 指定将放置目标文件的文件系统路径。
  • outputPath: 'images',
• publicPath
  • 指定目标文件的定制公共路径。
    • 配置 publicPath: "托管服务器地址"

打包字体:

{
                test: /\.(eot|json|svg|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            // 指定打包后文件名称
                            name: '[name].[ext]',
                            // 指定打包后文件存放目录
                            outputPath: 'font/',
                        }
                    }
                ]
            },

css-loader(打包css)

教程

• css-loader: 解析css文件中的@import依赖关系
• style-loader: 将webpack处理之后的内容插入到HTML的HEAD代码中

postcss-loader

什么是PostCSS?

PostCSS和sass/less不同, 它不是CSS预处理器

PostCSS是一款使用插件去转换CSS的工具

PostCSS有许多非常好用的插件

官方地址

例如

• autoprefixer(自动补全浏览器前缀)
• postcss-pxtorem(自动把px代为转换成rem)

使用方法

• 教程

  • 安装postcss-loader

    • npm install --save-dev postcss-loader postcss

  • 添加文件

  • 写配置文件

    • module: {
          rules: [
            {
              test: /\.css$/i,
              use: [
                "style-loader",
                "css-loader",
                {
                  loader: "postcss-loader",
                  options: {
                    postcssOptions: {
                      plugins: [
                        [
                          "postcss-preset-env",
                          {
                            // 其他选项
                          },
                        ],
                      ],
                    },
                  },
                },
              ],
            },
          ],
        },
      

    • 第二种方式:

      • 新建一个postcss.config.js

      • module.exports = {
          plugins: [
            [
              "postcss-preset-env",
              {
                // 其他选项
              },
            ],
          ],
        };
        

      • webpack配置

        • module.exports = {
            module: {
              rules: [
                {
                  test: /\.css$/i,
                  use: ["style-loader", "css-loader", "postcss-loader"],
                },
              ],
            },
          };
          

  • 根据需求下载插件

    • SugarSS :句法分析器---------->npm install --save-dev sugarss

    • Autoprefixer:添加厂商前缀----------->npm install --save-dev autoprefixer

    • PostCSS Preset Env---------------->npm install --save-dev postcss-preset-env

    • postcss-pxtorem:自动将px转换成rem---------------> npm install postcss-pxtorem -D

      • 配置文件:

        "postcss-pxtorem": {
                    rootValue: 100, // 根元素字体大小
                     propList: ['*'] // 可以从px更改到rem的属性
                    //propList: ["height"]
                }
        

      • 规则:

        • rootValue (Number) root 元素的字体大小。

        • unitPrecision (Number) 允许REM单位增长到的十进制数。

        • propList ( array ) 可以从px更改到rem的属性。

        • 值需要精确匹配。

        • 使用通配符 * 启用所有属性。 示例：[’*’]

        • 在单词的开头或者结尾使用 *。 ( [’*position*’] 将匹配 background-position-y )

        • 使用 与属性不匹配。! 示例：[’*’,‘letter-spacing’]!

        • 将"非"前缀与其他前缀合并。 示例：[’*’,‘font*’]!

        • selectorBlackList ( array ) 要忽略和离开的选择器。

        • 如果值为字符串，它将检查选择器是否包含字符串。

        • [‘body’] 将匹配 .body-class

        • 如果值为 regexp，它将检查选择器是否匹配正则表达式。

        • [/^body$/] 将匹配 body，但不匹配 .body

        • replace (Boolean) 替代包含rems的规则，而不是添加回退。

        • mediaQuery (Boolean) 允许在媒体查询中转换 px。

        • minPixelValue (Number) 设置要替换的最小像素值。

    • 注意:postcss-preset-env 包含 autoprefixer，因此如果你已经使用了 preset 就无需单独添加它了。

  • 举例

    • webpack

    module: {
        rules: [
          {
            test: /\.css$/i,
            use: [
              "style-loader",
              {
                loader: "css-loader",
                options: { importLoaders: 1 },
              },
              {
                loader: "postcss-loader",
                options: {
                  postcssOptions: {
                    plugins: [
                      [
                        "autoprefixer",
                        {
                          // 选项
                        },
                      ],
                    ],
                  },
                },
              },
            ],
          },
        ],
      },
    

    • postcss.config.js

      • module.exports = {
            plugins: {
                "autoprefixer": {
                    "overrideBrowserslist": [
                        // "ie >= 8", // 兼容IE7以上浏览器
                        // "Firefox >= 3.5", // 兼容火狐版本号大于3.5浏览器
                        // "chrome  >= 35", // 兼容谷歌版本号大于35浏览器,
                        // "opera >= 11.5" // 兼容欧朋版本号大于11.5浏览器,
                        "chrome  >= 36",
                    ]
                }
            }
        };
        

特点

• 单一原则, 一个loader只做一件事情
• 多个loader会按照从右至左, 从下至上的顺序执行(重要)