webpack でディレクトリに対応したファイルにコンパイルするときの webpack.config.js の設定

Nodejsとnpmのバージョン情報

• windows10 pro 64bit
• Nodejs v6.9.2
• npm 3.10.9

package.json の内容

devDependencies のみ記載します

      "devDependencies": {
        "clean-webpack-plugin": "^1.0.0",
        "glob": "^7.1.6",
        "path": "^0.12.7",
        "webpack": "^4.20.2",
        "webpack-cli": "^3.1.2",
        "webpack-dev-server": "^3.1.14"
      }

初期の状態

srcディレクトリにJavaScriptファイルがあり、publicディレクトリに公開用のindex.htmlがおいてある状態です

    ├─public
    │  └─index.html
    │
    └─src
        ├─common
        │      _jquery-3.5.1.min.js
        │
        └─user
            └─page1
                │  page1.js
                │
                └─modules
                        _sample1.js
                        _sample2.js

目標の状態

srcディレクトリ配下のJavaScriptファイルをディレクトリ構成を保ったままpublicディレクトリ配下にwebpackでコンパイルします。

例えば、 src/user/page1/page1.js というパスで page1.js というJSファイルをあったとします。これをディレクトリ構成を保ったままコンパイルしたときにはpublicディレクトリに public/js/user/page1/page1.js となっていることを目標の状態とします。

階層構造でいうと以下のようになります。

    ├─public
    │  │  index.html
    │  │
    │  └─js
    │      └─user
    │          └─page1
    │                  page1.js
    │
    └─src
        ├─common
        │      _jquery-3.5.1.min.js
        │
        └─user
            └─page1
                │  page1.js
                │
                └─modules
                        _sample1.js
                        _sample2.js

ファイル名の先頭に「_」がついているファイルはモジュールとして扱い、それ単体では使用しないものと考えます。このモジュールファイルはコンパイルさせないようにします

webpack.config.js の設定

    const CleanWebpackPlugin = require('clean-webpack-plugin'),
          path = require('path'),
          glob = require('glob');

    const base_path_to_js     = path.resolve(__dirname, 'src').replace(/\/g, '/'),
          path_to_complied_js = path.resolve(__dirname, 'public/js'),
          js_files_arr        = glob.sync(`${base_path_to_js}/**/*.js`),
          target_js_files_arr = js_files_arr.filter(js_file => {

            return !js_file.split("/").pop().match(/^_/);
          })

    // 変数 entries の例
    // { '/user/page1/page1.js': 'D:/study/webpack-demo/src/user/page1/page1.js' }
    let entries = {};
    target_js_files_arr.forEach(value => {
        let key = value.replace(base_path_to_js, '');
        entries[key] = value;
    });

    module.exports = {
        mode: 'development',
        entry: entries,
        devtool: 'inline-source-map',
        plugins: [
            new CleanWebpackPlugin([path_to_complied_js])
        ],
        output: {
            path: path_to_complied_js,
            filename: '[name]'
          },
    };

webpack でコンパイルします

npm run build を実行すると 目標の状態 でしめした階層構造が作成されます。

何がいいのか

ブラウザ依存を関係なくモジュール化できるのがいい。とりあえずwebpackでコンパイルすれば可能だと思っています。なんだかんだ ES6 の class はほんとんどのブラウザで対応していますが、ふいに「IEでうごきません！」とかいう当たり前の状況だけど対応しなければ行けない状況にはなりたくないです。

参考資料

• webpackでモジュール解決しながらディレクトリ構成を保ったまま書き出す