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入門。一番簡単で詳しい使い方

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 サイトのタイトルを画像に変更!

笑いたい時に笑えず、笑っちゃいけない時に笑えてくる@It_is_Rです。 WordPress テーマ自作シリーズ第9回目となります。 今回はカスタムロゴの使い方を紹介したいと思います。

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。【準備編】

いつもどうもです。@It_is_Rです。 少し前まで、私は FC2ブログ を使っていました。 やはり個性を大切にしたい私にとって、用意されたテンプレートを使うことに抵抗がありました。 「

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

enchant.js

enchant.js でキャラクターのアニメーションを作ってみよう

前回の記事では、キャラが移動する時のアニメーションがありませんでした。 突っ立ったまま進んで行く、まるで幽霊の様な状態です。 これでは、キャラが生きてるのか死んでるのか分からない! というこ

【Bootstrap 4】badgeを使ってテキスト横に小さな文字を入れる方法

前にBootStrap4の記事を書いていましたが、日にちが空いてしまいましたね。@It_is_Rです。 前回は全体的な機能とアラートの使い方を紹介しました。 今回はバッジの使い方を紹介していき

WordPress テーマ自作 | サイト全体のレイアウトを整える。

水を飲む時、口に入れすぎてしまう@It_is_Rです。 WordPressテーマ自作シリーズ第11回目です。 今回は、サイト全体のレイアウトを整えてみましょう。 このシリーズの前回の記事

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

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

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの"最強"カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます

HTML CSS

CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

体重が50キロを切りました。@It_is_Rです。身長は171あります。 骨っていうなー! サイトを作る時、円形のパーツを作りたい時ってよくありますよね。画像を丸くして。。。なんてやっている人

コメントをどうぞ!

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