【React入門10】ローダーでJSファイル以外もバンドルする
こちらの記事は、React入門チュートリアルです。
Reactが初めての私がReactを実装していく流れとなるため、初心者の方のつまずきやすいポイントを一通りフォローアップできる内容となっています。
ローダーとは
標準設定のwebpackはJavaScriptファイルのバンドルしか行うことができません。
(バンドルって?という方は前回の記事をご覧ください)
そこでwebpackに用意されたローダーをインストールすることによって、あらゆるファイルをwebpackでバンドルできるようにしましょう。
txtファイルをバンドルするためのraw-loader
まずはtxtファイルをバンドルするためのraw-loaderをインストールして使ってみましょう。
$ npm install --save-dev raw-loader
次にraw-loaderをwebpack.config.jsにも設定します。
webpack.config.js
const path = require('path'); module.exports = { watch: true, mode: 'development', entry: './src/index', output: { path: path.resolve(__dirname, 'public'), filename: 'bundle.js' }, // 以下を追記 module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] } };
また、src/components/module.jsの拡張子をtxt形式に変えましょう。
(旧) src/components/module.js
(新) src/components/module.txt
最後にsrc/index.jsを改変します。
src/index.js
import Module from './components/module.txt'; //拡張子を変更 const root = document.querySelector('#root'); root.innerHTML = Module;
webpackがwatchモードになっている場合はリロードを、
なっていない場合はもう一度
$ npm run webpack
をします。
そうするとブラウザ上でmodule.txtがtxt形式で出力していることが分かりますね。
JSX、ECMAScriptのファイルをバンドルするためのbabel-loader
先ほどのraw-loaderのように、JSX形式、ECMAScript形式のファイルをバンドルするためのbabel-loaderというものがあります。
ReactはJSXやECMAで記述されることが多いため、babel-loaderも必須アイテムの1つでしょう。
それではbabel-loaderの導入手順を進めていきましょう。
まずは必要なパッケージのインストールを行います。
$ npm install -D babel-loader @babel/core @babel/preset-env webpack
次にwebpack.config.jsに対して、先ほどのraw-loaterの時と同じように追記します。
// 省略 module: { rules: [ { test: /\.txt$/, use: 'raw-loader' }, // 以下を追記 { test: /\.m?js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] } // 省略
これでJSX、ESMAScriptのファイルが読み込めるようになりました。