看官网对webpack的理解

loader介绍

webpack只能识别javascript和json文件，所以需要loader将scss或者typescript转成js文件

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 “load(加载)” 模块时预处理文件

配置方式
module.rules 允许你在 webpack 配置中指定多个 loader。这种方式是展示 loader 的一种简明方式，并且有助于使代码变得简洁和易于维护。同时让你对各个 loader 有个全局概览：

loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)。在下面的示例中，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。查看 loader 功能章节，了解有关 loader 顺序的更多信息。

module.exports = {
    
    
  module: {
    
    
    rules: [
      {
    
    
        test: /\.css$/,
        use: [
          // [style-loader](/loaders/style-loader)
          {
    
     loader: 'style-loader' },
          // [css-loader](/loaders/css-loader)
          {
    
    
            loader: 'css-loader',
            options: {
    
    
              modules: true
            }
          },
          // [sass-loader](/loaders/sass-loader)
          {
    
     loader: 'sass-loader' }
        ]
      }
    ]
  }

可以通过 loader 的预处理函数，为 JavaScript 生态系统提供更多能力。用户现在可以更加灵活地引入细粒度逻辑，例如：压缩、打包、语言转译（或编译）和更多其他特性。

通过 loader，webpack 可以支持以各种语言和预处理器语法编写的模块。loader 描述了 webpack 如何处理非 JavaScript 模块，并且在 bundle 中引入这些_依赖_。 webpack 社区已经为各种流行语言和语言处理器创建了 loader，包括：

CoffeeScript
TypeScript
ESNext (Babel)
Sass
Less
Stylus
其实还有很多！总的来说，webpack 提供了可定制的、强大和丰富的 API，允许在任何技术栈中使用 webpack，同时在开发、测试和生产环境下的工作流程中做到无侵入性

看官网对webpack的理解

猜你喜欢