webpackのインストールと設定の指示

リロードとコンパイルを行います。実際には、ブラウザが認識できない構文をブラウザが認識できる構文にコンパイルすることです。例えば、less を css にコンパイルしたり、ES6 構文を ES5 に変換したりします。

I/O リクエストを減らします。通常、リクエスト後にブラウザに HTML が返されます。この時、コンソールを開くと、HTML ページでスクリプトやリンクなどのタグで参照されている静的リソースに対してブラウザが再度リクエストを行います。しかし、webpack のパッケージングにより、すべての静的リソースが統合され、I/O リクエストが減少します。

# webpackのインストール
npm install --save-dev webpack

# webpack-cliの依存関係のインストール
npm install --save-dev webpack-cli

# 新しいプロジェクトの作成
mkdir demo

# プロジェクトに移動
cd demo

# 初期化
npm init -y

# 開発バージョンのCLIのインストール
npm install webpack webpack-cli --save-dev

新しい HTML ファイルと JS ファイルを作成し、プロジェクトディレクトリは以下のようになります。

  demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js:

function component() {
  var element = document.createElement('div');

  // Lodash（現在はスクリプトタグで読み込んでいます）は、
  // この行が必要です。
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html:

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

package.json の中で：

"main": "index.js"を削除し、"private": trueを追加します。

ディレクトリを調整します：

  demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

index.jsでlodashの依存関係をパッケージ化するために、ライブラリをローカルにインストールする必要があります。ターミナルに入力してください：

npm install --save lodash

次に、index.jsの内容を調整します。

// 1行追加
import _ from 'lodash';

dist/index.htmlからインポートされた外部ファイルlodashを削除します。

<script src="./src/index.js"></script>を削除します。

ターミナルを実行します：

npx webpack

これにより、必要なmain.jsファイルがdistにパッケージ化されます。

また、手動でファイルを設定することもできます。ルートディレクトリにwebpack.config.jsファイルを作成します。

const path = require('path');

module.exports = {
  // パッケージ化するファイルがここにあります。複数のファイルの場合は、配列形式で記述します。
  entry: './src/index.js',
  output: {
    // ここはパッケージ化されたファイル名ですが、手動で変更することもできます。
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

CLI を使用してローカルの webpack を実行する方法はあまり便利ではないため、ショートカットを設定することができます。

package.jsonの"scripts"に追加します。

"build": "webpack"

これにより、npxの代わりにnpm run buildコマンドを使用できます。

distフォルダ内のjsファイルを削除し、再度パッケージ化します。

npm run build

プロジェクトディレクトリを確認してください。

demo
|- package.json
|- webpack.config.js
|- /dist
  |- bundle.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

問題ありません、パッケージ化に成功し、ブラウザでも正常に表示されます。

JS ファイルで CSS ファイルをimportする場合、style-loaderとcss-loaderをインストールして設定する必要があります

npm install --save-dev style-loader css-loader

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  // 追加した内容
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
};

その後、JS モジュールで：

import './style.css'

npm run buildを実行すると、自動的にパッケージ化されます。

画像の読み込み

file-loaderをダウンロードしてインストールします。

npm install --save-dev file-loader

webpack.config.js:

module: {
  rules: [
    {
      test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
      ]
      },{
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
      ]
    }
  ]
}

フォントの読み込み

webpack でフォントリソースを読み込む

データリソースの読み込み

さらに、読み込むことができる便利なリソースには、データ、jsonファイル、CSV、TSV、XMLなどがあります。実際には、jsonは組み込まれており、直接import data from './data.json'でインポートできます。

しかし、CSV、TSV、XMLはできませんので、依存関係を設定する必要があります。

ターミナルでダウンロードしてインストールします：

npm install --save-dev csv-loader xml-loader

webpack.config.js:

{
  test: /\.(csv|tsv)$/,
  use: [
    'csv-loader'
  ]
},
{
  test: /\.xml$/,
  use: [
    'xml-loader'
  ]
}

srcディレクトリにdata.jsonという json ファイルを追加し、index.jsでインポートします。

import data from './data.json'