欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack常用loader

程序员文章站 2024-02-11 11:14:28
...

postcss -loader

打包css样式,自动添加前缀

直接在匹配css文件下,添加使用这个loader就可以了
注意:postcss-loader要在css-loader下面即先添加前缀再打包

babel-loader @babel/core @babel/preset-env

es6转es5
yarn add babel-loader @babel/core @babel/preset-env -D

{
    test: /\.js$/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: [
           '@babel/preset-env'
        ]
     }
  }
}

打包结果


webpack常用loader
图片.png

file-loader or url-loader

打包图片文件
一般图片打包使用的是url-loader。她有一个好处就是可以设置当打包图片小于某个值时,选择把他打包成base64或者图片
(打包成base4比原图大三分之一)

{
        test: /\.(jpg|png|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              esModule: false,
              limit: 1,  //超过1b就打包图片
              outputPath: '/img/',
              // publicPath: 'http://localhost:3001'  //为图片添加公共路径
            }
          }
        ]
      },

html-withimg-loader

打包html文件中的图片

// 打包html中的图片
      {
        test: /\.html$/,
        use: ['html-withimg-loader']
      },

style-loader

使用多个将样式自动注入DOM <style></style>。这是默认行为。

{
    loader: 'style-loader',
    //解析的css文件插入位置
    options: {
        insert: 'top'  //选择插入标签的地方
    }
},