版本

mini-css-extract-plugin@1.6.2

loadder 源码第 192 行

    const publicPath = typeof options.publicPath === 'string' ? options.publicPath === 'auto' ? '' : options.publicPath === '' || options.publicPath.endsWith('/') ? options.publicPath : `${options.publicPath}/` : typeof options.publicPath === 'function' ? options.publicPath(this.resourcePath, this.rootContext) : this._compilation.outputOptions.publicPath === 'auto' ? '' : this._compilation.outputOptions.publicPath;

格式化一下

const options = {};
const publicPath =
  typeof options.publicPath === 'string'
    ? options.publicPath === 'auto'
      ? ''
      : options.publicPath === '' || options.publicPath.endsWith('/')
      ? options.publicPath
      : `${options.publicPath}/`
    : typeof options.publicPath === 'function'
    ? options.publicPath(this.resourcePath, this.rootContext)
    : this._compilation.outputOptions.publicPath === 'auto'
    ? ''
    : this._compilation.outputOptions.publicPath;
console.log('publicPath::', publicPath);

第 220-224 行代码

    const childFilename = '*';
    const outputOptions = {
        filename: childFilename,
        publicPath
    };

loader 参数实际上只有一个,可以转换一下判断逻辑

let publicPath;
if (typeof options.publicPath === 'string') {
  if (options.publicPath === 'auto') {
    publicPath = '';
  } else if (options.publicPath === '' || options.publicPath.endsWith('/')) {
    publicPath = options.publicPath;
  } else {
    publicPath = `${options.publicPath}/`;
  }
} else if (typeof options.publicPath === 'function') {
  options.publicPath(this.resourcePath, this.rootContext);
} else if (this._compilation.outputOptions.publicPath === 'auto') {
  publicPath = '';
} else {
  publicPath = this._compilation.outputOptions.publicPath;
}

这样就清晰了,默认是判断参数类型,最后才是使用 webpack 的全局编译选项,要自己勤动手,不要被别人左右思想,要探索别人的代码逻辑,就要从头到尾的分析

标签: 代码, 编译, log, filename, , let, this, 类型, else, const, css, console, 全局, options, publicpath, auto', typeof

知识共享许可协议
本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。

评论暂时关闭了,可以过段时间再试

  • 目录