Webpack核心(三）—— loader

 

官网 ： https://www.webpackjs.com/concepts/loaders/

 

1.css-loader:

作用：读取css文件

安装：npm install css-loader -D

 

官网： https://www.webpackjs.com/loaders/css-loader/

注意：mini-css-extract-plugin 和 css-loader 位置不能有错，否则会报错

 

2.style-loader:

作用：把css-loader输出的css加载到页面里

安装：npm install style-loader -D （-D:--save-dev安装是在开发环境安装，--save -S 在线上环境配置）

 

官网： https://www.webpackjs.com/loaders

 

3.mini-css-extract-plugin.loader: （webpack4.3之上才能使用）

作用：提取css文件

安装：npm install mini-css-extract-plugin -D

参数：filename: 'css/index.css', //打包后将css文件放在css里面

 

GitHub插件地址：https://github.com/webpack-contrib/mini-css-extract-plugin

 

rm -r dist //删除包文件

npm run build //打包文件

 

npm run dev 运行

 

4.optimize-css-assets-webpack-plugin(插件）

作用：压缩css

安装：npm install optimize-css-assets-webpack-plugin -D

 

github: https://github.com/NMFR/optimize-css-assets-webpack-plugin

 

5.file-loader

作用：读取图片

安装：npm install file-loader -D

 

官网：https://www.webpackjs.com/loaders/file-loader/

webpack官网github插件：https://github.com/webpack-contrib

 

 module:{
       rules:[//对象
           //这里面放的就是一个个的loader,每一个loader要放在一个对象里,这里面的内容不能变，从后往前解析
           {
               test:/\.css$/,  //正则,找到以.css结束的文件
               use:[
                   //它的值是一个数组
                  // 'style-loadr', //给页面嵌入css标签
                  // MiniCssExtractPlugin.loader,  //提取css为单独的css文件
                   {
                       //loader是可以进行参数的配置的，如果需配置的话就必须放再一个对象当中
                       loader:MiniCssExtractPlugin.loader,
                       options:{
                        publicPath: '../',
                       }
                   },
                   'css-loader',
               ]
           },
           {
             test:/\.(jpg|png|gif)$/,
             use:[
                // 'file-loader',
                //在输出图片的时候，有个文件夹，所以就在loader进行配置
                {
                    loader:'file-loader',
                    options:{
                        outputPath: 'images', //s打包生成images文件夹
                    }
                }
             ]
           }
       ]
   }

 

 

6.url-loader

作用：把图片地址转成base64

安装：npm install url-loader -D

 

github: https://github.com/webpack-contrib/url-loader

module:{
       rules:[//对象
           //这里面放的就是一个个的loader,每一个loader要放在一个对象里,这里面的内容不能变，从后往前解析
           {
             test:/\.(jpg|png|gif)$/,
             use:[
                // 'file-loader',
                //在输出图片的时候，有个文件夹，所以就在loader进行配置
                // {
                //     loader:'file-loader',
                //     options:{
                //         outputPath: 'images',
                //     }
                // }
                {
                    loader: 'url-loader',
                    options: {
                      limit: 50*1024,  //50k 限制图片50k以下转base64
                    },
                }
             ]
           }
       ]
   }

//图片赖加载（预加载）:当图片加载完之后再显示到页面中
index.js:
    import img1 from '../images/img_01.jpg';
    import img2 from '../images/img_02.jpg';
    
    const loadImg=img=>{
        const newImg = new Image();
        newImg.onload=()=>{
            document.body.appendChild(newImg);
        }
        newImg.src=img
    };
    loadImg(img1);
    loadImg(img2);
    
    //rm -r dist &&  npm run build