jtk

webpack 導入編

f:id:jotaki:20181228214933p:plain

参考

既定値で package.json 作成

cd [project folder]
npm init -y

webpack-cliwebpack-dev-server のインストール

npm i -D webpack webpack-cli webpack-dev-server

iinstall-DdevDependencies

ビルド実行

とりあえず初期値で webpack.config.js は作らずに実行

package.json

{
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "start": "webpack-dev-server"
  }
}

ビルドの実行

npm run build

webpack.config.js での webpack-dev-server の設定

webpack4 対応 webpack-dev-server の主要な設定オプション(CLI,webpack.config.js)の意味と挙動 - Qiita が参考になりました。

webpack.config.js

// パスの取得
const path = require("path");
// [定数] webpack の出力オプションを指定します
// 'production' か 'development' を指定
const MODE = "development";

module.exports = {
  mode: MODE,
  // エントリーポイントとなる.jsファイル( /src/index.js の場合は省略可能)
  entry: `./src/assets/js/index.js`,
  // ファイルの出力設定
  output: {
    path: path.join(__dirname, "dist"), // 出力ファイルのディレクトリ名( /dist/ の場合は省略可能)
    publicPath: "/assets/js/", // ブラウザからバンドルにアクセスする際のパス
    filename: "bundle.js" // 出力ファイル名
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "index.html"
    })
  ],
  // devServer ローカル開発用環境を立ち上げる
  devServer: {
    contentBase: path.join(__dirname, "dist"), // HTML等コンテンツのルートディレクトリ
    open: true, //実行時にブラウザが自動的に localhost を開く
    port: 3000, // ポート番号
    watchContentBase: true // コンテンツの変更監視をする
  }
};

webpack-dev-server で自動監視実行

npm run start

HTML / CSS(Sass) / JavaScript(Babel) のコンパイル

各パッケージ、プラグインのインストール
# HTML
npm i -D webpack webpack-cli html-webpack-plugin html-loader
# CSS(Sass)
npm i -D webpack webpack-cli sass-loader node-sass style-loader css-loader
# JavaScript(Babel)
npm install -D webpack webpack-cli babel-loader @babel/core @babel/preset-env

webpack.config.js での設定

webpack.config.js を展開する

// パスの取得
const path = require("path");
// [定数] webpack の出力オプションを指定します
// 'production' か 'development' を指定
const MODE = "development";
// ソースマップの利用有無(productionのときはソースマップを利用しない)
const enabledSourceMap = MODE === "development";
// プラグイン
const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  // production: 最適化された状態で出力
  // development: ソースマップが有効された状態でJSファイルが出力
  mode: MODE,
  // エントリーポイントとなる.jsファイル( /src/index.js の場合は省略可能)
  entry: `./src/assets/js/index.js`,
  // ファイルの出力設定
  output: {
    path: path.join(__dirname, "dist"), // 出力ファイルのディレクトリ名( /dist/ の場合は省略可能)
    publicPath: "/assets/js/", // ブラウザからバンドルにアクセスする際のパス
    filename: "bundle.js" // 出力ファイル名
  },
  module: {
    rules: [
      {
        // .js の場合
        test: /\.js$/,
        use: [
          {
            // Babel を利用する
            loader: "babel-loader",
            // Babel のオプションを指定する
            options: {
              presets: [
                // プリセットを指定することで、ES2018 を ES5 に変換
                "@babel/preset-env"
              ]
            }
          }
        ]
      },
      // .html の場合
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      // .scss の場合
      {
        test: /\.scss/, // 対象となるファイルの拡張子
        use: [
          // linkタグに出力する機能
          "style-loader",
          // CSSをバンドルするための機能
          {
            loader: "css-loader",
            options: {
              // オプションでCSS内のurl()メソッドの取り込みを禁止する
              url: false,
              // ソースマップの利用有無
              sourceMap: enabledSourceMap,
              // 0 => no loaders (default);
              // 1 => postcss-loader;
              // 2 => postcss-loader, sass-loader
              importLoaders: 2
            }
          },
          {
            loader: "sass-loader",
            options: {
              // ソースマップの利用有無
              sourceMap: enabledSourceMap
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "index.html"
    })
  ],
  // devServer ローカル開発用環境を立ち上げる
  devServer: {
    contentBase: path.join(__dirname, "dist"), // HTML等コンテンツのルートディレクトリ
    open: true, //実行時にブラウザが自動的に localhost を開く
    port: 3000, // ポート番号
    watchContentBase: true // コンテンツの変更監視をする
    // inline: true // ライブリロードをページ全体に適用
    // hot: false // 変更のあったコンポーネントのみをリロード
  }
};

とりあえずこのような形で 1 ページものならなんとか作れるようになりそうです。
フォルダ階層などに関してはあまり案件ベースでのイメージが湧かないままです。 Babel などは設定細かく見ていこうと思います。