webpack基础使用Loader（三）

loaders:[
{
    test:/\.js$/,
    loader:'babel-loader',

    exclude:__dirname+"/node_modules/", //排除打包的范围（需要绝对路径）

    include:__dirname+"src",//指定打包的范围（需要绝对路径）
    query:{
         presets:['latest']
      }
    }
]

安装loader：npm install xxx-loader

loaders的参数：1.test:必须满足的条件(正则)  2.exclude:不能满足的条件(loader的排除范围)  3.include:由加载程序转换导入文件的路径或文件数组 （loader处理范围）  4. loader    5.loaders:将串联的loader用数组表示

提高打包的速度：exclude排除打包的范围  include:指定打包的范围。

安装postcss-loader: npm i -D  postcss-loader （npm install postcss-loader --save-dev ）    在webpack.config.js的module里配置               

       rules: [
           {
              test: /\.css$/,
              use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } },'postcss-loader' ]
            }，

           {
               test: /\.scss$/,
               loaders:['style-loader','css-loader','postcss-loader','sass-loader']
            }

         ]  

        新建一个文件 postcss.config.js文件：

         module.exports = {
          "plugins": {
             " autoprefixer": {}
              }
          }

       importLoaders: 1 : 表示在css-loader之后指定几个数量的loader来处理import进来的资源

 

webpack处理模板文件  1.webpack把模板文件当做字符串处理

                               2.webpack把模板当成已经编辑好的模板的处理函数

 

webpack 处理图片 file-loader    在模板文件中的图片<img src="${ require('图片路径')}">

                                      {
                                         test: /\.{png|jpg|jif|svg}$/i,
                                         loaders:'file-loader',
                                         query:{
                                               name: 'images/[name]-[hash:5].[ext]'
                                              }
                                         }

                              url-loader: (base64编码的图片文件)

                                      {
                                         test: /\.{png|jpg|jif|svg}$/i,
                                         loaders:'url-loader',
                                         query:{

                                                limit:20000,
                                                name: 'images/[name]-[hash:5].[ext]'
                                              }
                                         }