Webpack--02 处理样式资源

webpack 本身是不能识别样式资源的，所以我们需要借助loader来帮助 webpack 解析样式资源。

找loader：

• 去 webpack 官方文档中找对应的 loader ，然后使用
• 去社区 GIthub 中搜寻

1 . 处理 css 资源：

• 先去官方文档中找对应的 loader ，然后下载包

  • style-loader ： 负责将 css 文件编译成 webpack 能识别的 comment.js 模块
  • css-loader: 会动态创建一个 style 标签，里面放置 webpack 中 css 模块内容。

• 然后在 webpack.config.js 配置文件中进行配置。

• 然后运行 webpack

- 配置好文件（入口、出口后就不需要后面的），直接 npx webpack就行

注意： 要将需要打包的资源引入到入口文件中 ，webpack 才会进行打包！！！

2 . 处理 less 资源（同上）

• 需要的loader

  • style-loader
  • css-loader
  • less-loader : 将less文件编译成 css 文件

3 . 处理 Sass / Scss 资源（同上）

• 需要的loader

  • style-loader
  • css-loader
  • sass-loader : 将sass文件编译成 css 文件

4 . 处理 stylus 资源（同上）

• 需要的loader

  • style-loader
  • css-loader
  • stylus-loader : 将stylus文件编译成 css 文件