Memo

メモ > 技術 > 開発: Webpack > Webpackの導入（JSファイルをまとめるまで）
Webpackの導入（JSファイルをまとめるまで）

モジュールバンドラーと呼ばれるもので、JSファイルをまとめるツール
ファイルをまとめる処理を自動で行うこともできるため、タスクランナーと似たような位置づけでもある

はじめてのWebpack - Qiita
https://qiita.com/cheez921/items/266b1b4534b6111a9686

最新版で学ぶwebpack 3入門(図解付き) - JS開発で必須のモジュールバンドラー - ICS MEDIA
https://ics.media/entry/12140

webpack 入門 （v3系 対応） - Qiita
https://qiita.com/soarflat/items/28bf799f7e0335b68186

すべてをjsにまとめる思想を理解する - webpackハンズオンシリーズ｜こんぴゅ｜note
https://note.mu/konpyu/n/n694491cd9e80

WebpackがいいのかGulpがいいのかはよく考えたい
WebpackはJavaScriptのみを扱い、GulpでSASSや画像を扱う…という手法も多い
Gruntは滅びゆく技術になっているようなので避ける方が無難

【保存版】gulp, webpack, parcel...増え続けるタスクランナーの特徴を理解して最適なものを選択しよう | WEBA
https://hirata.blog/201712_taskrunner/

webpackの開発は、事実上終了しているらしい

人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る − Publickey
https://www.publickey1.jp/blog/23/javascriptwebpackturbopack.html

2022年6月にIEが終了したので、以下のような意見もある

IEが終了したので、webpackやbabelは不要？ - Qiita
https://qiita.com/access3151fq/items/42b38635d81aad786e60■導入

Node.jsは、Electronなど他ツールインストール時に導入済み

>node -v
v6.5.0


C:\Users\refirio\webpack-test を作成しておく
以降、webpack-test を作業フォルダとする

>cd C:\Users\refirio\webpack-test
>npm init -y


package.json が作成される。作成された内容は以下の通り

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


以下のコマンドでインストール

>npm install -D webpack


node_modules フォルダが作成され、その中に必要なファイルが作成される
（「-D」は「--save-dev」の略）

package.json に scripts を追加する
この時点で以下のようになっている

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^3.10.0"
  }
}
■JSファイルをまとめる

テストプログラムを作成する

js/main.js
// import 文を使って sub.js ファイルを読み込む。
import {hello} from './sub';
 
// sub.jsに定義されたJavaScriptを実行する。
hello();


js/sub.js
// export文を使ってhello関数を定義する。
export function hello() {
  alert('helloメソッドが実行された。');
}


設定ファイルを作成する

webpack.config.js
module.exports = {
  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: './js/main.js',
  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: __dirname + '/js/',
    // 出力ファイル名
    filename: 'bundle.js'
  }
};


以下で実行する

>npm run build


js/main.js と js/sub.js をもとに js/bundle.js が作成される

適当なHTMLファイル（ここでは sample.html とした）を作成し、プログラムを呼び出してみる

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Webpack</title>
        <script src="js/bundle.js"></script>
    </head>
    <body>
        <h1>Webpack</h1>
        <p>Webpackのテスト。</p>
    </body>
</html>


「helloメソッドが実行された。」というアラートが表示されれば成功。
Memo

Advertisement
