Open12

【奇々怪々】Webpack演習の際の覚書き・03(Webpackの基本手順とソースマップを出したり引っ込めたり)

tatsuyashinseitatsuyashinsei

デスクトップ上でターミナルを開いてデスクトップに作業フォルダ作成・ディレクトリ移動

mkdir wp-intro
cd wp-intro

続いてnpm初期化コマンド

npm init -y

tatsuyashinseitatsuyashinsei

三つのwebpackパッケージをインストール

npm i -D webpack webpack-cli webpack-dev-server


VSCodeで開く

code .

tatsuyashinseitatsuyashinsei

srcフォルダを作成

srcの中に info.js entry.js createElem.js の名前でJSファイルを作成



tatsuyashinseitatsuyashinsei

作成した三つのJSファイルに記述

info.js
export default 'info.jsからの応答です'

createElem.js
export function createElem(tag,innerText){
  let elem = document.createElement(tag)
  elem.innerText = innerText
  document.body.append(elem)
}

entry.js
import msg from './info.js'
import { createElem } from './createElem.js'

createElem('h1',msg)

tatsuyashinseitatsuyashinsei

webpack.config.jsファイルはCommonJSのみを使用する

ES6モジュール構文(import や export)を使わず

CommonJSスタイル構文(require や module.exports)を使う

webpack.config.jsファイルを作成

記述

webpack.config.js
const path = require('path')

module.exports = {
  context:path.resolve(__dirname,'src'),
  mode: 'development',
  devtool:'inline-source-map',
  entry:'./entry.js'
}

tatsuyashinseitatsuyashinsei

const path = require('path')

Node.jsのpathモジュールをロードする

module.exports = { ... }

webpackの設定オブジェクトをエクスポート
(webpackにどのようにビルドさせるかを指定)

context: path.resolve(__dirname, 'src')

contextでエントリーポイント指定
__dirnameでwebpack.config.jsから見た相対パスを指定

mode: 'development

ビルドモードを指定
developmentモードではソースマップが生成される
(ファイルは最適化されないが開発時には便利)

devtool: 'inline-source-map'

ソースマップの生成方法を指定
inline-source-mapはバンドルファイルにソースマップを含める設定
元になるソースコードへのリンクも提供される

entry: './entry.js

エントリーポイント指定
指定したファイルから依存関係を解決してバンドルされる
アプリの起点になるファイルとなる

tatsuyashinseitatsuyashinsei

webpackを実行

npx webpack



バンドルされる

distフォルダが生成される

結合(バンドル)された三つのモジュールと生成されたファイルのサイズと名前(ここではmain)

生成されたファイルはdistフォルダの中

tatsuyashinseitatsuyashinsei

バンドルされたファイル・main.jsを中身を覗いてみる

先頭のコード左にある「V」を押してコードを畳んでみる

#IIFE(即時実行関数式)

複数のJSファイルが結合される場合
他のライブラリと連携する場合
において名前の衝突を防ぐのに役立つ

tatsuyashinseitatsuyashinsei

webpack.config.jsに記述を追加

webpack.config.js
const path = require('path')

module.exports = {
  context:path.resolve(__dirname,'src'),
  mode: 'development',
  devtool:'inline-source-map',
  entry:'./entry.js', // カンマ付け忘れに注意 ////
  output:{ // 追加 ////
    iife:false, // 追加 ////
    clean:true, // 追加 ////
  } // 追加 ////
}

iifeをfalseにしている点に注目されたし

main.jsを再度確認しておく(iifeラッパーあり)

再バンドル

iifeラッパーは消えている

※ラッパーとは何かを包むことや包み込むものを指す
機能やデータの構造を包む役割を果たすコード・構造を指す

tatsuyashinseitatsuyashinsei

webpack.config.jsに記述追加・修正

webpack.config.js
const path = require('path')

module.exports = {
  context:path.resolve(__dirname,'src'),
  mode:'production',
  // mode: 'development',
  // devtool:'inline-source-map',
  // entry:'./entry.js',
  entry:{
    main:'./entry.js',
  },
  output:{
    // iife:false,
    clean:true,
    filename:'[name].js',
    path:path.resolve(__dirname,'dist'),
  }
}

main.jsの中身を確認しておく

再バンドル

ソースマップが消える

tatsuyashinseitatsuyashinsei

webpack.config.jsに記述追加

webpack.config.js
const path = require('path')

module.exports = {
  context:path.resolve(__dirname,'src'),
  mode:'production',
  devtool:'source-map',　// 追加 ////
  // mode: 'development',
  // devtool:'inline-source-map',
  // entry:'./entry.js',
  entry:{
    main:'./entry.js',
  },
  output:{
    // iife:false,
    clean:true,
    filename:'[name].js',
    path:path.resolve(__dirname,'dist'),
  }
}

再バンドル

main.jsファイルに何らかのコードが足されている

何らかのファイルも生成されている

tatsuyashinseitatsuyashinsei

所感：相変わらず手ごわいWebpackだが、手を動かせば何となくは理解できるようになる。
…という錯覚でなければ良いが。