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包含在/ lib文件夹中的/ dist文件夹中.我怎样才能做到这一点？

更新1 2017_____________

我现在最喜欢的方法是使用html-webpack-plugin带有模板文件.感谢接受的答案!这种方式的优点是索引文件也将添加开箱即用的cachbusted js链接!

Answer 1

选项1

在您的index.js文件(即webpack条目)中,向您的index.htmlvia 文件加载器插件添加一个require ,例如:

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

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

选项2

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

Answer 2

我将为VitalyB的答案添加一个选项:

选项3

通过npm.如果你通过npm运行命令,那么你可以将这个设置添加到你的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的答案中所述

但一般情况下,除了非常"第一"的文件(如index.html)和较大的资产(如大型图片或视频),请直接在您的应用中包含css,html,图片等require,webpack将为您提供(好吧,用装载机和可能的插件正确设置后).

Answer 3

您可以使用CopyWebpackPlugin.它的工作原理如下:

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

Answer 4

我会说答案是:你做不到.(或者至少:你不应该).这不是Webpack应该做的.Webpack是一个捆绑器,它不应该用于其他任务(在这种情况下:复制静态文件是另一项任务).你应该使用像Grunt或Gulp这样的工具来完成这些任务.将Webpack集成为Grunt任务或Gulp任务是很常见的.它们都有其他任务可用于复制您所描述的文件,例如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

要将已经存在的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>类的捆绑资源被 webpack注入了标签。可以配置缩小和更多选项，并记录在 github 上。

Answer 7

要扩展@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 或文件或任何其他插件。

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