webpack配置使用loader加载器

我们前面在快速入门部分学习的时候知道：使用webpack打包非JS文件的时候，是打包不成的，如果确实需要，需要加载对应的loader，比如我们前面使用过 style-loader 和 css-loader。

webpack 中 loader 的调用过程：

1. 在webpack配置中使用loader

loader使用前要安装，这点我们无需多言，关于loader的使用方式，我们前面已经见过两种，不过都不是推荐的使用方式，这里我们再讨论一种使用配置文件配置loader规则的用法。

1.1 配置打包css文件

安装对应的loader

npm install css-loader style-loader --save-dev

在 webpack.config.js 中的module 选项下的rules数组中添加 loader 规则

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

配置说明：

1. test 表示匹配的文件类型，use表示对应要调用的 loader
2. use 数组中指定的loader是有顺序的， 多个loader的调用顺序是从后往前调用。

完整的配置类似这样的：

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        page1: ['./src/js/1.js', './src/js/2.js'],
        page2: './src/js/3.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        //输出的打包文件可以加个目录
        filename: 'js/[hash]-[name].b.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ],
    // 这里配置loader规则
    module: {
        rules: [
          	// 表示使用 .css结尾的文件使用'style-loader'和'css-loader'处理
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    }
};

1.2 配置打包less文件

安装对应的loader

npm install less-loader less --save-dev

在 webpack.config.js 中的module 选项下的rules数组中添加 loader 规则

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

完整的配置应该类似这样：

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        page1: ['./src/js/1.js', './src/js/2.js'],
        page2: './src/js/3.js'
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        //输出的打包文件可以加个目录
        filename: 'js/[hash]-[name].b.js'
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ],
    
    // 这里配置loader规则
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
        ]
    }
};

1.3 样式文件中的文件路径处理

我们在编写页面的样式的时候，少不了要引入一些图片或者字体等文件，比如类似这样的：

div {
  color: aqua;
  width: 300px;
  height: 300px;
  background: url('../images/11.jpeg');
}

默认情况下webpack 是无法处理这些路径和文件的，我们需要安装对应的loader去处理。

安装对应的loader

npm install url-loader file-loader --save-dev

在webpack中配置使用：

module: {
  rules: [
    { 
      test: /\.jpg|png|gif|jpeg|ttf|eot|woff|woff2|svg$/, 
      use: 'url-loader?limit=88888&name=img/[name].[ext]'
    }
  ]
}

或者这样配置：

module: {
  rules: [
    { 
      test: /\.jpg|png|gif|jpeg|ttf|eot|woff|woff2|svg$/, 
      use: 'url-loader',
      options: {
					limit: 10000,
        	name: 'img/[name].[hash:7].[ext]'
      }
    }
  ]
}

配置说明：

1. ?之后的是loader的参数项
2. limit 参数用来指定图片的大小，单位是字节(byte)，当小于 limit设置的图片大小的时候，图片会被转为 base64 编码的图片，否则url-loader会自动调用file-loader进行处理（复制到设置的目录中），参数也会直接传给file-loader
3. 除了limit 参数项之外，常见的参数项还有：
   • name：输出的文件名规则，如果不添加这个参数，输出的就是默认值：文件哈希；加上[path]表示输出文件的相对路径与当前文件相对路径相同，加上[name].[ext]则表示输出文件的名字和扩展名与当前相同。加上[path]这个参数后，打包后文件中引用文件的路径也会加上这个相对路径。其它的通配符还有[hash:7]、[hash] 等。
   • outputPath：表示输出文件路径前缀。图片经过url-loader打包都会打包到指定的输出文件夹下。但是我们可以指定图片在输出文件夹下的路径。比如outputPath=img/，图片被打包时，就会在输出文件夹下新建（如果没有）一个名为img的文件夹，把图片放到里面。
   • publicPath：表示打包文件中引用文件的路径前缀，如果你的图片存放在CDN上，那么你上线时可以加上这个参数，值为CDN地址，这样就可以让项目上线后的资源引用路径指向CDN了

1.4 配置打包JS高级语法

安装babel-loader和babel-core，由于ES6+语法每年都在更新，因此，我们需要最新的规则去转换，可以使用babel-preset-env解决这个问题。当然用惯了chrome浏览器的朋友可能会觉得，常见的ES6+的语法他都支持了啊，为啥还要转换，有这问题的人一定是没考虑过IE使用者的感受。

安装相关loader和包

# 安装babel转换器包
npm install babel-loader @babel/core @babel/runtime --save-dev
# 安装babel语法插件包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties --save-dev

对babel进行配置

在项目根目录中，创建 babel 配置文件 babel.config.js (或者.babelrc)并初始化基本配置如下:

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}

在webpack中配置使用：

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

配置说明：

exclude 表示排除 node_modules 文件夹中的文件，即：node_modules 文件夹中的代码不被编译。

完整的配置类似这样：

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        page1: ['./src/js/1.js', './src/js/2.js'],
        page2: './src/js/3.js'
    },

    output: {
        path: path.resolve(__dirname, 'dist'),
        //输出的打包文件可以加个目录
        filename: 'js/[hash]-[name].b.js'
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ],

    // 这里配置loader规则
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            {
                test: /\.jpg|png|gif|jpeg|ttf|eot|woff|woff2|svg$/,
                use: 'url-loader?limit=8888&name=img/[name].[ext]'
            },
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
        ]
    }
};

配置完以后，我们写的高级语法会被转换成比较成熟的语法，解决部分浏览器兼容性问题，比如您可以写个箭头函数看看会被转成什么样子。

文档参考：

https://webpack.js.org/loaders/babel-loader

https://www.webpackjs.com/loaders/babel-loader/

webpack配置起来比较复杂，比较难记，不过好在是各种框架和库都依托webpack做的有自己的模板，各种配置都帮我们配置好了，到时候用到框架的时候并不需要这么繁琐的配置

更多webpack内容可参考：https://www.webpackjs.com/concepts/loaders/