Webpack.config 如何将 index.html 复制到 dist 文件夹

Posted 2023-02-22

【中文标题】Webpack.config 如何将 index.html 复制到 dist 文件夹

【英文标题】：Webpack.config how to just copy the index.html to the dist folder

【发布时间】：2015-11-16 06:34:53

【问题描述】：

我正在尝试自动化进入 /dist 的资产。我有以下 config.js：

module.exports = 
  context: __dirname + "/lib",
  entry: 
    main: [
      "./baa.ts"
    ]
  ,
  output: 
    path: __dirname + "/dist",
    filename: "foo.js"
  ,
  devtool: "source-map",
  module: 
    loaders: [
      
        test: /\.ts$/,
        loader: 'awesome-typescript-loader'
      ,
       test: /\.css$/, loader: "style-loader!css-loader" 
    ]
  ,
  resolve: 
    // you can now require('file') instead of require('file.js')
    extensions: ['', '.js', '.json']
  

我还想在运行 webpack 时将 /lib 旁边的目录中的 main.html 包含到 /dist 文件夹中。我该怎么做？

2017 年更新 1 _____________

我现在最喜欢的方法是将html-webpack-plugin 与模板文件一起使用。也感谢接受的答案！这种方式的好处是索引文件也会有开箱即用的cachbusted js链接！

【参考方案1】：

我会说答案是：你不能。 （或者至少：你不应该）。这不是 Webpack 应该做的。 Webpack 是一个打包器，它不应该用于其他任务（在这种情况下：复制静态文件是另一项任务）。你应该使用像 Grunt 或 Gulp 这样的工具来完成这些任务。集成Webpack as a Grunt task 或作为Gulp task 是很常见的。他们都有其他有用的任务，可用于复制您描述的文件，例如grunt-contrib-copy 或gulp-copy。

对于其他资产（不是index.html），您可以将它们与 Webpack 捆绑在一起（这正是 Webpack 的用途）。例如，var image = require('assets/my_image.png');。但我认为您的 index.html 不需要成为捆绑包的一部分，因此它不是捆绑包的工作。

【讨论】：

我正好使用了 webpack，所以我不需要使用 grunt 或 gulp。还有其他选择吗？如果我需要使用 gulp，为什么还要使用 webpack？

问题是颠倒的。如果可以使用 grunt 或 gulp，为什么还要使用 webpack？它们是非常好的任务/构建系统。 Webpack（或 browserify 或 r.js）是可用于将大量 JS 文件（和其他资源）捆绑到一个大（或多个）javascript 包中的工具。您应该使用正确的工具来完成这项工作。再说一遍，从 grunt 或 gulp 运行 webpack、browserify 或其他打包程序是很常见的。

webpack 可以通过多种方式做到这一点。您可以使用file-loader，它基本上只是将文件/图像复制到输出目录，并在需要时为您提供网址：var url = require('myFile');。正如我所说，一个包可以是一个或多个文件。

我可能会使用 brocolli 作为父构建过程

这对我来说是正确的答案。在大型/复杂项目中，webpack 构建性能是一个重要的考虑因素。各种文件复制插件给 webpack 增加了不必要的成本，让 webpack 专注于 JS 捆绑是一个更好的主意。

【参考方案2】：

选项 1

在您的 index.js 文件（即 webpack 条目）中，通过 file-loader 插件向您的 index.html 添加一个要求，例如：

require('file-loader?name=[name].[ext]!../index.html');

使用 webpack 构建项目后，index.html 将在输出文件夹中。

选项 2

使用html-webpack-plugin 可以完全避免 index.html。只需让 webpack 为您生成文件。

在这种情况下，如果您想保留自己的index.html 文件作为模板，您可以使用此配置：

  plugins: [
    new HtmlWebpackPlugin(
      template: 'src/index.html'
    )
  ]

请参阅docs 了解更多信息。

【讨论】：

我能以某种方式加载它在配置文件中写入一些东西吗？

在 webpack v2 中你显然不能省略 -loader 后缀。例如require('file-loader?name=[name].[ext]!../index.html');

@codeVerine 是的，通过在 webpack 配置文件中的 loaders 数组中添加类似 test: /index\.html/, loader: 'file-loader', query: name: '[name].[ext]' 的内容，只有我无法让 webpack-dev-server 为其提供服务，导致，有趣的是，请求 / 时出现 404（根不存在！）。

对不起我的新手问题，但是如果我的 index.html 非常复杂，有很多 div 和一个大结构，webpack 如何为我生成 index.html？

@JoãoPimentelFerreira 您提供要生成的 HTML 模板。

【参考方案3】：

我会在 VitalyB 的回答中添加一个选项：

选项 3

通过 npm。如果您通过 npm 运行命令，那么您可以将 this setup 添加到您的 package.json 中（也可以查看那里的 webpack.config.js）。对于开发运行npm start，在这种情况下无需复制 index.html，因为 Web 服务器将从源文件目录运行，并且 bundle.js 将在同一个地方可用（bundle.js 将位于内存，但如同与 index.html 一起定位一样可用）。对于生产运行 npm run build 和 dist 文件夹将包含您的 bundle.js 和 index.html 使用旧的 cp 命令复制，如下所示：

"scripts": 
    "test": "NODE_ENV=test karma start",
    "start": "node node_modules/.bin/webpack-dev-server --content-base app",
    "build": "NODE_ENV=production node node_modules/.bin/webpack && cp app/index.html dist/index.html"
  

更新：选项 4

有一个copy-webpack-plugin，如*** answer中所述

但通常，除了“第一个”文件（如 index.html）和较大的资源（如大图像或视频）外，通过 require 直接在您的应用中包含 css、html、图像等webpack 将为您包含它（好吧，在您使用加载器和可能的插件正确设置它之后）。

【讨论】：

选项3应该是选项1

我尝试了选项 3，但 index.html 的热重载不起作用。你不经常编辑你的 index.html 吗？严肃的问题。

如果您想支持跨操作系统开发环境，请使用 ncp 而不是 cp

【参考方案4】：

您可以使用CopyWebpackPlugin。它的工作原理是这样的：

module.exports = 
  plugins: [
    new CopyWebpackPlugin([
      from: './*.html'
    ])
  ]

【讨论】：

现在 Webpack 已经取代了 Gulp 和 Grunt，不仅仅是做捆绑，还有许多其他与构建相关的任务，这个解决方案是我在大多数项目中看到的。 package.json 中的脚本仅用于简单的事情，例如启动测试运行程序或开发服务器。

【参考方案5】：

这在 Windows 上运行良好：

npm install --save-dev copyfiles 在package.json 我有一个复制任务："copy": "copyfiles -u 1 ./app/index.html ./deploy"

这会将我的 index.html 从 app 文件夹移动到 deploy 文件夹。

【讨论】：

我可以使用那里的答案：***.com/questions/38858718/…

【参考方案6】：

您可以将索引直接添加到您的条目配置中并使用文件加载器来加载它

module.exports = 

  entry: [
    __dirname + "/index.html",
    .. other js files here
  ],

  module: 
    rules: [
      
        test: /\.html/, 
        loader: 'file-loader?name=[name].[ext]', 
      ,
      .. other loaders
    ]
  

【参考方案7】：

我还发现它简单并且足够通用，可以将我的index.html文件放入dist/目录 > 并将 <script src='main.js'></script> 添加到 index.html 以包含我捆绑的 webpack 文件。如果 webpack 的 conf 文件 中没有指定其他名称，main.js 似乎是我们包的默认输出名称。我想这不是好的长期解决方案，但我希望它可以帮助理解 webpack 的工作原理。

【参考方案8】：

要将已经存在的index.html 文件复制到dist 目录中，您只需将源index.html 指定为模板，即可使用HtmlWebpackPlugin .

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

module.exports = 
  // ...
  plugins: [    
    new HtmlWebpackPlugin(
      template: './path/to/index.html',
    )
  ],
  // ...
;

创建的dist/index.html文件将与你的源文件基本相同，不同之处在于.js文件等捆绑资源由webpack注入<script>标签。 缩小和其他选项可以配置，是documented on github。

【参考方案9】：

要扩展@hobbeshunter 的答案，如果您只想使用 index.html，您还可以使用 CopyPlugin， 使用这种方法而不是使用其他包的主要动机是因为为每种类型添加许多包并对其进行配置等是一场噩梦。 最简单的方法是对所有内容使用CopyPlugin：

npm install copy-webpack-plugin --save-dev

然后

const CopyPlugin = require('copy-webpack-plugin');

module.exports = 
  plugins: [
    new CopyPlugin([
       from: 'static', to: 'static' ,
       from: 'index.html', to: 'index.html', toType: 'file',
    ]),
  ],
;

如您所见，它将整个静态文件夹及其所有内容复制到 dist 文件夹中。 不需要 css 或文件或任何其他插件。

虽然这种方法并不适合所有情况，但它可以简单快速地完成工作。

【参考方案10】：

Webpack 5 带有 asset modules，因此您不再需要任何复制插件或文件加载器