Webpack依赖 - 技术栈

Webpack到底怎么对我们的项目进行打包捏？

在webpack处理应用程序时，会根据命令或者配置文件找到入口文件

从入口开始，会生成一个依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（.js、css文件、图片、字体等）

遍历图结构，打包一个个模块（根据文件的不同使用不同的loader解析）

css-loader的使用

我们需要一个loader来加载css文件，但是loader是什么呢？

loader可以用来对模块的源代码进行转换

可以将css文件看成是一个模块，是通过import来加载这个模块的

在加载这个模块的时候，webpack不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能

对于加载css文件来说，需要一个可以读取css文件的loader

这个loader最常用的是css-loader

css-loader的使用方案

如何使用这个loader来加载css文件呢？

三种方式：

内联方式

CLI方式（webpack5中不再使用）

配置方式

css-loader的安装：

bash 复制代码

npm install css-loader -D

内联方式：

内联方式使用较少，因为不方便管理

在引入的样式前加上使用的loader并且使用！分割

javascript 复制代码

import "css-loader!../css/style.css";

CLI方式实际应用中也比较少使用，不方便管理

loader配置方式

配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息

module.rules允许我们配置多个loader，因为我们也会继续使用其他的loader来完成其他文件的加载

这种方式可以更好的表示loader的配置，也方便后期的维护，让你对各个loader有一个全局的概览

module.rules的配置：

rules属性对应的值是一个数组

数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性

test属性：用于对resource进行匹配的，通常会设置成正则表达式

use：对应的值是一个数组

useEntry是一个对象，可以通过对象的属性来设置一些其他属性

loader：必须有一个loader属性，对应值是一个字符串

options：可选的属性，值是一个字符串或者对象，值会被传入到loader中

query：目前已经使用options来替代

传递字符串是loader属性的简写方式

loader属性：Rule.use:[{loader}]的简写

创建配置文件wk.config.js：

javascript 复制代码

const path = require('path');

module.exports = {
  // 设置打包的模式
  mode: 'development',
  
  // 设置入口文件
  entry: './src/index.js',
  
  // 设置输出
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  // 配置模块规则
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

接下来进行安装（css-loader负责将.css文件进行解析，并不会将解析之后的css插入到页面中，如果再插入style中，那么还需要另外一个loader，就是style-loader）：

javascript 复制代码

npm install style-loader

安装完之后就可以运行npm run build进行打包了

use中多个Loader的使用顺序是从后往前

如果loader只有一个的话可以进行简写：

javascript 复制代码

loader:"css-loader"

处理less文件

javascript 复制代码

const path = require('path');

module.exports = {
  // 设置打包的模式
  mode: 'development',
  
  // 设置入口文件
  entry: './src/index.js',
  
  // 设置输出
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  // 配置模块规则
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
            'style-loader', 'css-loader'
        ]
      },{
        test: /\.less$/,
        use:[ "style-loader","css-loader","less-loader"]
      }
    ]
  }
};

处理less文件的配置文件是这样写的

收工入眠