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模块的依赖。然后每个依赖项都通过一个加载器。所以：

AbstractProfile

没有其他依赖项，因为PRIVACY_CHOICES没有任何其他依赖项。除非有其他魔术插件/加载器可以解析HTML 其依赖关系，否则这就是webpack所能做到的。

就个人而言，如果您尝试以这种方式创建构建，我认为您将度过一段美好时光。这是一个以JavaScript为中心的工具，用于构建JavaScript包，这些工具恰好允许像JavaScript这样的魔法＃34;需要＆＃34;非JS文件。我尝试的是让您的主JS文件仍然包含HTML，但也可以提供您的样式和放大器。其他JS模块。通过这种方式，WebPack将能够发现所有依赖项。

<强>更新：

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

webpack - 捆绑/复制所有要构建的资产或dist文件夹

1 个答案: