现代互联网，资源摩多摩多！Webpack 其之三

扩展CSS loader

既然已经加载了 CSS，就拿 CSS 的三个变种试试手吧

以下三个变种，都支持默认的 CSS 语法，也就是说直接拿一个 CSS 去改名，就是合法的三种文件

scss

在官方文档的 loader 中找到 sass-loader 章节

文档要求我们安装，那就先安装一下

1	npm install sass-loader dart-sass webpack --save-dev

注意，文档要求我们安装的是 node-sass，但是这个已经过时了，应该安装更新的 dart-sass

安装完成后，照抄一下示例

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader" // 将 JS 字符串生成为 style 节点
            }, {
                loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
            }, {
                loader: "sass-loader" // 将 Sass 编译成 CSS
            }]
        }]
    }
};

结合我们在加载 CSS 时候的经验，可以看出 test 是检验文件后缀是否是 .scss

然后按顺序从后向前调用 loader

less 和 stylus

一模一样.jpg

先安装

1 2	npm install --save-dev less-loader less npm install --save-dev stylus-loader stylus

然后引入

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // 将 JS 字符串生成为 style 节点
            }, {
                loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
            }, {
                loader: "less-loader" // 将 Less 编译成 CSS
            }]
        }]
    }
};

module.exports = {
    ...
    module: {
        rules: [{
            test: /\.styl$/,
            use: [{
                loader: "style-loader" // 将 JS 字符串生成为 style 节点
            }, {
                loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
            }, {
                loader: "stylus-loader" // 将 Stylus 编译成 CSS
            }]
        }]
    }
};

完事了，是不是特别简单？

加载图片

显然图片也是重要的一环

从上面的 loader 示例中，可以发现 loader 的格式

module:{
    rules:[{
        test: [regex], // 通过正则表达式识别后缀
        use: [{
            loader: "xxx-loader" // 对应的 loader
        }]
    }]
}

然后在 js 文件中 import 即可引入

那我们可以试着编写一下图片的 loader 格式

假设有一张 image.png，我们可以推测 loader 是这样的配置

module:{
    rules:[{
        test: /\.png$/, // 通过正则表达式识别后缀
        use: [{
            loader: "image-loader" // 对应的 loader
        }]
    }]
}

虽然 image-loader 看起来很合理，但是告诉你个坏消息：没有这个 loader

那怎么办呢？用 file-loader 就可以了

所以 loader 配置就是

module:{
    rules:[{
        test: /\.png$/, // 通过正则表达式识别后缀
        use: [{
            loader: "file-loader" // 对应的 loader
        }]
    }]
}

现在要怎么插入到页面呢？

首先要知道这时候你在 js 中引入的话，获得了什么呢？是二进制码还是？

答案是这个图片的一个相对路径

然后通过 img 标签的 src 进行插入即可

import url from './image.png'

const img = document.createElement('img')
img.src = url
document.body.appendChild(img)

其余图片也可以使用类似的方法

什么？你说还有其它文件怎么办？看文档啊（

懒加载

有时候并不想图片什么的一上来就加载，可不可以控制呢？

答案是可以

我们注意到，loader 处理后的文件，必须在 import 处理后才可以正常使用，那我们动态延后 import 不就可以了？

容易想到通过一个 button 之类的元素，来触发某个事件，然后异步加载

用什么可以异步加载呢？可以使用 js 的 import() 方法来动态加载一个模块，这个方法返回一个 Promise，其成功回调返回一个模块，需要通过 module.default 才能取得其默认值

那么假设在页面上有一个 button#btn，容易得到以下代码

const btn = document.getElementById('btn')
btn.onclick = () => {
    import('./image.png').then(module => {
        const url = module.default
        const img = document.createElement('img')
        img.src = url
        document.body.appendChild(img)
    })
}

此时就可以实现页面上图片的懒加载

下集预告

file 协议也太野蛮了，我要 http 协议

点我查看下集

感谢阅读