[Rust004] JavaScriptでWebpackをやってrust-wasmに戻る

※この記事には技術的新規性はなく、他の記事を試した感想を述べるものです。

前回、RustのWasmをやる中で、webpackがわかっていない事が発覚しました。そのため、webpackで検索して最初に出てくる記事を勉強しています。

webpackとBabelの基本を理解する(1) ―webpack編―
https://qiita.com/koedamon/items/3e64612d22f3473f36a4

ポイントは、“基本機能はあくまで一つのJavaScriptファイルにまとめる”というところです。

ほうほう。何やら読んで行くと、あるjsがexportしているものをimportするみたいな構造が連鎖している場合に、それらを芋づる式に捕まえて連結してくれるらしいです。今の所は何が嬉しいのかよくわからないです。いくつか書かれていはいます。なんとなくわからなくもないです。
・名前の衝突
・参照ファイル数が多いとブラウザからのリクエスト数が増える

実際にやってみたところ
「npm init」でプロジェクト(語彙力)を作成し、「webpack」と「webpack-cli」を入れていくらかimport / exportしたソースを書き、「npx webpack」すると、確かに前評判通り、「連結したjs」が生成されて、それをnodeで実行するとhello worldが実行できました(語彙力)。

例えば途中、こういうのを書きます。

//webpack.config.js
module.exports = {
 entry: './src/index.js',
 output: {
   path: __dirname + '/dist',
   filename: 'sample.js'
 }
};

確かに基礎は簡単です。つまり、ある一定単位でJSをバンドル(語彙力)する構造をちゃんと作ってモジュール化(語彙力)していけば、単体単体でJSを利用するよりは、使いやすくて処理効率も良いという事なんでしょう。

さて前の記事の疑問に戻ります。前回のrust-wasmの記事から参照していた別ページの記事に戻りますと、「webpack.config.jsにwasm-pack-pluginを追加することで、Webpackからwasm-pack buildを実行出来ます」とあります。なるほど、pluginというフィールド(語彙力)があって、このタイミングでrustをいい感じにjs的に扱えるということですかね(よくはわかってない)。

   module.exports = {
    mode: “production”,
    entry: {
    index: “./js/index.js”
  },
  output: {
    path: dist,
    filename: “[name].js”
  },
  devServer: {
    contentBase: dist,
  },
  plugins: [
    new CopyPlugin([
      path.resolve(__dirname, “static”)
    ]),
　　　// WasmPackPluginを追加する
    new WasmPackPlugin({
      crateDirectory: __dirname,
      extraArgs: “ — out-name index”
    }),
  ]
 };

ひとまずはwebpack、完全に理解しました。