- 找到 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配置生效。