webpack 核心概念loader

loader就是一个打包方案，知道对于特定的文件如何去打包。webpack本身对于一些文件不知道该如何处理。但loader知道怎么处理，所以webpack会求助loader。

webpack默认是知道如何打包js，但对于文件，图片，字体图标的模版，就不知道改如何打包了，如何让他能够知道这些该如何打包呢。那么就应该去webpack对应的配置去配置。

const path = require('path') 
module.export = {
    mode:'development',
    entry:'./src/index.js', 
    module:{ 
        rules:[{ 
                test:/\.png|jpq|gif$/, 
                use:{ loader:'file-loader' } 
            }] 
         }, 
   output:{ 
       filename:'bundle.js', 
       path:path.join(__dirname,'dist')，
      }
  }

然后我们看看Index.js 是如何写的。

import acator from './头像.png'

console.log(acator)

在控制台打印的结果是 3f16daf5233d30f46509b1bf2c4e08a5.jpg

总结：webpack 无法识别非js结尾的模块，所以需要loader让webpack识别出来。

遇到非js结尾的模块，webpack会去module中寻找对应的规则，找到对应的规则，去寻求对应loader帮忙

对应的loader将会把该模块打包到相应的目录之下，上面的例子中就是打包到对应的dist目录中。并且返回来的就是改模块的路径

如何配置file-loader

你想将打包后的文件名称不变。并且加个后缀的话。可以这么配置options

例如： 引入照片 import acator from './头像.png'

{ 
    loader:'file-loader', 
    options:{ 
        //name 就是原始名称，hash使用的是md5的算法，ext就是后缀，
        name:'[name]_[hash].[ext]',   
        // 将图片这些模块打包到dist目录下的images下 
        outputPath:'images/' 
     } 
    
  }

打包完的名称：头像_3f16daf5233d30f46509b1bf2c4e08a5.jpg

如何配置url-loader

对于图片的模块打包，也可用url-loader

{ 
    loader：'url-loader', 
    options:{ 
              name:'[name]_[hash].[ext]', 
              outputPath:'images/', limit:'102400' 
             } 
  }

url-loader 与file-loader的区别

1.当你打包的图片大小比limit配置的参数大，那么跟file-loader 一样

2.当图片较小时，就会以base64打包到bundle.js文件中

如何配置css-loader

比如你引入了一个css模块，你就要去下载对应的模块loader

npm install css-loader style-loader -D

接下来就是配置module

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

通过两个loader,就实现了webpack打包css。

css-loader: 将多个css文件整合到一起，形成一个css文件。

style-loader: 会将整合后的css部分挂载到head标签中

如何配置postcss-loader

作用：加上厂商前缀

使用：1. npm i -D postcss-loader autoprefixer

2. 建一个postcss.config.js 这个配置文件位置跟webpack位置一样

// postcss.config.js // 需要配置这个插件

module.export = { 
        plugins:[ 
            require('autoprefixer)({
                overrideBromserslist:[
                    "Andriod 4.1", 
                    "iOS 7.1", 
                    "Chrome > 31", 
                    "ff > 31", 
                    "ie >= 8" 
                 ] 
            }) 
       ] 
   }