前端:Webpack常用loader

6.webpack loader
    6.1默认情况下 webpack 只能对js进行打包，因为只有js有模块的概念
    6.2开发过程中，我们可能会打包css 图片等文件，那么就得使用相应的loader，让这些文件也被 模块化
       以便于webpack能够识别并打包


7.file-loader:【注：简单拷贝的文件都可以用。例如：字体图标，只需要改变正则表达式即可】
              作用：将require()或者import导入的文件 输出到目标文件夹，并将打包后 的路径赋值给url
              配置：打包不改变名称 name:[name].[ext]
                    指定相对于输出目录的输出目录 outputPath:'相对路径'
                    指定托管目录： publicPath:'网址'


8.url-loader:
            作用：①将图片转为base64d的字符串，并赋值给用到图片的地方；
                  ②如果被转图片超过了指定limit大小，则像file-loader一样，
                   将图片输出到目标文件夹并将路径赋值给用到的地方
            配置：指定限制大小：  l004imit:数字
                  打包不改变名称 name:[name].[ext]
                  指定相对于输出目录的输出目录 outputPath:'相对路径'


9.css-loader:[通常和style-loader使用]
            作用：解析require、import、@import导入的css文件之间的依赖关系


10.style-loader：
            作用：将css文件转为style标签 并 插入到html的head标签中


11.loader执行顺序：从右至左，从下至上


12.less-loader[通常和css-loader、style-loader配合使用]:
            作用：将less文件编译为css文件


13.scss-loader[通常和css-loader、style-loader配合使用]:
             作用：将scss文件编译为css文件


14.PostCSS:webpack一款转换css文件的工具
            作用：利用插件将已经编写好的css文件进行一些转换的工具；【例如：将px转换为rem；添加各个浏览器私有前缀】
            常用插件：postcss-pxtorem
                      autoprefix
            注：需要安装 postcss-loader 并新增postcss.config.js配置文件

15.html-withimg-loader:
        作用：打包html中引用到的图片【css中用到的图片可以用file-loader或者url-loader】