首页 文章

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

提问于
浏览 次
1

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

  • /build/index.html

  • /build/static/bundlename.js

  • /build/static/bundlename.css

  • / build / static / img / *

  • / build / static / fonts / *

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

我使用文件加载器和url-loader作为字体，我也可以改变它们的路径？它出现在/ build root中，我希望它们位于/ static / fonts文件夹中 .

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

我通过gulp运行webpack .

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

提前致谢 .

webpack webpack-dev-server

2 回答

  • 0

    您可以指定 output.path ：

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

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

    回复于
  • 0

    你有 output.path ， output.publicPath 和 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')

    对于您的图像和字体，您可以在加载器中指定如下内容：

    {
    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

    回复于

相关问题