※追記(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でオリジナルのコマンドを設定する方法でした。
この企画の一覧はこちら
- 【初心者向け】webpack 4入門。一番簡単で詳しい使い方
- 【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法
- webpackの設定ファイル「webpack.config.js」の使い方を覚えよう
- webpack-dev-serverの基本的な使い方と設定方法の詳しい解説