欢迎光临
我们一直在努力

webpack 核心概念loader

loader 简介

loader是一种打包方案。webpack默认只能识别和打包JS文件,对于诸如CSS/Sass/字体图标等其他文件需要借助loader。

loader 配置

我们可以在webpack.config.js中进行loader配置。

const path = require('path')
moudle.exports = {
    mode: 'production',
    entry: './index.js',
    module: {
        rules: [{
            test: /\.(png|jpg|gif)$/,
            use: {
                loader: 'file-loader'
            }
        }]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist')
    }
}

当然我们在使用file-loader前要先下载它:

npm install file-loader -D

前面的file-loader用于配置匹配图片文件,假设我们有一个图片并在index.js引入:

import imgHash from './img.png'
console.log(imgHash)

这时我们会在控制台看到打印结果是一段哈希值.jpg

51509b345hbf2c4af5f16de08ado246f.jpg

这就表明file-loader成功的打包了这张图片,后面我们通过其他方法就可以自动引入这张图片了。(事实上,这里打印出来的是一个路径)

小记

当webpack遇到非JS文件时,会去module的rules中查找是否存在匹配规则,成功匹配后,会使用对应的loader。loader会把该模块打包到出口对应的目录下。

file-loader 配置

通过设置options可以对loader进行配置:

{
    loader: 'file-loader',
    options: {
        // [name] => 原文件的名字 
        // [hash] => 随机生成的hash值
        // [ext] =>  原文件的拓展名
        name:'[name]_[hash].[ext]'
        // outputPath 可以配置打包目标路径
        // 下面将会把图片打包到images目录下
        outputPath: 'images/'
    }
}

url-loader 配置

对于图片进行打包,同样可以使用url-loader,但要注意两者的区别。

{
    loader: 'url-loader',
    options: {
        name: '[name]_[hash].[ext]',
        outputPath: 'images/'
        limit: 1024 // 1024字节=> 1024kb
    }
}

区别在于,要打包的url-loader有一个limit选项,如上面的配置,当图片小于1024kb时,会将图片转为Base64格式打包到bundle.js文件中,否则会和file-loader使用相同方式打包。

css-loader 配置

首先引入css-loader和style-loader模块

npm install css-loader style-loader -D

在moudule中配置

{
    test: /\.css$/,
    // 下面的loader,从右向左解析
    use: ['style-loader','css-loader']
}

在index.js中我们可以直接import引入css文件

import './index.css'

为什么引入css-loader时要引入style-loader呢?其实是两者的功能不一样:

  • css-loader 可以将多个css文件合并为一个,形成一个css文件
  • style-loader 会把整合好的css文件挂在到head标签中

如果想使用scss预编译的话需要安新loader,还要注意loader的加载顺序为从右向左,不然可能出错。

sass-loader 配置

sass-loader 安装

npm install sass-loader node-sass --save-dev

注意:安装sass-loader时需要安装node-sass

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

模块的加载顺序是从右向左的,所以一定要把sass-loader放在后面,这样才能确保css-loader起作用前,scss文件已经被转成了css文件。

postcss-loader 配置

post-loader用于添加厂商前缀

npm i -D postcss-loader autoprefixer

注意需要同时安装插件autoprefixer,并在webpack.config.js相同目录下添加配置文件postcss.config.js

// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')({
            overrideBrowserslist: [
                "Android 4.1",
                "iOS 7.1",
                "Chrome > 31",
                "ff > 31",
                "ie >= 8"
            ]
        })
    ]
};

当我们引入时,就可以这么写:

{
    test: /\.scss$/,
    use: ['style-loader','css-loader','sass-loader','postcss-loader']
}

当我们在一个scss中导入另一个scss文件时,打包会报错,我们可以添加下面的配置:

{
    test: /\.scss$/,
    use: ['style-loader',
        {
            loader: 'css-loader',
            options:{
                importLoaders:2,
                modules : true
            }
        },
        'sass-loader',
        'postcss-loader'
    ]
}
  • importLoaders:2 用于解决scss中引入scss出现错误
  • modules: true 可以解决样式跨文件作用的问题

图标字体

对于字体图标打包,我们可以使用file-loader完成

{
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: [
        'file-loader'
    ]
}
赞(0) 打赏
未经允许不得转载:散人研 » webpack 核心概念loader
分享到: 更多 (0)

如果文章有不解或描述错误的地方,欢迎在评论区提问或指正!

评论 抢沙发

5 + 2 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏