ゆるふわエンジニアのブログ

やったこと、調べたこと等をつらつらと書いていくかもしれません。

webpackで使用するconfigファイルを指定(選択)する方法

本記事では、webpackで使用するconfigファイルを指定する
(選択する)方法を紹介していきます。

本記事の内容です。

webpackのconfigファイルを準備する

下記の通り、使用するwebpackのconfigファイルを複数準備します。

開発用(webpack.config.development.js)

module.exports = {
 
    // メインとなるJavaScriptファイル(エントリーポイント)
    entry: `./js/index.js`,

    // 下記の1行を追加する
    mode: 'development',
   
    // 下記の1行を追加する
    // 値はお好みで
    devtool: 'cheap-module-eval-source-map',

    // ファイルの出力設定
    output: {
      //  出力ファイルのディレクトリ名
      path: `${__dirname}/dist`,
      // 出力ファイル名
      filename: 'main.js'
    },
  };

本番用(webpack.config.production.js)

開発用configファイルのmodeをproductionに書き換えただけです。

ビルド時に使用するconfigファイルを指定する

下記の通り、ビルド時にオプションで使用するconfigファイルを指定します。
[使用するconfigファイルのファイル名]に、使用するconfigファイルの名前を入力します。

npx webpack --config [使用するconfigファイルのファイル名]

上述したそれぞれのファイルを指定する場合は、下記の通りとなります。

開発用configファイル(webpack.config.development.js)を使用してビルド

npx webpack --config webpack.config.development.js

本番用configファイル(webpack.config.production.js)を使用してビルド

npx webpack --config webpack.config.production.js

Visual Studio CodeでVue.jsの開発を行うためにインストールしているプラグイン

本記事では、Visual Studio Codeを使用してVue.jsを用いた開発を行うために
インストールしているプラグインについて紹介していきます。

本記事の内容です。

vetur

Vue.jsのコードスニペットです。
入力補完などを行ってくれるのですが、触ってみたところ、
JavaScriptファイルにしか対応していないようです。

VueHelper

veturと同じく、Vue.jsのコードスニペットです、
こちらは、HTMLファイルやJavaScriptファイルの入力補完も行ってくれます。
正直、こちらだけインストールしておけばいい様な気がするのですが、
veturと競合して変な動作等をしないようなので、両方インストールしています。

Visual Studio CodeでHTML+CSS+JavaScriptの開発を行うためにインストールしているプラグイン

本記事では、Visual Studio Codeを使用して
HTML + CSS + JavaScriptを用いた開発を行うために
インストールしているプラグインについて紹介していきます。

本記事の内容です。

HTML関係

HTML Snippets

HTML5に対応したスニペットです。

HTML Hint

HTMLの静的解析ツールです。


CSS関係

IntelliSense for CSS class names in HTML

CSSクラスの入力補完プラグインです。


JavaScript関係

ES Lint

JavaScriptの静的検証ツールです。

その他

Open in browser

HTMLファイルを右クリックすると、デフォルトブラウザで開くか
その他のブラウザで開くかを問われるメニューが追加されます。

Windows10(Build1803)でGoogle Chromeが正常に動作しない件

新しくPCを購入し、Windows10をBuild1803にアップグレードした結果、
Google ChromeVivaldiが正常に動作しなくなったため、メモがてら書いておきます。

結論から言ってしまうと、本記事には起こった出来事が書かれているだけで、
解決策は記載していません。

皆さん、Windows10のアップグレードにはご注意を。

本記事の内容です。

何が起こったのか?

Windows10を2018/04あたりの時期に降ってきた
Build1803にアップグレードした結果、Google Chrome
Vivaldiが正常に動作しなくなりました。

具体的には、Webサイトへアクセスしても、
応答時間が長すぎる関係で「このサイトへはアクセスできません。」と
表示されるようになりました。

下記の情報からすると、どうやら証明書周りが正常に動作していないらしく、
2018/05のWindows Updateで直るようなのですが、私の環境は直りませんでした。
https://productforums.google.com/forum/#!topic/chrome-ja/QGwBg1f74vI;context-place=topicsearchin/chrome-ja/1803
https://productforums.google.com/forum/#!topic/chrome-ja/K3DdvG87870;context-place=topicsearchin/chrome-ja/1803

どうしたらいいのか?

諦めて、今年の秋ごろに降ってくるであろう大型アップデートを待ちましょう。
もしくは、IE11やEdgeといったMicrosoft製のブラウザを使用しましょう。


迂闊にアップグレードした結果、こういうことになるとは。
Microsoftには、こういった時のために、サポート期間中は大型アップデート過去分の
OSイメージ(ISO)を公式サイトで公開および配布していただきたいですね。

webpackで本番用と開発用にビルド方法を切り替える

本記事では、webpackで本番用と開発用にビルド方法を
切替える方法を紹介していきます。

本記事の内容です。

本番用ビルド設定

webpack.config.jsに、mode行を追加します。
内容は、下記の通りです。

module.exports = {
 
    // メインとなるJavaScriptファイル(エントリーポイント)
    entry: `./js/index.js`,

    // 下記の1行を追加する。値は'production'。
    mode: 'production',

    // ファイルの出力設定
    output: {
      //  出力ファイルのディレクトリ名
      path: `${__dirname}/dist`,
      // 出力ファイル名
      filename: 'main.js'
    },
  };

上記の設定でビルドを行うと最適化された状態でjsファイルの出力が行われます。
また、mode行を省略した時も、上記と同じ設定でビルドされるようです。

開発用ビルド設定

webpack.config.jsに、mode行およびdevtool行を追加します。
内容は、下記の通りです。

module.exports = {
 
    // メインとなるJavaScriptファイル(エントリーポイント)
    entry: `./js/index.js`,

    // 下記の1行を追加する。値は'development'。
    mode: 'development',
   
    // 下記の1行を追加する。値はお好みで。
    devtool: 'cheap-module-eval-source-map',

    // ファイルの出力設定
    output: {
      //  出力ファイルのディレクトリ名
      path: `${__dirname}/dist`,
      // 出力ファイル名
      filename: 'main.js'
    },
  };

上記の設定でビルドを行うと、ブラウザの開発者ツール上でデバッグ可能な形で
jsファイルが出力されます。
ブラウザ上でソースコードを確認、デバッグ実行を行う際は、
webpack://
という場所にファイルが出力されますので、注意してください。(Chromeで確認。)
IE11の場合は、jsファイルを列挙した際にそのまま表示されるようです。

開発用ビルド設定のdevtoolについて

上記で説明したdevtoolの値には、下記サイトで説明されている値を設定することができます。
Devtool

特に好みが無ければ、上記と同じ
cheap-module-eval-source-map
で良いと思います。

webpackを使用してjsファイルをまとめる方法

本記事では、webpackを使用してjsファイルを
まとめる方法を紹介していきます。

本記事の内容です。

webpackって何?

簡単に説明しますと、複数のリソースファイル(jsファイル、cssファイル、画像ファイル等)を
まとめた配布物を生成するビルドツールです。
これを使用すると、複数のファイルを配布する必要が無くなり、
また、ブラウザでファイルを読み込む時に複数のファイルを読み込む必要が
無くなるため、パフォーマンス向上を図れます。

また、公式サイトは下記になります。
webpack.js.org

webpackを使用する準備

コマンドプロンプトを開き、webpackを使用する対象の
ソースコードが存在するフォルダへ移動します。
その後、下記のコマンドを実行して、package.jsonを生成します。

npm init -y

webpackのインストール

package.jsonの生成が終わったら、次は、下記のコマンドを実行して
webpackを使用するためにwebpack本体のインストールを行います。

npm i -D webpack webpack-cli

webpackの設定ファイル作成

webpackのインストールが終わったら、package.jsonが存在するフォルダに
webpackの設定ファイル(webpack.config.js)を作成します。
下記の内容は、index.jsをメインにdistフォルダへ、
main.jsという名前で複数のjsファイルをまとめた結果を出力するようになっています。

module.exports = {
 
    // メインとなるJavaScriptファイル(エントリーポイント)
    entry: `./js/index.js`,

    // ファイルの出力設定
    output: {
      //  出力ファイルのディレクトリ名
      path: `${__dirname}/dist`,
      // 出力ファイル名
      filename: 'main.js'
    },
  };

JavaScriptソースコードの準備

今回は、index.jsとindex2.jsという2つのファイルを用意し、1つにまとめてみます。
それぞれのファイルの内容は、下記の通りです。

index.js

import * as hogeFile from './index2';

$(function() {
    hogeFile.hoge();
    hogeFile.fuga();
});

index2.js

export function hoge() {
    alert('hoge');
}

export function fuga() {
    alert('fuga');
}

ビルド

下記のコマンドを実行し、ビルドを行います。

npx webpack

以上で、複数のjsファイルをまとめることができます。

jsファイルをまとめた結果

最後に、参考までに今回jsファイルをまとめた結果を下記に記載しておきます。

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t),$(function(){alert("hoge"),alert("fuga")})}]);

JavaScriptの処理をブラウザ上で止めてデバッグする方法

本記事では、JavaScriptの処理をブラウザ上で止めて、
デバッグする方法について紹介していきます。

本記事の内容です。

JavaScriptソースコードに一文加える

JavaScriptソースコード内に、
debugger;
という一文を加えます。
すると、後述するブラウザの開発者ツールを開いた状態で、
debugger; の所で処理を止めることができます。
(ブレークポイントを設定した時と同じ動きになります。)

$(function() {
    // 下記の debugger; という一文を加えると、
    debugger; // 処理がここで止まる
    alert('debug!');
});

ブラウザの開発者ツールを開く

ブラウザを開き、F12を押し、開発者ツールを開きます。
その後、該当するJavaScriptの処理を実行させると、
debugger; の所で処理が止まり、そこからステップ実行等行えるようになります。
後は状況に応じてF10でステップ実行するなり、
F11で関数内にステップインするなり、
F8で処理を実行するなり、ご自由にどうぞ。