Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
xiaoiver opened this issue May 14, 2018 · 0 comments
Closed

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

xiaoiver opened this issue May 14, 2018 · 0 comments
Assignees
Labels

Comments

@xiaoiver
Copy link
Collaborator

问题描述

在 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 配置对象了。

@xiaoiver xiaoiver added the bug label May 14, 2018
@xiaoiver xiaoiver self-assigned this May 14, 2018
xiaoiver added a commit that referenced this issue May 14, 2018
@xiaoiver xiaoiver mentioned this issue May 14, 2018
kenshinzzz added a commit to kenshinzzz/vue-skeleton-webpack-plugin that referenced this issue Jul 3, 2018
HtmlWebpackPlugin如果指定了chunks参数,在htmlPluginData.assets.chunks将获取不到,只能拿到空数组。
需要从htmlPluginData.plugin.options.chunks获取。
当然如果配置不正确依然会有报错。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant