Question

我正在将项目部署到surge.sh

surge.sh需要一个200.html文件来启用单页应用（子）页面的路由

我的文件如下：

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="gs.1.0.0.css">
  </head>
  <body>
    <script src="gs.1.0.0.js"></script>
  </body>
</html>

当我使用

加载它时

import twohundredPage from 'copy!./200.html'

或

import twohundredPage from 'file?name=200.html!./200.html'

生成的文件如下所示：

module.exports = __webpack_public_path__ + "9802140cc82d486c4b933fc3da03da99.html"

并且无法在surge.sh上运行，这是一个cdn

如何在不更改文件内容的情况下加载文件？换句话说：只是复制它？

编辑（2015.06.01）

我找不到问题的解决方案。

但我设法像这样解决了我的问题：

通过不主播浪涌但是在hapi.js的虚拟服务器上我不再需要复制200.html文件（并且可以配置hapi.js让我的index.html，即它的脚本处理404的）。无论如何，这是一件好事，因为来自digitalocean.com的虚拟服务器的响应时间为20毫秒（在我的情况下），而不是300毫秒的喘振时间.sh！

使用react-favicon（我的项目使用React）我可以在我的代码中引用favicon.ico＆gt;不再需要在项目根目录中名为favicon的文件中使用favicon。

Answer 1

当您通过file-loader导入文件时，它会被复制到您的输出文件夹 - 默认情况下，您的配置中为output.path。您可以在loader options中配置输出路径和输出文件名。导入只是将文件的URL返回为output.publicPath + filename。

如果您只需要检索文件的原始内容，则可以使用raw-loader。

Answer 2

这可以使用HtmlWebpackPlugin获得。这不是插件的真正意图，但它确实适用于您的目的。

首先安装插件：

$ npm install html-webpack-plugin@2 --save-dev

然后在webpack.config.js中添加插件：

var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  ...
  plugins : [
    new HtmlWebpackPlugin({
      template : './src/index.html',
      hash     : false,
      filename : 'index.html',
      inject   : false
    })
  ]
  ...
};

请注意inject如何设置为false以上。这样可以防止任何静态资产被注入html文件。

Answer 3

只需删除file!前缀：

即可

import twohundredPage from './200.html'

只会发出一个文件，它将包含原始文件内容。返回值（在您的情况下为twohundredPage）将是发出文件的URL。

修改

一个可能更好的解决方案是在webpack配置文件中指定名称url参数：

loaders: [ { test: /\.(png|jpg|gif)$/, loader: "file-loader?name=assets/[path]/[name].[ext]" } ]

看起来这样会在发出的文件中保留原始文件内容。然后，您可以在源文件的file!语句中使用import前缀：

import twohundredPage from 'file!./200.html';

webpack：复制文件而不更改其内容

3 个答案: