webpack チュートリアルをやったその1

December 06, 2020

webpack のチュートリアルやります。

https://webpack.js.org/guides/getting-started/

Getting Started

webpack のインストール

$ npm install webpack webpack-cli --save-dev

npm-scripts に build を追加しよう。

package.json からはローカルインストールしたパッケージが参照できるので、npx webpack ではなく webpack で OK。

package.json

{
  "scripts": {
    "build": "webpack"
  }
}

プロジェクトをこうしよう。

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

webpack.config.js は webpack の設定ファイル。以下がデフォルト？

webpack.config.js

const path = require("path")

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

npm run build すると dist ディレクトリの JavaScript ファイルにバンドルされるよ。

Asset Management

CSS、画像、フォント、データ（csv、xml、JSON、etc.）もバンドルできるよ。

CSS については以下の通り。他のも似たような感じ。

$ 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$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
}

  webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- style.css
    |- index.js

npm run build すると CSS ファイルが JavaScript ファイルにバンドルされるよ。バンドルされた JavaScript ファイルを実行すると HTML に style タグが追加される。

Output Management

出力は複数にできたら嬉しいよね、という内容だけど、その恩恵は今のところまだわからないかも。

webpack.config.js

const path = require("path")

module.exports = {
  entry: {
    index: "./src/index.js",
    print: "./src/print.js",
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
}

HtmlWebpackPlugin

HTML も出力されるプラグイン。こっちは嬉しいかも。

$ npm install --save-dev html-webpack-plugin

webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
  entry: {
    index: "./src/index.js",
    print: "./src/print.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Output Management",
    }),
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
}

dist フォルダのクリーンナップ

$ npm install --save-dev clean-webpack-plugin

webpack.config.js

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports = {
  entry: {
    index: "./src/index.js",
    print: "./src/print.js",
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "Output Management",
    }),
  ],
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
}

Development

mode を develop にしてみましょう。

ここのページだと解説がまるでないけど、こっちのページに何が起こるのか載っている。

https://webpack.js.org/configuration/mode/#mode-development

webpack.config.js

module.exports = {
  ～～～
  mode: 'development',
  ～～～
}

ソースマップ

エラーが起きた時にバンドル前のファイル名の行数がわかるようになる。

webpack.config.js

module.exports = {
  ～～～
  devtool: 'inline-source-map',
  ～～～
}

Development Tool

3 つあるけど、大抵の場合は webpack-dev-serverで OK、とのこと。

$ npm install --save-dev webpack-dev-server

dev server にバンドルされたファイルの場所を教えます。

webpack.config.js

module.exports = {
  ～～～
  devServer: {
    contentBase: './dist',
  },
  ～～～
}

dev server を簡単に動かせるようにスクリプトを書きます。

package.json

{
  "scripts": {
    "start": "webpack serve --open"
  }
}

と、書いてあるももの、オプションの指定間違ってるっぽい？？

↓ にしておきます。

package.json

{
  "scripts": {
    "start": "webpack serve"
  }
}

npm run startすると dev server が起動します。 localhost:8080 にアクセスするとバンドル後のファイルにアクセスできます。ファイルの変更を検知したら再 build とブラウザのリロードを自動でやってくれます。便利。

続く