Webpack 配置文件和资源加载器 (Sass、文件) - Loader

2023-11-22 09:31:57

Webpack 配置文件

Webpack配置文件是一个JSON文件，用来配置Webpack的构建过程。配置文件通常命名为“webpack.config.js”，放在项目根目录下。配置文件中，可以指定Webpack的构建模式、入口文件、输出目录等。

Webpack 资源加载器

Webpack资源加载器可以将非JavaScript文件（例如CSS、图像、字体等）导入到Webpack构建过程中。Webpack支持多种资源加载器，每种加载器负责处理一种类型的文件。例如，css-loader负责处理CSS文件，file-loader负责处理文件。

使用 Sass 预处理器

Sass是一种CSS预处理器，可以使CSS代码更易于编写和维护。Webpack可以使用Sass加载器来将Sass文件编译成CSS文件。Sass加载器的用法如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.sass$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
};

使用文件加载器

文件加载器可以将文件导入到Webpack构建过程中。文件加载器的用法如下：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/'
            }
          }
        ]
      }
    ]
  }
};