webpack を使ってみる
JavaScript React webpack
Published: 2019-11-10

やったこと

webpack を使ってみます。

React を webpack を使って起動します。

確認環境

$ node --version
v10.16.0
$ npm --version
6.9.0

調査

環境準備

必要なパッケージをインストールしていきます。

$ echo "{}" > package.json
$ npm install --save-dev webpack babel-loader babel-core babel-preset-react
$ npm install --save react react-dom

.babelrc の作成

$ touch .babelrc
{
  'presets': [
    '@babel/preset-env', '@babel/preset-react'
  ]
}

webpack.config.js の作成

$ toucn webpack.config.js
module.exports = {
  entry: './entry.js',

  output: {
    filename: 'output.js'
  },

  module: {
    rules: [
      {
        loader: 'babel-loader',
        exclude: /node_modules/,
        test: /\.js$/,
      }
    ]
  }
}

js ファイルの作成

entry.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './Hello';

ReactDOM.render(
  <Hello />,
  document.getElementById('root')
);

Hello.js

import React from 'react';

export default function Hello() {
  return <h1>Hello!!!</h1>;
}

ビルド

$ ./node_modules/.bin/webpack --config webpack.config.js

動作確認

index.html

<div id="root"></div>
<script src="/path/to/output.js"></script>

/path/to はご自身のパスに変更してください。

参考