我试图自动化资产进入/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']
  }
}

我还想包括main.html从目录,坐在旁边/lib,到/dist文件夹时运行webpack。我该怎么做呢?

更新1 2017_____________

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


当前回答

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

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

其他回答

这在Windows上运行良好:

NPM install——save-dev copyfiles 在包中。我有一个复制任务:“复制”:“copyfiles -u 1 ./app/index.html ./deploy”

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

你可以使用CopyWebpackPlugin。它是这样工作的:

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

我还发现把我的index.html文件放在dist/目录下,并将<script src='main.js'></script>添加到index.html中,以包括我绑定的webpack文件,这很简单,也很通用。如果在webpack的conf文件中没有指定其他的话,Main.js似乎是我们的bundle的默认输出名称。我想这不是一个好的和长期的解决方案,但我希望它能帮助理解webpack是如何工作的。

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

选项3

Via npm. If you run your commands via npm, then you could add this setup to your package.json (check out also the webpack.config.js there too). For developing run npm start, no need to copy index.html in this case because the web server will be run from the source files directory, and the bundle.js will be available from the same place (the bundle.js will live in memory only but will available as if it was located together with index.html). For production run npm run build and a dist folder will contain your bundle.js and index.html gets copied with good old cp-command, as you can see below:

"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将包括它为你(好吧,在你设置正确的加载器和可能的插件)。

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

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