dva重新配置loader的方法，以图片配置为例。

找到 node_modules\af-webpack\lib\getConfig.js 文件，我们查看里面module配置代码，可以发现图片loader使用的是url-loader并options.limit 已经配置为10000，且输出目录已确定。

{
    exclude: [/\.(html|ejs)$/, /\.json$/, /\.(js|jsx|ts|tsx)$/, /\.(css|less|scss|sass)$/, ...(opts.urlLoaderExcludes || [])],
    loader: require.resolve('url-loader'),
    options: {
      limit: 10000,
      name: 'static/[name].[hash:8].[ext]'
    }
}
复制代码

通过图片loader 代码

exclude: [/\.(html|ejs)$/, /\.json$/, /\.(js|jsx|ts|tsx)$/, /\.(css|less|scss|sass)$/, ...(opts.urlLoaderExcludes || [])],
复制代码

我们得出配置urlLoaderExcludes 可以先将我们要重新配置的文件正则排除。 .webpackrc.js

urlLoaderExcludes: [/\.(png|jpe?g|gif|svg)$/]
复制代码

接着我们需要重新添加图片载入 loader, 可以选择 file-loader url-loader，但是用什么健来配置呢，我们暂且使用如下配置。

rules: [
        {
            test: /\.(png|jpe?g|gif|svg)$/,
            loader: 'url-loader',
            options: {
                limit: 1024,
                name: 'imgs/[name].[ext]'
            }
        }
    ]
复制代码

或者不论大小都不进行base64打包

rules: [
        {
            test: /\.(png|jpe?g|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: 'imgs/[name].[ext]'
            }
        }
    ]
复制代码

我们的目的是要将rules中的配置项合并到getConfig.js文件的config 配置中。所以getConfig.js 代码中的config对象应作如下修改：

 }), {
        test: /\.html$/,
        loader: require.resolve('file-loader'),
        options: {
          name: '[name].[ext]'
        }
      }, ...cssRules]
复制代码

---->

 }), {
        test: /\.html$/,
        loader: require.resolve('file-loader'),
        options: {
          name: '[name].[ext]'
        }
      }, ...cssRules, ...opts.rules]
复制代码

保存后我们试着启动dev服务，发现控制台报如下错误：

Watch handler failed, since Configuration item rules is not valid, please remove it.
复制代码

也就是说rules 是未定义在配置map中的项。所以我们要添加进去。

通过控制台的调用栈，我们定位到 node_modules\af-webpack\lib\getUserConfig\index.js 这个文件抛出了rules 为无效配置项的异常。

var _getPlugins = _interopRequireDefault(require("./getPlugins"));
复制代码

通过上面配置引入代码，我们再次定位到 node_modules\af-webpack\lib\getUserConfig\getPlugins.js 文件。

const pluginsMap = (0, _requireindex.default)((0, _path.join)(__dirname, './configs'));
复制代码

以上代码告诉我们，map 产生是通过读取 ./configs 目录下文件名得来。查看 configs 目录文件后发现，里面确实没有配置rules 或相同功能的文件。我们手动加入一个rules.js 文件 ./configs/rules.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = _default;

var _assert = _interopRequireDefault(require("assert"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _default() {
  return {
    name: 'rules',

    validate(val) {
      (0, _assert.default)(Array.isArray(val),  `The rules config must be Array, but got ${val}`);
    }

  };
}
复制代码

保存，再次尝试启动服务，服务启动成功，图片loader配置生效。

dva重新配置loader的方法，以图片配置为例。

猜你喜欢