webpackの devtool ソースマップでエラーを確認する

最近，webpackをさわっていてソースマップが便利だと思い，紹介させていただきます．

webpack
ソースマップ
環境
やってみる
参考

webpack

モジュール(JavaScriptなどのファイル)をバンドルする(まとめる)やつ

以下の記事に詳しく書いてありました．

qiita.com

ソースマップ

バンドル後のファイルと前のファイルを関連づける

バンドル前のコードを確認できるので，デバックがしやすいという利点がある

今回は，devtoolのプロパティにcheap-module-eval-source-mapを指定するが，他にも種類があるので詳しくは以下を参照

webpack.js.org

環境

以下の環境で動作を確認しています．

$ node -v
v11.10.1

やってみる

ファイル構成

ファイル構成は以下の通りです．

$ tree
│       
├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── js
│       └── bundle.js
├── src
│   └── js
│       ├── app.js
│       └── modules
│           └── message.js
└── webpack.config.js

任意のフォルダを作成

mkdir webpack-devtool

package.jsonを作成

npm init -y

webpackをインストール

npm install --save-dev webpack webpack-cli

package.jsonを修正

package.jsonを以下のように修正する．

{
  "name": "webpack-devtool",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  }
}

app.js

message.jsを読み込んで実行するエントリーポイントのsrc / js / app.jsは以下のようする

import message from './modules/message';

message('Hello world!!');

message.js

console.logでログにメッセージを出力するモジュール，タイポしてエラーを出させるようにする

export default function message(msg) {
  console.log(mgs);
}

webpack.config.js

webpackの設定ファイル．プロパティにソースマップを指定する

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/js/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'public/js')
  },
  // ソースマップの設定
  devtool: 'cheap-module-eval-source-map'
};

index.html

public / index.htmlはwebpackを実行して出力させるbundle.jsを読み込むファイル

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>webpack!</title>
  </head>
  <body>
    <script src="js/bundle.js"></script>
  </body>
</html>