webpack入門_ライブラリ作成
Authoring Libraries
公式ドキュメントのAuthoring Libraries を参考にnodeのモジュールを作成して参照できるようにしたいと思います。 それではまず、モジュール化させるプロジェクトを作成します。
mkdir webpack-numbers cd webpack-numbers npm init -y npm install --save-dev webpack lodash
それから、以下のファイルを作成します。
src/ref.json
[ { "num": 1, "word": "One" }, { "num": 2, "word": "Two" }, { "num": 3, "word": "Three" }, { "num": 4, "word": "Four" }, { "num": 5, "word": "Five" }, { "num": 0, "word": "Zero" } ]
src/index.js
import _ from 'lodash'; import numRef from './ref.json'; export function numToWord(num) { return _.reduce(numRef, (accum, ref) => { return ref.num === num ? ref.word : accum; }, ''); } export function wordToNum(word) { return _.reduce(numRef, (accum, ref) => { return ref.word === word && word.toLowerCase() ? ref.num : accum; }, -1); }
webpack.config.js
var path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'webpack-numbers.js', library: 'webpackNumbers', libraryTarget: 'umd' }, externals: { lodash: { commonjs: 'lodash', commonjs2: 'lodash', amd: 'lodash', root: '_' } } };
webpack.config.jsにてライブラリの設定をしています。output.path, output.pluginでは出力先のファイル名を指定しています。output.libraryでライブラリ名を指定しています。output.libraryTargeではモジュールのタイプとしてumdを指定しています。externalsはこのライブラリに依存するライブラリを指定しています。この設定がない場合はビルドした際にバンドルに含まれてしまい大きくなるので、作成したライブラリが使用するライブラリはexternalsに含めるようにします。 それでは、この設定でビルドをしてみると出力先にはwebpack-numbers.jsが作られていて、中身を見ているとlodashが含まれていないことが確認できます。
次にローカルのプロジェクトがこのモジュールを使えるようにする方法についてですが、webpack.config.jsに以下のようにresolve.modulesに作成したライブラリの出力先を指定してimportできるようになります。
,,, module.exports = { resolve: { modules: [ path.resolve(__dirname, 'src'), 'node_modules', '../webpack-numbers/dist' ] ,,,
動作確認する場合はindex.jsなどに以下のようにimportを足してあとはブラウザでコンソール出力がされているか確認すれば良いかと思います。
import * as webpackNumbers from 'webpack-numbers'; console.info(webpackNumbers.wordToNum('Two'));