Webpack系列-几个常见的loader

admin 2022年4月19日23:51:52安全开发评论18 views1542字阅读5分8秒阅读模式

url-loader

yarn add url-loader

使用url-loader会帮我们把图片变成base64的字符串; 优点: dist---> 少了 .jpg 图片文件 --->  减少一次图片的HTTP 请求;

页面加载: js加载完毕; 图片进入到 bundel.js中(通过base64形式); 图片过大 ---> bundle.js过大 ---> 页面加载完毕时间很长 --->  空白页面

图片只有1,2kb --->  bundle.js(base64)

图片很大---> file-loader ---> 生成单独的.jpg去发送额外的HTTP请求,js抽次加载时间就很短,页面很快就会出来

style-loader和css-loader

首先安装:

 yarn add style-loader css-loader

配置文件:

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
  mode'development',
  entry: {
    main'./src/index.js'
  },
  output: {
    filename'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test/.(jpg|png|gif)$/,
        use: {
          loader'url-loader',
          options: {
            // 占位符 placeholder
            name'[name]_[hash].[ext]',
            outputPath'images/',
            limit2048
          }
        }
      },
      {
        test/.css$/,
        use: [
          'style-loader',//将css-loader生成的css代码放入html的head标签里面
          'css-loader'  //帮助分析css文件之间的引用关系并生成css代码
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template'./src/index.html'
    }),
    new CleanWebpackPlugin()
  ]
}

sass-loader和postcss-loader

安装:

sudo npm install sass sass-loader -D
yarn add postcss
yarn add postcss-loader

yarn add autoprefixer

package.json:

"browserslist":[
"> 1%",
大于市场1%的浏览器
"last 2 versions"
与上2个版本兼容
],

postcss.config.js:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}


原文始发于微信公众号(迪哥讲事):Webpack系列-几个常见的loader

特别标注: 本站(CN-SEC.COM)所有文章仅供技术研究,若将其信息做其他用途,由用户承担全部法律及连带责任,本站不承担任何法律及连带责任,请遵守中华人民共和国安全法.
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2022年4月19日23:51:52
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                  Webpack系列-几个常见的loader http://cn-sec.com/archives/928268.html

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: