■目次
Webpackの導入(JSファイルをまとめるまで)watchモードで自動ビルドbabelを使ってES6をコンパイルSASS、Gulp、Laravel Mix など
■Webpackの導入(JSファイルをまとめるまで)
モジュールバンドラーと呼ばれるもので、JSファイルをまとめるツール ファイルをまとめる処理を自動で行うこともできるため、タスクランナーと似たような位置づけでもある はじめてのWebpack - Qiita https://qiita.com/cheez921/items/266b1b4534b6111a9686 最新版で学ぶwebpack 3入門(図解付き) - JS開発で必須のモジュールバンドラー - ICS MEDIA https://ics.media/entry/12140 webpack 入門 (v3系 対応) - Qiita https://qiita.com/soarflat/items/28bf799f7e0335b68186 すべてをjsにまとめる思想を理解する - webpackハンズオンシリーズ|こんぴゅ|note https://note.mu/konpyu/n/n694491cd9e80 WebpackがいいのかGulpがいいのかはよく考えたい WebpackはJavaScriptのみを扱い、GulpでSASSや画像を扱う…という手法も多い Gruntは滅びゆく技術になっているようなので避ける方が無難 【保存版】gulp, webpack, parcel...増え続けるタスクランナーの特徴を理解して最適なものを選択しよう | WEBA https://hirata.blog/201712_taskrunner/ ■導入 Node.jsは、Electronなど他ツールインストール時に導入済み >node -v v6.5.0 C:\Users\refirio\webpack-test を作成しておく 以降、webpack-test を作業フォルダとする >cd C:\Users\refirio\webpack-test >npm init -y package.json が作成される。作成された内容は以下の通り
{ "name": "webpack-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
>npm install -D webpack node_modules フォルダが作成され、その中に必要なファイルが作成される (「-D」は「--save-dev」の略) package.json に scripts を追加する この時点で以下のようになっている
{ "name": "webpack-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "scripts": { "build": "webpack" }, "devDependencies": { "webpack": "^3.10.0" } }
■JSファイルをまとめる テストプログラムを作成する js/main.js
// import 文を使って sub.js ファイルを読み込む。 import {hello} from './sub'; // sub.jsに定義されたJavaScriptを実行する。 hello();
js/sub.js
// export文を使ってhello関数を定義する。 export function hello() { alert('helloメソッドが実行された。'); }
設定ファイルを作成する webpack.config.js
module.exports = { // メインとなるJavaScriptファイル(エントリーポイント) entry: './js/main.js', // ファイルの出力設定 output: { // 出力ファイルのディレクトリ名 path: __dirname + '/js/', // 出力ファイル名 filename: 'bundle.js' } };
以下で実行する >npm run build js/main.js と js/sub.js をもとに js/bundle.js が作成される 適当なHTMLファイル(ここでは sample.html とした)を作成し、プログラムを呼び出してみる
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Webpack</title> <script src="js/bundle.js"></script> </head> <body> <h1>Webpack</h1> <p>Webpackのテスト。</p> </body> </html>
「helloメソッドが実行された。」というアラートが表示されれば成功。
■watchモードで自動ビルド
webpack.config.js で「watch: true,」を追加するとwatchモードになり、自動でビルドされる 実行コマンドは変わらない
module.exports = { // watchモードを有効にする watch: true, // メインとなるJavaScriptファイル(エントリーポイント) entry: './js/main.js', // ファイルの出力設定 output: { // 出力ファイルのディレクトリ名 path: __dirname + '/js/', // 出力ファイル名 filename: 'bundle.js' } };
■babelを使ってES6をコンパイル
※追加パッケージをインストール >npm install -D babel-loader babel-core babel-preset-env webpack.config.js にローダーの設定を追加する これでES6で書いたコードをES5に変換してくれる
module.exports = { // watchモードを有効にする watch: true, // メインとなるJavaScriptファイル(エントリーポイント) entry: './js/main.js', // ファイルの出力設定 output: { // 出力ファイルのディレクトリ名 path: __dirname + '/js/', // 出力ファイル名 filename: 'bundle.js' }, // ローダーの設定 module: { rules: [{ // ローダーの処理対象ファイル test: /\.js$/, // ローダーの処理対象から外すディレクトリ exclude: /node_modules/, // 利用するローダー use: [{ loader: 'babel-loader', options: { presets: ['env'] } }], }], }, };
■SASS、Gulp、Laravel Mix など
■SASS WebpackでJavaScriptを扱うのは容易だが、CSSを扱うのは厄介みたい WebpackではCSSも画像もJavaScriptに変換して1ファイルとして読み込まれる 果たしてここまですべきなのかは疑問 「脱Webpack」の時代が来たときに厄介な負債となりそう なんとなくで理解しないWebpackのCSS周辺 - Qiita https://qiita.com/inuscript/items/0574ab1ef358fecb55b9 webpack 3入門:スタイルシート(CSSやSass)を取り込む方法 - Qiita https://qiita.com/clockmaker/items/8fab54c93e84001846b0 ■Gulp Webpack単体ではなく、Gulpと組み合わせて使うこともできるみたい ただし、これならWebpackを使わずにGulpで完結させるほうが楽のような gulpとbabelとwebpackというフロント開発3銃士 - Qiita https://qiita.com/bakira/items/3c4e2d10aae085767817 webpack + Gulp + Babelな開発環境の作り方メモ | よしあかつき https://yosiakatsuki.net/blog/try-webpack-gulp/ JavaScriptの変換のみにWebpackを使い、他をGulpで行う…という使い方が紹介されている GulpではTypeScriptは使えるが、純粋なES6→ES5変換は使えない…とか? ただし、ECMAScript2015として記述したコードは原則TypeScriptとしても実行可能らしい Gulpで始めるwebpack 4入門 - Qiita https://qiita.com/tonkotsuboy_com/items/2d4f3862e6d05dc0bea1 ■Laravel Mix Laravel Mixから使うのが便利らしい? みたところ、SASSもJavaScriptではなくCSSファイルとして書き出せているみたい (もとは Laravel-Elixir と呼ばれていた) アセットのコンパイル(Laravel Mix) 5.5 Laravel https://readouble.com/laravel/5.5/ja/mix.html Laravel Elixir 5.1 Laravel https://readouble.com/laravel/5.1/ja/elixir.html 他のフレームワークでも使える Laravel-Elixir - localdisk http://localdisk.hatenablog.com/entry/2015/11/20/212236