webpack - 捆綁/復制所有要構建的資產或dist文件夾

Question

我正在嘗試使用webpack來處理電子應用程序的構建。 我想有一個index.html使用腳本標簽來導入/需要一個react client.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中編譯並縮小應用程序的完整功能副本。

Webpack.config.js的相關塊：

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]'
      }
    ]
  }
}

在webpack-hook.js我有一行： require('./gui/html/index.html');

我想要/期望的是擁有webpack發現的所有依賴項並捆綁到dist / images，dist / fonts等等。 截至目前，我只是將一個index.html文件復制到dist中。

Answer 1

Webpack是一個JavaScript捆綁器; 所有其他花哨的加載器和插件試圖使它不僅僅是一個捆綁工具，但它不是設計為除了捆綁之外做任何事情。 這就是為什么如果你試圖把它當成一個成熟的構建工具那么令人困惑的原因。

它的神奇之處在於遍歷JavaScript模塊的依賴關系。 然后每個依賴項都通過一個加載器。 所以：

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

沒有其他依賴項，因為webpack-hook沒有任何其他依賴項。 除非有一些其他魔術插件/加載器可以解析HTML 的依賴關系，否則這是webpack所能做到的。

就個人而言，如果您嘗試以這種方式創建構建，我認為您將度過一段美好的時光。 這是一個以JavaScript為中心的工具，用於構建JavaScript包，恰好允許像JavaScript一樣“需要”非JS文件。 我要嘗試的是讓你的主JS文件仍然包含HTML，但也可以讓你的樣式和其他JS模塊。 這樣，WebPack將能夠發現您的所有依賴項。

更新 ：

它看起來像是一個html-loader ; 也許你可以堅持使用你的方法並使用該加載器，看起來它可以發現HTML中的依賴關系。