Webpack - 从 0 配置 webpack（三） - 《前端笔记本》

写在前面
1. 引入 scss
2. 引入 less
3. 引入 stylus
4. 引入图片
引入 svg
6. webpack 懒加载

写在前面

webpack 的 loader 和 plugin 太多了，在项目开发过程中可以根据功能需要去 webpack 官网搜索配置。

这里只介绍自己目前用到的，以后会继续补充。

1. 引入 scss

scss 是 sass 语言的另个语法，详细可见 Sass简介

引入 scss 的方法详细见官网 sass-loader 或 github

sass-loader 的内部实现肯定依赖 sass ，所以安装 sass-loader 的同时也要安装 sass

安装 sass 和 sass-loader

yarn add sass-loader sass --dev   // 使用默认配置就行，当前默认配置就是 dart-sass
yarn add sass-loader dart-sass --dev  // 使用 dart-sass 时要有一些配置
yarn add sass-loader node-sass --dev  //不推荐使用 node-sass，会有一些问题

使用 sass 的配置信息：

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
};

使用 dart-sass 的配置信息，node-sass 同理

module: {
    rules: [
    {
        test: /\.s[ac]ss$/i,
        use: [
            'style-loader',
            'css-loader',
            {
                loader: 'sass-loader',
                options: {
                    implementation: require('dart-sass'),
                },
            },
        ],
    },
],

2. 引入 less

less-loader 的内部实现肯定依赖 less ，所以安装 less-loader 的同时也要安装 less

安装 less 和 less-loader

yarn add less less-loader --dev

配置信息

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

3. 引入 stylus

安装 stylus 和 stylus-loader

yarn add stylus stylus-loader --dev

配置信息

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

通过上述三种 css 语言的变种的引入可以看出，都是需要先将其转化为 css，再由 css 转化为 <style> 或抽离成 css 文件。

4. 引入图片

由于我们使用 webpack 开发项目时，代码编辑目录和运行代码目录是两个完全独立的文件夹，因此，在使用图片资源时，不能直接使用相对路径，会出错。需要对图片进行转化，得到其在打包后的真正相对路径和带有 hash 的文件名。

file-loader 的作用就是将文件变成文件路径。

安装 file-loader

yarn add file-loader --dev

配置信息

module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: ['file-loader'],
            },
        ]
}

引入 svg

svg 图片与 jep/png 等普通的图片资源存在一定的差别。当你下载一个 svg 图片在编辑器中打开看的时候会发现其是一段 xml 语言的代码。并且 svg 图片是矢量图，怎么放大都不会失真。jep/png等是位图，放大会失真。

因此 svg 图片在前端工程中有着不同于普通图片的使用方式。

直接使用 svg 代码

在工程中直接使用 svg 标签嵌入 svg 图片。

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" fill="red" />
  <circle cx="150" cy="100" r="80" fill="green" />
  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</svg>

把 svg 当普通图片使用

使用 file-loader 或者 url-loader 加载 svg 图片，将 svg 图片当作普通图片使用 img 标签使用。

制作 svg 雪碧图

还有一种使用 svg 图片的方法是使用 svg + use 的方式，像 iconfont 里使用 svg 图标的方式一样。示例如下：

<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

这种使用方式的原理是将全部的 svg 图片放到一个 svg 中，以 symbol 标签的方式进行定位，在使用的时候直接传递 symbol 标签对应的 id 名字即可渲染对应的图标。

这种方式用到的相关 loader 为 svg-sprite-loader 和 svgo-loader。

webpack 的配置如下：

module: {
    rules: [
        {
            test: /\.svg$/,
            use: [
                {
                    loader: "svg-sprite-loader",
                    options: {
                        symbolId: "icon-[name]" // 指定 symbol 的 id，在使用时的名字
                    }
                }
            ]
        }
    ]
}

使用 svg-sprite-loader 后我们再 import svg 图片的时候，就不再像 file-loader 一样是一个图片路径了，而是一个 BrowserSpriteSymbol 对象。

通常情况下，我们下载下来的 svg 图片自带颜色，外部无法再给其指定颜色，这是因为其 svg 标签里的 path 带有 fill 属性，写死了颜色。如果我们想通过外部改变 svg 图片的颜色，需要将 fill 字段去掉后使用 css 的 fill 属性设置颜色。

svgo-loader 可以对 svg 图片的源代码进行处理，比如删除不必要的属性，优化其大小。因此可以用 svgo-loader 来对 svg 图片统一去除 fill 属性进行去色处理。

svgo-loader 使用 svgo 工具处理 svg 图片。

module: {
    rules: [
        {
            test: /\.svg$/,
            use: [
                {
                    loader: "svg-sprite-loader",
                    options: {
                        symbolId: "icon-[name]"
                    }
                },
                {
                    loader: "svgo-loader",
                    options: {
                        plugins: [
                            {
                                name: "removeAttrs",
                                params: {
                                    attrs: "fill"
                                }
                            }
                        ]
                    }
                }
            ]
        }
    ]
}

这样一来，所有引入的 svg 就没有颜色了，通过添加类名，使用 css 的 fill 属性指定颜色。如下：

<svg class="icon">
    <use xlink:href="#icon-test"></use>
</svg>
<style>
    .icon {
      width: 2em;
      height: 2em;
      fill: red;
    }
</style>

如果想更进一步封装组件和批量加载，详见封装 svg-icon 组件

6. webpack 懒加载

在 webpack 中，模块的导入导出使用的是 import 和 export。但是如果将所有的模块在一开始就全都 import 进来，会大大降级页面的加载速度。因此懒加载就是在模块需要的时候才加载出来，使用的是 import()函数。

import() 函数接收一个加载模块的路径，返回一个 Promise 对象。

lazy.js

export default function () {
    console.log('我是懒加载')
}

index.js

button.onclick = ()=>{
    import('./lazy.js').then((module)=>{
        module.default()
    })
}