vueファイル(単一ファイルコンポーネント)をwebpackでビルドzukucode主にWEB関連の情報を技術メモとして発信しています。Vue.jsvueファイル(単一ファイルコンポーネント)をwebpackでビルド.vueファイル(単一ファイルコンポーネント)をwebpackでビルドする手順を紹介します。バージョンは、Vue.jsは2.x、webpackは2.xです。わかりやすくするため、空のプロジェクトから出来る限り最小構成で作成していきます。最初にpackage.jsonを作成します。質問されますが、すべて何も入力せずに全てEnterキーをクリックしていけば問題ありません。(ES6)などで書かれたソースコードを一般的なブラウザがサポートしているECMAScript5の形式に変換できます。babel-preset-stage-0の4つのパッケージをインストールします。babel-preset-stage-0設定ファイルの作成.babelrcという名前のファイルをプロジェクトのルートフォルダに作成します。このファイルを作成しておけば、babelを実行する時に自動でこの設定ファイルを読み込みます。"stage-2"]}設定内容は必要に応じて書き換えてください。必要なパッケージのインストール以下のパッケージが必要になるのでインストールします。css-loader参考までに、この記事を執筆時点での各パッケージのバージョンは以下になります。"^2.3.3"}特にVue.jsとwebpackは1.xと2.xでコーディング方法が異なる場合があるので注意が必要です。フォルダ構成Laravelのフォルダ構成に合わせて以下のようにします。node_modulespublicjsresourcesassetsjs.babelrcpackage.jsonresources/assets/jsフォルダにjsやvueを実装していきます。publicフォルダが実際に公開するフォルダです。public/jsフォルダにビルドしたjsファイルが作成されます。エントリポイント最初にwebpackで最初に読み込まれるファイルを作成します。このファイルを起点にwebpackの処理が行われるので、エントリポイントと呼ばれます。jsフォルダにapp.jsファイルを作成します。h(App)});単一ファイルコンポーネント次に.vueファイルを作成します。先ほど作成したapp.jsでimportしているApp.vueを作成します。jsフォルダにcomponentsフォルダを作成し、その中にApp.vueを作成します。}};</script>webpackの設定ファイルwebpackの設定ファイルを作成します。webpack.config.jsというファイル名でプロジェクトフォルダの直下(package.jsonファイルと同じ階層)に作成します。}};ここまでのフォルダ構成は以下になります。node_modulespublicjsresourcesassetsjscomponentsApp.vueapp.js.babelrcpackage.jsonwebpack.config.jsonビルドコマンドの設定package.jsonファイルのscriptsにwebpackをビルドするコマンドを記載します。testはデフォルトで記載されていると思います。webpackを実行するとビルドが行われてpublic/js/app.jsのファイルが作成されます。webpack-dev-serverで開発サーバーを起動するで、開発サーバー(localhost)を起動して、ビルドしたファイルの動作確認を行います。lessをImportしてビルドするhtmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。外部のlessファイルをモジュールとしてImportしてwebpack...ExtractTextPluginでcssファイルを出力するwebpackのプラグインExtractTextPluginを使って、ビルドされたjsファイルからstyleの部分を抽出してcssファイルで出力します。extract-text-webpack-plu...webpack-dev-serverで開発サーバーを起動するwebpack-dev-serverで開発サーバーを起動します。自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。lessで外部のlessファイルをImportするメインカラーなどの共通情報は外部のlessファイルに記載し、各vueファイルではそのlessファイルをImportして実装するのが効率的です。Replacement(HMR)の設定を行います。webpackでページごとにファイルを分割するvue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。lessを使いwebpackでビルドする.vueファイル(単一ファイルコンポーネント)のstyleをcssではなくlessで実装して、webpackでビルドをします。vue-loaderのオプションにlessのloaderを追加します。postcssを導入するwebpackでpostcssを導入してautoprefixerなどを行います。postcss-loaderはwebpackでpostcssを行うために必要です。postcssの設定ファイルを作成しま...webpack-dev-serverでhttpsでのアクセスを可能にする方法webpack-dev-serverでhttpsでのアクセスを可能にする方法を紹介します。システム日付をYYYYMMDD形式などの文字列型に変換する当ホームページに記載されている会社名・製品名・システム名などは、各社の登録商標、もしくは商標です。