Webpack 一番基本の設定

注意

この記事の質は保証しません。自分向けメモ。

やること

webpack を使ってJavaScriptをバンドルしてHTMLに読み込む。

CSSはとりあえず無視。

ディレクトリ構成

JSファイルはsrc以下に置く。 ビルドが成功すると、dist以下にHTMLとJSファイルが生成される。

必要なファイル

package.json

npm init (yarn init)でひな型を作る。その状態から設定に必要ないくつかの項目を追加する。

必要な項目

これらを追加。ライブラリのバージョンは適当に直して。

{
  "private": true,
  "main": "src/index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack",
  },
  "dependencies": {
    "lodash": "^4.17.15" // これはライブラリが正しくロードできるかのテスト用
  },
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3"
  }
}

webpack.config.js

const path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/index.js",
  mode: "none",
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/",
  },
  plugins: [
    new HtmlWebpackPlugin()
  ],
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
    open: true
  }
};

サンプルプログラム

index.js

import { appendStrings } from "./appendStrings";

document.body.appendChild(
  document.createTextNode(appendStrings("Hello", "world!"))
);

appendStrings.js

import _ from "lodash";
export function appendStrings(a, b) {
  return _.join([a, b], " ");
}

実行の仕方

ブラウザで見る方法:

npmならnpm start, yarnならyarn start

ビルド単体なら

npmならnpm run build, yarnならyarn build