webpack - bundle / copy all assets to build or dist folder

Question

I'm trying to use webpack to handle the building of an electron application. I would like to have an index.html that uses script tags to import/require a react client.js file, and have that client.js file and its required files require the entire application.

My folder structure looks like this:

Project
  |
  | --/app
  |
  | ----/gui
  | ------/flux
  | ------/fonts
  | ------/html
  | ------/images
  | ------/react
  | 
  | ----/lib
  | ------ /custom-modules ...
  | ----package.json (application)
  |
  |
  | --/dist
  | .babelrc
  | webpack.config.js
  | package.json (dev)

I would like to develop the app in ./app, run webpack or webpack-dev-server and have a complete and functional copy of the app transpiled and minified in ./dist.

Relevant chunk of 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]'
      }
    ]
  }
}

In webpack-hook.js I have a single line: require('./gui/html/index.html');

What I want/expect is to have all of the dependencies found by webpack and bundled into dist/images, dist/fonts, and so on. As of right now, I just get an index.html file copied into dist.

Jacob Jacob · Accepted Answer · 2016-08-24T17:23:07

Webpack is a JavaScript bundler; all the other fancy loaders and plugins try to make it more than a bundling tool, but it was not designed to do anything but bundle. That's why it's so perplexing if you try to treat it like a full-fledged build tool.

Its magic has to do with traversing the dependencies of a JavaScript module. Each dependency then goes through a loader. So:

webpack-hook.js → "main" JS bundle
↓
./gui/html/index.html → file-loader → dist folder

There are no other dependencies because webpack-hook doesn't have any other dependencies. Unless there's some other magic plugin/loader that can parse the HTML for its dependencies, this is all webpack will be able to do.

Personally, I think you're going to have a bad time if you try to create the build this way. This is a JavaScript-centric tool for building JavaScript bundles that happens to allow some magic like JavaScript "requiring" non-JS files. What I'd try instead is have your main JS file still include the HTML, but also have it pull in your styles & other JS modules. This way, WebPack will be able to discover all your dependencies.

Update:

It looks like there is an html-loader; perhaps you can stick with your approach and use that loader, and it looks like it can discover dependencies within HTML.

webpack - bundle / copy all assets to build or dist folder

1 Answers