Question

我想拥有以下构建文件夹结构：

/build/index.html
/build/static/bundlename.js
/build/static/bundlename.css
/建造/静态/ IMG / *
/建造/静态/字体/ *

我怎样才能做到这一点？我已经通过添加/静态前缀来解决这个问题，因为对于webpack normal build本身来说，它是本身的。但是当我在webpack-dev-server中运行此配置时，它不会通过/ static / path来服务器文件。

我使用file-loader和url-loader作为字体，我如何改变他们的路径？它出现在/ build root中，我希望它们出现在/ static / fonts文件夹中。

我使用html-webpack-plugin来生成index.html并附加样式链接（不知道为什么webpack默认会从js添加它们，这很疯狂，就像我可以看到的选项一样，但不是默认方式）

我通过gulp运行webpack。

你可以在这里看到我的配置。 https://github.com/rantiev/template-angular

提前致谢。

Answer 1

您可以指定output.path：

output: {
    path: "build/static",
    publicPath: "/static/"
}

并在html-webpack-plugin中将路径从index.html更改为../index.html

Answer 2

您有output.path，output.publicPath＆amp; output.filename （see here）
output.path选项确定磁盘上写入文件的位置

在您的情况下，您需要path: path.resolve(__dirname, 'build')
这会将index.html中的HtmlWebpackPlugin放入您的build目录。

output.filename

指定磁盘上每个输出文件的名称。你不能指定一条绝对的道路！ output.path选项确定位置在磁盘上写入文件。 filename仅用于命名个别档案。

在您的情况下，您需要filename: './static/bundlename.js'
这将捆绑的JS放入静态目录

要将CSS放入静态目录，您需要ExtractTextPlugin。一旦你开始这样做，你就会想要在你的webpack插件中添加一些东西，比如new ExtractTextPlugin('static/bundlename.css')

对于您的图片＆amp;您可以在加载器中指定的字体如下：

{
    test: /\.(ttf|otf|eot|woff|woff2)$/
    include: [
      path.resolve(__dirname, 'font location here')
    ],
    loader: 'url',
    query: {
      limit: 10000,
      name: 'static/fonts/[name].[ext]'
    }
  },
  {
    test: /\.svg$/,
    include: [
      path.resolve(__dirname, 'image location here')
    ],
    loader: 'file',
    query: {
      limit: 10000,
      minetype: 'image/svg+xml',
      name: 'static/img/[name].[ext]'
    }
  }

output.publicPath指定在浏览器中引用时输出文件的公共URL地址。你可能想试试 publicPath: http://localhost:8000/并查看此Webpack "OTS parsing error" loading fonts

如何在webpack-dev-server中分离index.html和资产？

2 个答案: