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

Question

我正在尝试自动化进入 /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 文件夹中。我该怎么做？

更新 1 2017_____________

我现在最喜欢的方法是将 html-webpack-plugin 与模板文件一起使用。也感谢接受的答案！这种方式的优点是索引文件还将开箱即用地添加 cachbusted js link！

Answer 1

我会说答案是：你不能。（或者至少：你不应该）。这不是 Webpack 应该做的。 Webpack 是一个捆绑器，它不应该用于其他任务（在这种情况下：复制静态文件是另一项任务）。您应该使用 Grunt 或 Gulp 之类的工具来完成此类任务。集成Webpack as a Grunt task or as a Gulp task. They both have other tasks useful for copying files like you described, for example, grunt-contrib-copy or gulp-copy.

很常见

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

Answer 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。

Answer 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-command 一起复制，如下所示：

"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, as described in this Whosebug answer

但一般来说，除了 "first" 文件（如 index.html）和较大的资产（如大图像或视频），包括 css、html 、图像等直接通过 require 在您的应用程序中，webpack 将为您包含它（好吧，在您使用加载器和可能的插件正确设置它之后）。

Answer 4

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

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

Answer 5

这在 Windows 上运行良好：

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

这会将我的 index.html 从应用程序文件夹移动到部署文件夹。

Answer 6

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

module.exports = {

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

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

}

Answer 7

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

Answer 8

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

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

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

创建的 dist/index.html 文件将与您的源文件基本相同，不同之处在于 .js 文件等捆绑资源注入了 <script> 标签 通过网络包。 Minification 和更多选项可以配置，并且是 documented on github。

Answer 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 或文件或任何其他插件。

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

Answer 10

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

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

Webpack.config how to just copy the index.html to the dist folder

webpack

更新 1 2017_____________