webpack - 捆绑/复制所有资产到 build 或 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 以获取 its 依赖项，否则这就是 webpack 所能做的。

就我个人而言，我认为如果您尝试以这种方式创建构建，您将度过一段糟糕的时光。这是一个以 JavaScript 为中心的工具，用于构建 JavaScript 包，它恰好允许一些魔法，比如 JavaScript “需要”非 JS 文件。我会尝试让你的主 JS 文件仍然包含 HTML，但也让它拉入你的样式和其他 JS 模块。这样，WebPack 将能够发现您的所有依赖项。

更新：

好像有一个html-loader;也许你可以坚持你的方法并使用那个加载器，看起来它可以发现 HTML 中的依赖关系。