从 0 配置 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'],
            },
        ]
}

5. 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()
    })
}