如何在 webpack-dev-server 中分离 index.html 和资产? [英] How to separate index.html and assets in webpack-dev-server?

问题描述

我想要以下构建文件夹结构:

i want to have the following build folder structure:

• /build/index.html
• /build/static/bundlename.js
• /build/static/bundlename.css
• /build/static/img/*
• /build/static/fonts/*

我怎样才能做到这一点?我已经通过为 webpack 正常构建本身添加/static 前缀到 bundlename 本身来解决这个问题.但是当我在 webpack-dev-server 中运行这个配置时，它不会通过/static/路径服务器文件.

How can i achieve this? I have figured out this by addition /static prefix to bundlename itself for webpack normal build itself. But when i run this config in webpack-dev-server it doesn't server files by /static/ path.

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

I use file-loader and url-loader for fonts, how i can change their path as well? THey appear in /build root and i want them in /static/fonts folder.

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

I use html-webpack-plugin to generate index.html and append styles link (have no idea why webpack want to add them from js by default, it's crazyness, just as option i can see, but not as default way)

我通过 gulp 运行 webpack.

I run webpack by gulp.

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

You can see my config here. https://github.com/rantiev/template-angular

提前致谢.

推荐答案

You have output.path, output.publicPath &输出.文件名(见这里)
output.path 选项决定文件在磁盘上写入的位置

You have output.path, output.publicPath & output.filename (see here)
output.path option determines the location on disk the files are written

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

In your case you want path: path.resolve(__dirname, 'build')
That'll put the index.html from the HtmlWebpackPlugin into your build directory.

output.filename

指定磁盘上每个输出文件的名称.您不得指定这里是绝对路径！output.path 选项确定位置在磁盘上写入文件.文件名仅用于命名单个文件.

Specifies the name of each output file on disk. You must not specify an absolute path here! The output.path option determines the location on disk the files are written. filename is used solely for naming the individual files.

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

In your case you'll want filename: './static/bundlename.js'
That'll put the bundled JS into the static directory

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

To get the CSS into your static directory you'll need the ExtractTextPlugin. Once you get that going you'll want to put something in your webpack plugins like new ExtractTextPlugin('static/bundlename.css')

对于您的图像和您可以在加载程序中指定的字体如下:

For your images & fonts you can specify in your loaders something like this:

{
    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 解析错误"加载字体

output.publicPath specifies the public URL address of the output files when referenced in a browser. You might want to try
publicPath: http://localhost:8000/ and look at this Webpack "OTS parsing error" loading fonts

这篇关于如何在 webpack-dev-server 中分离 index.html 和资产?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！