[webpackレシピ] その0: webpackをはじめる

公開日:2019-05-09
最終更新:2019-05-09

この記事について

wepback.config.jsのいろんなパターンを目的別にまとめていきたいと思います。

webpack初心者の方以外には需要が無いので、webpack初心者向けの記事になるように気をつけて書いていきます。
質問などありましたらお気軽にコメントまでどうぞ!

entryの扱いについては過去の記事に書いているのでそちらをご参照ください。
webpackの基本だけどハマりやすいentryの設定と[name] - sansaisoba's tech blog

webpackの使い方

webpack本体のインストール

npm、もしくはyarnでインストールします。

$ yarn add --dev webpack webpack-cli  

webpack.config.jsの準備

https://webpack.js.org/concepts あたりから取ってきました。
とりあえず、基本的な内容だけ記載します。

// webpack.config.js  
const path = require('path');  

module.exports = {  
  entry: {  
    main: './src/index.js'  
  },  
  output: {  
    path: path.resolve(__dirname, 'dist'),  
    filename: '[name].js'  
  }  
};  

pathモジュールは必須ではないですが、使い勝手も良いし標準モジュールなので使用したほうが楽です。

entryは任意ですが、特に決まっていないのであればとりあえずデフォルトと同じ値を書いておいたほうが後々変えたくなったときにもわかりやすいのでお薦めです。
この際に省略形で書くと暗黙で使用されるmainsrcの関係がわかりづらいので、明示的に記載したほうが良いでしょう。
同じくoutputも任意ですが、明示的にデフォルトと同じdistを指定しておくことをお勧めします。

ソースディレクトリの準備

ソースディレクトリは任意の構成で問題ありませんが、個人的にはデフォルトである /src をソースディレクトリとして使用することをお勧めします。

エントリーポイントの準備

とりあえず、webpack.config.jsに合わせてindex.jsを設置します。

.  
├── package.json  
├── src  
│   └── index.js  
├── webpack.config.js  
└── yarn.lock  

試しに動かす

とりあえず適当なJSを書く

// src/index.js  
const foo = "bar";  

console.log(foo);  

webpackを実行

webpackコマンドはnode_modules/.bin/webpackにインストールされます。

$ ./node_modules/.bin/webpack --mode=development  --devtool=false  

こちらのコマンドで実行することもできますが、yarnを使用している場合は、
yarn <name>とすることでnode_modules/.bin/以下のコマンドを呼び出してくれる機能があるので、以下で実行できます。

$ yarn webpack --mode=development --devtool=false  

ちなみに、この機能はyarn runの一部みたいです。

https://yarnpkg.com/ja/docs/cli/run

modeについて

webpackでは、modeを明示的に指定しない場合、以下のような警告が発生します。

WARNING in configuration  
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.  
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/  

指定しなくても普通にproductionとして出力されますが、開発時はdevelopmentとして出力したほうがいいので明示的に指定したほうがいいでしょう。

modeについての詳しいドキュメントは以下にあります。
https://webpack.js.org/configuration/mode

devtoolについて

devtoolは、webpackする際のsource mapの出力方法や、コードの出力方法を変更することができます。

https://webpack.js.org/configuration/devtool

個人的には 、noneの指定になるfalseinline-source-mapが好みですが、
hot reloadなどを行う際にはeval系でないと動かないので、そのあたりは適宜変更してください。

実行結果

--mode=development --devtool=falseで実行した場合、dist/index.jsに以下のように出力されるはずです。

(一部抜粋)

/***/ (function(module, exports) {  

const foo = "bar";  

console.log(foo);  


/***/ })  

まとめ

  • デフォルトでも変更する可能性がある設定は、できるだけ明示的に書いておいたほうが良い
    • ただし、modedevtoolのように場面によって流動的な内容は都度指定したほうが良い(と思う)
  • modeの指定は必須
    • なお、modewebpack.config.jsに固定で書くこともできるので、実行時に上書きするのもありです
  • devtoolを変えると出力内容が変わる
    • 複雑なのでマニュアル読みながらいろいろ試すといいです
  • 私はnpmよりyarn派
記事が少しでもいいなと思ったらクラップを送ってみよう!
18
+1
選択肢が少ないということは幸せなことなんだよ。

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする