关于webpack:webpack5Loader

webpack5(Loader)

一、webpack倒退

古代Web开发”问题”：

采纳模块开化开发
应用新个性性进步开发效率
实时监控开发过程应用热更新
我的项目后果打包压缩优化

应用webpack实现我的项目我的项目工程化

1.Webpack性能

打包：将不同类型的资源按模块的解决进行打包
动态：打包后最终产出动态资源
模块：webpack反对不同标准的模块化开发（兼容多种模块导入模式）

2.Webpack配置文件

在我的项目根目录下，新建webpack.config.js配置文件，应用webpack命令打包时，会主动应用该配置文件打包我的项目

const path = require('path')

module.exports = {
   entry:'./src/main.js',
   output:{
        path:path.resolve(__dirname,'dist'), // 这里必须要配置为绝对路径
        filename:'bundle.js'
   }
}

指定配置文件打包：

webpack --config lg.webpack.js

二、Loader应用

1.cssLoader的应用

未应用css-loader之前的代码：

import '../css/login.css';

function login() {
    const oH2 = document.createElement('h2');
    oH2.innerHTML = '江江学前端';
    oH2.className = 'title';
    return oH2;
}
document.body.appendChild(login());

css-loader 能够将文件从不同的语言 css 转换为 JavaScript
装置css-loader：

yarn -D add css-loader

应用css-loader
行内应用：

import 'css-loader!../css/login.css'; 
// css-loader只将css解决成以后js能够辨认或解决的模块类型，不会将css文件导入进index.html中
// style-loader将css插入到head中

配置到配置文件中应用：

const path = require('path')

module.exports = {
   entry: './src/main.js',
   output: {
      path: path.resolve(__dirname, 'dist'), // 这里必须要配置为绝对路径
      filename: 'bundle.js'
   },
   module: {
      rules: [
         // {
         //    test: /\.css$/, // 个别就是一个正则表达式，用来匹配文件类型
         //    use: [
         //       {
         //          loader: 'css-loader'
         //       }
         //    ]
         // }

         // 简写  只应用一个loader解决
         {
            test: /\.css$/,
            loader: 'css-loader'
         }

         // 简写 是、应用多个loader解决,但个别不应用参数
         // {
         //    test: /\.css$/,
         //    use:[
         //       'css-loader',
         //    ]
         // }
      ]
   }
}

2.style-loader应用

style-loader的作用：
在head标签中插入一个style标签，并填入解决好的css款式
下载：

yarn -D add style-loader

配置loder:

rules: [
         {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'] // loaders的执行程序是从右到左
         }
      ]

3.less-loader应用

less-loader的作用：

外部调用less，将less代码编译成css代码

装置：

yarn -D add less less-loader

配饰loader:

  rules: [
     {
       ...
     },
     {
        test: /\.less$/,
        use: ['style-loader', 'css-loader','less-loader'] 
            // 1 先应用less-loader去调用less，将less解决成css
            // 2 应用css-loader将css变成js能解决的模块
            // 3 交给style-loader，将css放入html的head元素中
     },
  ]

4.browserslistrc应用

browserslistrc性能：

/**
 * 1 工程化
 * 2 兼容性： CSS JS       --> 前缀解决展现网站：http://autoprefixer.github.io/
 * 3 如何实现兼容？         --> Autoprefixer、post-preset-env、postcss    babel
 * 4 到底兼容那些平台？     --> 兼容市面上一些支流的浏览器平台  caniuse.com  各种浏览器应用占比：https://caniuse.com/usage-table
 * 
 * 
 * >1%                  市场占有率大于1%
 * default              市场占有率大于0.5%，采纳最新的两个版本，firefix,not dead
 * dead                 24个月没有官网反对更新的浏览器，就代表死掉了
 * last 2 versions      浏览器最新的两个版本
 */

在package.json中配置browserslist:

{
  ...
  "browserslist":[
    "> 1%",
    "last 2 versions",
    "not ie <= 8",
    "not dead"
  ]
}

或者在我的项目根目录下新建.browserslistrc配置文件：

> 1%
last 2 version
not dead
not ie <= 8

5.postcss应用

#12345678是rgba的模式
postcss简述：

1 postcss 是什么：通过javascript转换款式的工具
2 less(less-loader) --> css --> css-loader
3 postcss-preset-env    汇合了很多的古代css转换所须要的插件
4 postcss 性能：做一些css款式兼容性的操作，如 给款式针对浏览器增加不同的前缀、给css款式的重置解决
5 应用autoprefixer + browserslistrc + postcss 即可给css款式代码的前缀做兼容性解决

装置postcss:

yarn -D add postcss

如果要在命令行中间接应用npx postcss，还须要装置postcss-cli：

yarn -D add postcss-cli

装置autoprefixer：

yarn -D add autoprefixer

装置工具性能阐明：

postcss 相似于一个解决css的转换工具平台
postcss-cli 让postcss能够间接在命令行中应用
autoprefixer 依据.browserslistrc提供的兼容条件，给css款式正对不同浏览器增加前缀

命令工具应用：

    npx postcss --use autoprefixer -o ret.css .\src\css\test.css

postcss-loader解决流程：

postcss 须要在css-loader 之前对css对兼容性解决

css-loader 将css变成模块

style-loader 将css放入html中

在webpack.config.js配置postcss-loader:

module: {
      rules: [
         {
            test: /\.css$/,
            use: [
               'style-loader',
               'css-loader',
               {
                  loader: 'postcss-loader',
                  options:{
                     postcssOptions:{
                        plugins:[
                           // require('autoprefixer'),
                           // require('postcss-preset-env'),
                           // postcss-preset-env 曾经蕴含了 autoprefixer
                           // 可简写 
                           'postcss-preset-env'
                        ]
                     }
                  }
               }]
         }
      ]
   }

应用postcss.config.js独自配置插件信息：

module.exports = {
    plugins:[
        require('postcss-preset-env')
    ]
}

而后webpack.config.js的配置文件可简写了：

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

6.importLoaders

问题：
by.css:

@import './test.css';

.title{
    border: solid 20px #12345678; 
}

test.css:

.title{
    display: grid;
    transition: all .5s;
    user-select: none;
}

test局部的css不会被postcss-loader解决
问题溯源：

应用importLoaders:

 {
    test: /\.css$/,
    use: [
       'style-loader',
       {
          loader: 'css-loader',
          options:{
             importLoaders: 1 // importLoaders的作用是决定@import模块在应用css-loader前，要应用几个其它的loaders解决。
          }
       },
       'postcss-loader',
    ]
 }

7.file-loader解决图片

a.加载图片资源

file-loader在webpack.config.js中的配置：

const path = require('path')

module.exports = {
   entry: './src/main.js',
   output: {
      path: path.resolve(__dirname, 'dist'), // 这里必须要配置为绝对路径
      filename: 'bundle.js',
      publicPath: '/dist/'
   },
   module: {
      rules: [
         ...
         {
            test: /\.(png|jpg|gif)$/,
            use: [{
               loader: 'file-loader',
               options: {
                  esModule: false // 不转为 esModule
               }
            }]
         }
      ]
   }
}

创立一个解决img的js：

function packImg(){
    // 01 创立一个容器元素
    const oEle = document.createElement('div');

    // 02 创立一个img元素
    const oImg = document.createElement('img');
    oImg.src = require('../img/01.png').default; // 不应用default时，须要配置file-loader参数
    oEle.appendChild(oImg);
    
    return oEle;
}

document.body.appendChild(packImg());

应用esModule的形式导入，则不必.default：

import oImgSrc from '../img/01.png';

oImg.src = oImgSrc;

css-loader会将url替换成require,进而被打包成es模块语法
配置：

{
    test: /\.css$/,
    use: [
       'style-loader',
       {
          loader: 'css-loader',
          options: {
             importLoaders: 1, // importLoaders的作用是决定@import模块在应用css-loader前，要应用几个其它的loaders解决。
             esModule:false  // css中导入图片时，会主动将url图片引入变成require语法，进而编译成esMoudule语法，这样就会报错，所以须要设置为false
          }
       },
       'postcss-loader',
    ]
 },

图片资源导入总结：

/**
 * 打包图片：
 *  - img src
 *      + 应用 require 导入图片，此时如果不配置 esModule:false,则须要 .default
 *      + 也能够在配置中设置 esModule:false
 *      + 应用 import 导入图片，此时不须要 .default
 *  - background url
 *      + 须要间接返回资源，不须要转成 seModule, 不须要 .default，在css-loader中须要配置 esModule:false
 */

b.设置图片名称与输入tscproj

解决出片名称配置：

{
    test: /\.(png|jpg|gif)$/,
    use: [{
       loader: 'file-loader',
       options: {
          name: '[name].[hash:6].[ext]', //  name: 'imgs/[name].[hash:6].[ext]', 这样配置，则不须要再配置outputPath了
          outputPath:'imgs/'
       }
    }]
 }
]

设置图片名称罕用占位符：

/**
 * [ext]: 源文件扩展名
 * [name]: 文件名
 * [hash]: 文件内容的的hash值
 * [contenthash]: 文件内容的hash值
 * [hash:<length>]: 只取hash的前length位
 * [path]: 文件门路
 */

8.url-loader解决图片

简述url-loader性能：

url-loader:
 长处：将图片转为base64编码，能够内嵌到html或css中，缩小http申请
 毛病：图片转base64编码后，大小会变大，文件大小约为原来的1.3倍，浏览器能够应用的文件大小有限度。
       图片很大时，网页的显示将变慢
       资源不会被浏览器缓存，每次拜访都要从新获取

应用url-loader后的配置：

{
    test: /\.(png|jpg|gif)$/,
    use: [{
       loader: 'url-loader',
       options: {
          name: '[name].[hash:6].[ext]', //  name: 'imgs/[name].[hash:6].[ext]', 这样配置，则不须要再配置outputPath了
          outputPath: 'imgs/',
          limit: 10 * 1024
       }
    }]
 }

url-loader与file-loader的区别与分割:

区别:
   url-loader:将图片编码，间接放入css或html中
   file-loader:复制图片，放入dist目录下的指定目录中，资源离开申请
 
分割：
    配置参数基本相同
    url-loader 外部能够调用file-loader,依据limit值，决定是否复制图片或者将图片编码

了解图片Base64编码数据格式参考：https://www.jianshu.com/p/c42…

9.asset解决图片

asset type module是webapck5的内置解决办法

a.解决图片

性能介绍：

/**
 * asset module type
 * 01 asset/resource => file-loader     指标资源拷贝
 * 02 asset/inlinet  => url=loader      指标资源内联
 * 03 asset/source   => raw-loader      指标资源源码
 * 04 asset/管制应用loader               指标资源管制应用loader
 */

应用asset解决图片资源的asset/resource配置（可全局或部分设置asset模块解决过的文件）：

module.exports = {
   ...
   output: {
      ...
      // assetModuleFilename: 'assets/[name].[hash:4][ext]'   // 全局设置asset模块解决的文件寄存地位{这里的[ext]蕴含了'.'如：'.png}
   },
   module: {
      rules: [
         ...
         {
            test: /\.(png|jpg|gif)$/,
            type:'asset/resource',
            generator:{
               filename:'imgs/[name].[hash:4][ext]',
            }
         }
      ]
   }
}

asset/inline配置：

{
    test: /\.(png|jpg|gif)$/,
    type:'asset/inline',
 }

asset配置：

{
    test: /\.(png|jpg|gif)$/,
    type: 'asset',
    generator: {      // 做拷贝时的命名规定
       filename: 'imgs/[name].[hash:4][ext]',
    },
    parser:{          // 设置做拷贝的条件
       dataUrlCondition:{
          maxSize:10*1024      // 小于该值时，做dataURL
       }
    }
 }

b.解决图标字体

创立一个解决图标字体的js:

import '../font/iconfont.css';
import '../css/index.css';  // 定义icon的款式

function packFont(){
    const oEle = document.createElement('div');

    const oSpan = document.createElement('span');
    oSpan.className = 'iconfont icon-music lg-icon';  // lg-icon 用来管制icon款式

    oEle.appendChild(oSpan);
    return oEle;
}

document.body.appendChild(packFont());

配置asset，让其能解决图标字体文件：

 {
    test: /\.(woff2?|eot|ttf|otf)$/,
    type:'asset/resource',      // 图标字体文件，只须要拷贝到dist目录即可
    generator: {
       filename:'font/[name].[hash:3][ext]'
    }
 }

关于webpack:webpack5Loader

webpack5(Loader)

一、webpack倒退

1.Webpack性能

2.Webpack配置文件

二、Loader应用

1.cssLoader的应用

2.style-loader应用

3.less-loader应用

4.browserslistrc应用

5.postcss应用

6.importLoaders

7.file-loader解决图片

a.加载图片资源

b.设置图片名称与输入tscproj

8.url-loader解决图片

9.asset解决图片

a.解决图片

b.解决图标字体

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于webpack:webpack5Loader

webpack5(Loader)

一、webpack倒退

1.Webpack性能

2.Webpack配置文件

二、Loader应用

1.cssLoader的应用

2.style-loader应用

3.less-loader应用

4.browserslistrc应用

5.postcss应用

6.importLoaders

7.file-loader解决图片

a.加载图片资源

b.设置图片名称与输入tscproj

8.url-loader解决图片

9.asset解决图片

a.解决图片

b.解决图标字体

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复