webpack之loader配置

发表于 | 分类于


loader

webpack默认只能对js文件进行打包，对其他文件打包，需要引入相应loader

文件打包

jpg/png/txt等打包: file-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// webpack.config.js
 output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'sef')
  },
  module: {
    rules:[{
      test: /\.(jpg)|(png)$/,
      use: {
        loader: 'file-loader'
      }
    }]
  }

// index.js
import tupian from './43.jpg'

console.log(tupian) // d8a8a3065d0b9b1021151407cdc0fcb6.jpg,所以index.js必须放在sef文件夹里

var img = new Image()
img.src = tupian
img.onload = function () {
    document.querySelector('#wrap').append(img)
}
其他设置
1
2
3
4
5
6
7
8
9
10
11
12
module: {
   rules:[{
     test: /\.(jpg)|(png)$/,
     use: {
       loader: 'file-loader',
       options: {
         name: '[name]_[hash:7].[ext]', // 设置打包后的名字：name_hash.jpg
         outputPath: 'images/' // 文件路径：sef/images/
       }
     }
   }]
 }
base64打包：url-loader

因为url-loader也可以打包其他文件，所以只有小文件时才适合转为base64文件，url-loader和file-loader用一个就好。不然会打包两次,但是安装还是需要2个的

1
2
3
4
5
6
7
8
9
10
11
12
module: {
   rules:[{
     test: /\.(jpg)|(png)$/,
     use: {
       loader: 'url-loader',
       options: {
         outputPath: 'images/', // 文件路径：sef/images/
         limit: 10240 // 小于10240字节的用url-loader打包，转为base64,大于的会用转用file-loader打包成文件
       }
     }
   }]
 }

样式打包

1、less-loader/sass-loader: 将less-loader/sass-loader转化为css；
2、postcss-loader: 为了兼容其他浏览器，在样式前面自动填充-moz,-webkit,-ms
-moz代表firefox浏览器私有属性。-ms代表IE浏览器私有属性。-webkit代表chrome、safari私有属性
3、css-loader: 将css相关的文件转为一个css，比如index.css里是@import ‘./reset.css’；
4、style-loader: 将css文件里的代码引入到head中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// webpack.config.js
module: {
  rules: [{
    test: /\.scss$/,
    use: ['style-loader', {
      loader: 'css-loader',
      options: {
        importLoaders: 2 // 在 css-loader 前应用的 loader 的数量。不设置的话，index.scss是会执行下面2个loader,其他文件就不会执行
      }
    }, 'postcss-loader', 'sass-loader'] // use里的loader顺序是从下到上，从右到左
  }]
}

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

// index.js
import './index.scss'

// index.scss
@import './demo.scss'

// demo.scss
body{
  #wrap{ width: 150px; }
}

字体文件打包

iconfont文件放入./font文件夹中

1
2
3
4
5
6
7
8
module: {
  rules: [{
    test: /\.(eot|woff|ttf|svg)$/,
    use: {
      loader: 'file-loader'
    }
  }]
}

html中的资源打包

打包html中的img, video, mp3资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
module: {
  rules: [{
    test: /\.(jpg|png|mp4)$/,
    use: {
      loader: 'url-loader',
      options: {
        name: '[name]_[hash:7].[ext]',
        outputPath: 'img',
        limit: 10240
      }
    }
  }, {
    test: /\.html$/,
    use: {
      loader: 'html-loader',
      options: {
        // 默认只识别img:src，所以不配置的时候img:src会用url-loader打包，其他就忽略
        attrs: ['img:src', 'img:data-src', 'audio:src', 'video:src' ],
        minimize: false,
        removeComments: true,
        collapseWhitespace: false
      }
    }
  }]
}