WebPack-bundle/copy所有资产到build或dist文件夹

Question

我试图使用webpack来处理一个电子应用程序的构建。我希望有一个index.html，它使用脚本标记导入/要求reactclient.js文件，并使该client.js文件及其所需文件需要整个应用程序。

我的文件夹结构如下所示：

Project
  |
  | --/app
  |
  | ----/gui
  | ------/flux
  | ------/fonts
  | ------/html
  | ------/images
  | ------/react
  | 
  | ----/lib
  | ------ /custom-modules ...
  | ----package.json (application)
  |
  |
  | --/dist
  | .babelrc
  | webpack.config.js
  | package.json (dev)

我想在./app中开发应用程序，运行webpack或webpack-dev-server，并在./dist中有一个完整的应用程序的功能副本。

module.exports = {
  context: path.join(__dirname, '/app'),
  devtool: debug ? 'inline-sourcemap' : null,
  entry: {
    main: './webpack-hook.js'
  },
  output: {
    publicPath: '/assets/',
    path: path.join(__dirname, '/dist/'),
    filename: 'js/gui.js'
  },
  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy']
        }
      },
      {
        test: /\.html$/,
        loader: 'file-loader?name=[name].[ext]'
      },
      {
        test: /\.css$/,
        loader: 'file-loader?name=css/[name].[ext]'
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader?name=images/[name].[ext]'
      },
      {
        test: /\.(ttf)$/,
        loader: 'file-loader?name=fonts/[name].[ext]'
      }
    ]
  }
}

Answer 1

Webpack是一个JavaScript绑定程序；所有其他花哨的加载器和插件都试图使它不仅仅是一个捆绑工具，但它不是为捆绑而设计的。这就是为什么如果你试图把它当作一个完整的构建工具来对待，它会如此令人困惑。

它的神奇之处在于遍历JavaScript模块的依赖项。然后每个依赖项都经过一个加载器。所以：

webpack-hook.js → "main" JS bundle
↓
./gui/html/index.html → file-loader → dist folder

没有其他依赖项，因为webpack-hook没有任何其他依赖项。除非有其他神奇的插件/加载器可以解析HTML的依赖项，否则这就是webpack所能做的一切。