webpack之loader

作用

loader是一种打包的方案，webpack默认只识别js结尾的文件，当遇到其他格式的文件后，webpack并不知道如何去处理。此时，我们可以定义一种规则，告诉webpack当他遇到某种格式的文件后，去求助于相应的loader。

 

npm install file-loader -D

webpack.config.js

const path = require('path');

module.exports = {
  // 模式：可选为：development, 默认为：production
  mode: 'development',
  // 源代码文件夹：src
  entry: {
    main: './src/index.js' // 入口文件
  },
  module: {
    rules: [{
        test: /.jpg$/,
        use: {
            loader: 'file-loader'
        }
    }]
  },
  output: {
    filename: 'bundle.js',  // 文件名
    path: path.resolve(__dirname, 'dist')  // 文件夹
  }
}

index.js

import pic from './lee.jpg';

var img = new Image();
img.src = pic;

var root = document.getElementById('root');
root.append(img);

打包静态资源

图片

file-loader

const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    main: './src/index.js' // 入口文件
  },
  module: {
    rules: [{
        test: /.(jpg|png|gif)$/,
        use: {
            loader: 'file-loader',
            options: { // 配置
              name: '[name].[ext]', // 以源文件名字及格式输出
              outputPath: 'images/' // 输出到images文件夹下
            }
        }
    }]
  },
  output: {
    filename: 'bundle.js',  // 文件名
    path: path.resolve(__dirname, 'dist')  // 文件夹
  }
}

url-loader

url-loader和file-loader都可以打包图片，区别是url-loader会将图片以base64打包到js文件中，当图片过大时，打包的js文件也会过大。所以最佳实践是：将小图片打包为base64，大于某个值的文件打包为图片。如果在配置中不加limit，所有图片都会打包为base64。
下面案例的意思是：超过10kb的文件打包为图片，小于10kb的打包为base64

npm install url-loader --save-dev

const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    main: './src/index.js' // 入口文件
  },
  module: {
    rules: [{
        test: /.(jpg|png|gif)$/,
        use: {
            loader: 'url-loader',
            options: { // 配置
              name: '[name].[ext]', // 以源文件名字及格式输出
              outputPath: 'images/', // 输出到images文件夹下
              limit: 10240 // 超过10kb打包为图片
            }
        }
    }]
  },
  output: {
    filename: 'bundle.js',  // 文件名
    path: path.resolve(__dirname, 'dist')  // 文件夹
  }
}

字体

file-loader

const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    main: './src/index.js' // 入口文件
  },
  module: {
    rules: [{
        test: /.(eot|ttf|svg)$/,
        use: {
            loader: 'file-loader'          
        }
    }]
  },
  output: {
    filename: 'bundle.js',  // 文件名
    path: path.resolve(__dirname, 'dist')  // 文件夹
  }
}

样式

loader 的执行顺序为从后向前

style-loader css-loader

css-loader会理清多个css文件之间的引用关系，最后合并为一个。
style-loader会将css样式挂载到head的style标签中

npm install style-loader css-loader -D

postcss-loader

为样式加上厂商浏览器前缀

npm i -D postcss-loader

const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    main: './src/index.js' // 入口文件
  },
  module: {
    rules: [{
        test: /.(jpg|png|gif)$/,
        use: {
            loader: 'url-loader',
            options: { // 配置
              name: '[name].[ext]', // 以源文件名字及格式输出
              outputPath: 'images/', // 输出到images文件夹下
              limit: 10240 // 超过10kb打包为图片
            }
        }
    },{
        test: /.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
          'postcss-loader'
        ]
    }]
  },
  output: {
    filename: 'bundle.js',  // 文件名
    path: path.resolve(__dirname, 'dist')  // 文件夹
  }
}

autoprefixer插件

npm install autoprefixer -D

postcss.config.js

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

链接：https://www.jianshu.com/p/ad99b2479bee