javascript - webpack - 捆绑/复制所有 Assets 到 build 或 dist 文件夹

Question

我正在尝试使用 webpack 来处理电子应用程序的构建。我想要一个使用脚本标签导入/需要 react client.js 文件的 index.html，并让 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 的相关 block :

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