1.为什么要处理样式

Webpack 本身是不能识别样式资源的，包括字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源。

2.如何处理

2.1处理css样式

1. 下载包

npm i css-loader style-loader -D

#2. 功能介绍

css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容

此时样式就会以 Style 标签的形式在页面上生效

#3. 配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

然后准备好css文件，并且在main.js中引用

// 引入 Css 资源，Webpack才会对其打包
import "./css/index.css";

在public文件夹下创建index.html文件，并且加入script便签来引入打包后的js文件，在控制台输入npx webpack ，并运行

npx webpack

在打包后的js文件中，可以看到css的痕迹

最后可以看到结果，运行生效

2.2 处理Less

也是相同的思路，首先下载包

npm i less-loader -D

less-loader：负责将 Less 文件编译成 Css 文件

紧接着就是，在webpack.config.js 配置文件中找到加载器module中的rules，添加配置

然后把less文件添加好，并且在main.js中导入

最后运行

npx webpack

less文件对第二个盒子产生了效果

2.3处理Sass、Scss、Styl

和上面一样，都是同样的操作流程，相同的部分不再赘述。 Sass 、Scss的包要下载2个

npm i sass-loader sass -D

sass-loader：负责将 Sass 文件编译成 css 文件
sass：sass-loader 依赖 sass 进行编译

【webpack】3.webpack处理样式资源