webpack.config.js.rst

WebAssembly

For an introduction to Webpack, the following two resources are recommended.

• Getting Started With Webpack 2 Medium post by Drew Powers,
• The article series at SurviveJS.

See the project README and project documentation for build instructions and command lines.

Webpack does not normally incorporate index.html into the build. For deploy convenience we want to copy index.html to the dist output directory so that it forms a complete site. The copy-webpack-plugin allows us to do this, to copy files and directory structures to the output.

const CopyWebpackPlugin = require('copy-webpack-plugin');

Webpack output and build operations are configured by the module.exports of the configuration module we define in this file.

const path = require('path');

module.exports = {

Enable .js.rst requires without suffix.

resolve: {
  extensions: ['.js', '.json', '.js.rst']
},

Build from src/www into dist.

context: path.resolve(__dirname, './src/www'),
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].bundle.js'
},

Webpack uses the entry object to list the start files to process. Dependencies required in these files are also processed and their dependencies, etc. The path is relative to the context directory specified in the previous block.

entry: {
  main: './main'
},

Generate source maps to show original .rst.js files in browser debugger tools.

devtool: 'source-map',

Plugins are enabled by listing them in plugins with their configurations.

plugins: [

For CopyWebpackPlugin to copy index.html to the output directory.

  new CopyWebpackPlugin([
    { from: 'index.html' }
  ])
],

The module.rules block is where Webpack finds out which and how we want it to process our files. Each rule has a test property specifying the files to apply the rule to by their filenames. The loader and options in the rule define how the given file should be processed. Different loaders are used for different file types and handling.

module: {
  rules: [

Include a rule in modules.exports.modules for handing .js.rst files.

{
  test: /\.js\.rst$/,
  use: [
    'eslint-loader',
    'literacy-loader',
  ]
},

Rule for building Rust files by shelling out to cargo. Make sure to use the release build or will see "indirect call signature mismatch" errors.

    {
      test: /\.rs$/,
      use: [
        'wasm-loader',
        {
          loader: 'rust-native-wasm-loader',
          options: {
            release: true,
            gc: true
          }
        }
      ]
    }
  ]
},

Emscripten requires fs and path from Node and emits require references but they are unused in the browser. Instruct Webpack to omit them.

  externals: {
    'fs': true,
    'path': true,
  }
};