Webpack less-loader 在生产构建中缺少基本路径答案

【问题标题】：Webpack less-loader Missing Base Path on Production BuildWebpack less-loader 在生产构建中缺少基本路径
【发布时间】：2017-06-08 20:39:44
【问题描述】：

我有一个使用 webpack 的 vue-js 应用程序。在开发和测试环境中一切正常，但我无法将其构建用于生产。

我在 LESS 文件中有背景图片。图像文件位于/static。（我不确定这是否符合犹太教规，或者它们是否应该在 src/assets 旁边。）

无论如何，当 LESS 有这样的东西时：

 background-url: url("/static/img/foobar/my-image.svg")

那么编译后的 CSS 会有相同的 url

 background-url: url("/static/img/foobar/my-image.svg")

当浏览器加载程序时，它找不到那个 imgate 文件。浏览器正在尝试在此处查找文件：

file:///static/img/foobar/my-image.svg

任何人都可以推荐一种在为生产环境构建应用程序时添加绝对路径的方法吗？

【问题讨论】：

您能否提供您的 Webpack 配置以便我们进行调查？

标签： javascript webpack vue.js

【解决方案1】：

您的静态资产是否位于我们项目目录之外的 /static 中？否则我不明白为什么您的浏览器会尝试从 file:///static/img/foobar/my-image.svg 请求它

无论如何，您的静态资产应该是您的存储库/项目的一部分。它们不需要在 src 目录中，项目根目录中的 /static 文件夹就可以了。

当你编译你的应用程序时——比如说放到一个 dist 文件夹中——你也应该将图像复制到那个 dist 文件夹中。在我的应用程序中，我使用 copy-webpack-plugin 来完成该任务（我的图像在 ./public/assets/img/.. 中，我将它们引用为 /assets/img/..）

    const CopyWebpackPlugin = require('copy-webpack-plugin');
    ...

    plugins: [
    ...
    /** copy all files from the public folder to the compilation root */
    new CopyWebpackPlugin([{
        from: 'public',
        to  : ''
    }]),
    ...

您还应该确保为静态资产准备好文件加载器。我是这样使用的：

  {
       test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\??\#?v=[.0-9]+)?$/,
       use : 'file-loader?name=assets/[name].[hash].[ext]'
  }

希望这能帮助您解决问题。

【讨论】：

是的，static 目录位于项目的根目录。我也在使用 CopyWebpackPlugin。资产文件可以轻松到达所需的位置。问题是 LESS 中的背景图片的 URL 没有正确生成。
你不是说编译后的css有相同的url：background-url: url("/static/img/foobar/my-image.svg")吗？！当这是编译后的 css 中的引用时，它是正确的。

【解决方案2】：

我最终将图像移动到 assets/img，然后更新我的 webpack 配置以使用 publicPath 指定目录。这是它最终的样子：

      {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'file-loader',
    include: [resolve('src')],
    options: {
      limit: 10000,
      name: '/[name].[hash:7].[ext]',
      publicPath: path.resolve(__dirname, 'app')
    }

【讨论】：