1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. webpack
  6. »
  7. 【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法

【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法


※追記(2018/5/15)
殆ど意味のない例を使っての説明にのちのち後悔し、余分な部分を大幅に削除しました。


畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。

今回はnpm-scriptsを使ってオリジナルのコマンドを設定する方法を紹介します。

webpackのインストール方法や、簡単な使い方などの入門編はこちらの記事をご覧ください。
【初心者向け】webpack 4入門。一番簡単で詳しい使い方

目次
  1. npm-scriptsの使い方
  2. まとめ

npm-scriptsの使い方

package.jsonにnpm-scriptsで設定しておいてビルドする方法があります。
よく紹介されているのは、以下のような方法です。

package.json

{
  "name": "webpack-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15"
  }
}

7行目に、"build": "webpack",と追加しました。
こうすることで、以下のコマンドで実行できるようになります。

$ npm run build

よく使うオプションをここであらかじめつけておくと、コンパイルが楽になるかもしれません。

まとめ

今回はnpm-scriptsに書いておく方法を紹介しました。
よく使うオプションをあらかじめ設定しておくことで、作業が捗るようになると思います。

以上、npm-scriptsでオリジナルのコマンドを設定する方法でした。

この企画の一覧はこちら

  1. 【初心者向け】webpack 4入門。一番簡単で詳しい使い方
  2. 【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法
  3. webpackの設定ファイル「webpack.config.js」の使い方を覚えよう
  4. webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

スポンサードリンク

関連コンテンツ

オススメ記事

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 今回はPugでWordPressテーマを作る方法を少し紹介します。 詳しいテーマの作り方はこちらをご覧ください。 WordPressのテーマを自作

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

java

Javaのクラスとメソッドの違いとは?ゲーム風に解説。

この頃小説を読んでいなく、何か読みたいなと思っている@It_is_Rです。 Javaを勉強し始めたばかりの人は、何やら難しい単語に混乱する人も多いでしょう。その中で、クラスとメソッドって一体何が

【Mac】ローカルにWebサーバを立ち上げる超簡単な方法!

JavaScriptを使ってWebページなどの開発をしていると、Google ChromeやSafariなどのブラウザでうまく開けない場合が稀にあります。 そんな時、ローカルにWebサーバを立ち上げ

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

【Gitの使い方 – その5】リモートリポジトリ(GitHub)へPushしてみよう!

現在、新曲熱意制作中の@It_is_Rです。 さて、Gitの使い方5回目の今回は、GitHubのリモートリポジトリを作成し、そこにローカルリポジトリをPushする方法を紹介します。 [se

【enchant.js入門】ガンシューティングゲームの作り方を完全解説!

enchant.jsを使ってガンシューティングゲームの開発を行なっていきます。 enchant.jsはゲームを作るのに特化したJavaScriptフレームワークです。 これを使うことで、Jav

zsh

enhancd で cd コマンドを超便利に! インストールと使い方。

曲を作っても、再生数が伸びない。@It_is_Rです。 やかましいわ。 ターミナルをカッコよくするシリーズ4回目です。 今回は enhancd というプラグインを使って cd コマンドを便利

リセットCSS は何を使う? まとめ8選と2019年版ランキング

Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあります。 しかし、何を使っていいのかと感じている人もいると思います。 今回はこの リセットCSS につい

コメントをどうぞ!

メールアドレスが公開されることはありません。