webpack入门(三):loader

一、loader简介:

• loaders(加载器、转化器)是webpack中一个很重要的功能，它可用于预处理文件。
• 通过使用loaders，你可以打包除 JavaScript 之外的任何静态资源，例如：less/scss(转成css)、ES7/8、jsx等。

二、处理CSS:style-loader、css-loader

1. 安装：cnpm i style-loader css-loader -D
2. 引入CSS：在index.js文件中引入import '../css/index.css';
3. 配置：

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader','css-loader']
    }
  ]
},

4. 注意rules有三种写法，但键名均不可改：

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader','css-loader']
    }
  ]
},
module: {
  rules: [
    {
      test: /\.css$/,
      loader: ['style-loader','css-loader']
    }
  ]
},
module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        {loader:'style-loader'},
        {loader:'css-loader'}
      ]
    }
  ]
},

三、处理图片：

1. 处理css中引用的图片：file-loader、url-loader

(1). 安装：cnpm i file-loader url-loader -D
(2). 配置：

module: {
  rules: [
    {
      test: /\.(png|jpg|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 1000,            //大于1000,转图片路径;小于1000,转Base64
            outputPath: 'images',   //图片打包出去的目录    
          }
        }
      ]
    }
  ]
},

2. 处理html中引用的图片：html-withimg-loader

*注意：处理html中的引用图片要在处理css引用图片的基础上，增加html-withimg-loader
(1). 安装：cnpm i html-withimg-loader -D
(2). 配置：

module: {
  rules: [
    {
      test: /\.html$/,
      use: ['html-withimg-loader'],
    },
  ]
},

四、分离CSS：extract-text-webpack-plugin

1. 安装：cnpm i extract-text-webpack-plugin@next -D
   *注意：目前extract-text-webpack-plugin直接安装的版本，是适用于webpack3.X的，因此需使用@next安装适用于webpack4.X的最新版，否则可能报错。
2. 配置：

module: {
  rules: [
    {
      test: /\.css$/,
      use: ExtractTextWebpackPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader',
        publicPath: '../'        //解决css背景图片路径问题
      })
    }
  ]
},

3.使用：

//引入extract-text-webpack-plugin插件
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');

plugins: [
  //分离CSS
  new ExtractTextWebpackPlugin('css/index.css'),    //提取出去的路径
]

五、处理less：less-loader

1. 安装：cnpm i less less-loader -D
2. 编写src/less/a.less文件：

//a.less
@a: red;

#div1 {
    color: @a;
}

3. 引入less：在index.js文件中引入import '../less/a.less';
4. 配置：

module: {
  rules: [
    {
      test: /\.less$/,
      use: ExtractTextWebpackPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader','less-loader'],
        publicPath: '../'        //解决css背景图片路径问题
      })
    }
  ]
},

六、处理sass：node-sass sass-loader

1. 安装：cnpm i node-sass sass-loader -D
2. 编写src/sass/b.scss文件：

//b.scss
$b: green;

#div2 {
    color: $b;
}

*注意：SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。

3. 引入sass：在index.js文件中引入import '../sass/b.scss';
4. 配置：

module: {
  rules: [
    {
      test: /\.scss$/,
      use: ExtractTextWebpackPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader','sass-loader'],
        publicPath: '../'        //解决css背景图片路径问题
      })
    }
  ]
},

七、处理js:babel-loader、babel-core、babel-preset-env

babel是一个JavaScript编译器，它可以让你很轻松的使用ESnext。

1. 安装：cnpm i babel-loader@7 babel-core babel-preset-env -D
2. 新建babel-preset-env的配置文件.babelrc
   .babelrc

{
  "preset": [
    "env"
  ]
}

3. 配置webpack.config.js中的modul.rules

rules: [
  {
    test: /\.(js|jsx)$/,
    use: ['babel-loader'],
    exclude: /node_modules/
  }
]