2017年1月更新_____________

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包含在/ lib文件夹中。我怎么能这样做？

2017年1月更新_____________

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

Answer 1

选项1

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

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

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

选项2

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

Answer 2

我将为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，如Stackoverflow answer

所述

但一般来说，除了第一个＆＃34;第一个＆＃34;文件（如index.html）和较大的资源（如大图片或视频），通过require直接在您的应用中包含css，html，图片等，webpack将为您提供（嗯，在您之后）使用加载器和可能的插件正确设置它。

Answer 3

您可以使用CopyWebpackPlugin。它的工作原理如下：

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

Answer 4

我会说答案是：你做不到。（或者至少：你不应该）。这不是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不需要成为捆绑包的一部分，因此它不适合捆绑包。

Answer 5

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

module.exports = {

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

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

}

Answer 6

这项工作适用于Windows：

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

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

Answer 7

要将现有的index.html文件复制到dist目录中，只需将源index.html指定为 HtmlWebpackPlugin ，即可使用 documented on github 模板。

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

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

创建的dist/index.html文件将与您的源文件基本相同，不同之处在于webpack会通过<script>标签注入捆绑的资源，例如 .js文件。可以配置缩小和其他选项，它们为See docs。

Answer 8

要扩展@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 9

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

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

2017年1月更新_____________

9 个答案: