在 Skeleton 组件中引用图片资源问题

[xiaoiver]

问题描述

在 Skeleton 组件中引用的图片，不会被 url-loader 处理，最终输出。
例如引用了一张 jpg 图片：

// Skeleton.vue
<template>
    <div class="skeleton-wrapper">
          <img src="../assets/images/skeleton-logo.jpg" class="skeleton-logo">

配合 url-loader

// webpack.config.js
{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
    }
}

构建之后发现最终产物中并没有包含重命名之后的图片。

问题原因

插件在运行过程中，创建了一个新的 webpack 构建流程，这也是需要用户传入一个给 Skeleton 使用的 webpack 配置对象的原因。

但是这样做的问题是和已有的构建流程隔离，在新流程中 url-loader 已经处理了图片并调用了 emitFile 准备输出，但是已有的 webpack 流程并不知道。

解决办法

在插件运行过程中创建一个 childCompiler 继承已有的上下文而不是一个全新的 webpack compiler。

const childCompiler = compilation.createChildCompiler('vue-skeleton-webpack-plugin-compiler', outputOptions);

childCompiler.context = context;
new LibraryTemplatePlugin(undefined, 'commonjs2').apply(childCompiler);
new NodeTargetPlugin().apply(childCompiler);
new SingleEntryPlugin(context, serverWebpackConfig.entry, undefined).apply(childCompiler);
new LoaderTargetPlugin('node').apply(childCompiler);
new ExternalsPlugin('commonjs2', serverWebpackConfig.externals).apply(childCompiler);
new ExtractTextPlugin({
    filename: outputCssPath
}).apply(childCompiler);

这样不光能解决这个 Bug，由于能共享已有的 webpack 构建上下文，整个插件的配置项也不需要再传一个完整的 webpack 配置对象了。