javascript – webpack – 捆绑/复制所有资产构建或dist文件夹

2019年7月21日 107次阅读

我正在尝试使用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中.

最佳答案 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中的依赖关系.

点赞