webpack常用loader

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'
        ]
     }
  }
}

打包结果

图片.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'  //选择插入标签的地方
    }
},