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中的依赖关系。