前言

我们之前的文章说道devServer和打包,现在我们还不支持css,url,file的loader

css-loader,style-loader,sass-loader

npm install --save-dev css-loader style-loader sass sass-loader

修改配置文件

// webpack.config.js

rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
        include: basePath,
      },
      {
        test: /\.css$/i,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
            }
          },
        ]
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader',
            options: {
              modules: true,
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
    ],

资源加载

注意:webpack 5已经不需要url-loader,raw-loader,file-loader了

在 webpack 5 之前,通常使用:

raw-loader将文件作为字符串导入
url-loader将文件作为数据 URI 内联到包中
file-loader将文件发送到输出目录

Asset Modules 类型通过添加 4 种新的模块类型来替换所有这些加载器:
asset/resource发出一个单独的文件并导出 URL。以前可以通过使用file-loader.
asset/inline导出资产的数据 URI。以前可以通过使用url-loader.
asset/source导出资产的源代码。以前可以通过使用raw-loader.
asset自动在导出数据 URI 和发出单独文件之间进行选择。以前可以通过使用url-loader资产大小限制来实现。
在 webpack 5 中使用旧的资产加载器(即file-loader/ url-loader/ raw-loader)和资产模块时,您可能希望阻止资产模块再次处理您的资产,因为这会导致资产重复。这可以通过将资产的模块类型设置为 来完成'javascript/auto'。

修改配置文件新增

    {
        test: /\.(png|jpg|jpeg|gif|svg|ttf|woff|woff2)$/i,
        type: 'asset/resource'
     },
     {
        test: /\.svg/,
        type: 'asset/inline'
     },

配置alias


resolve: {
    alias: {
      '@': basePath,
    },
  },