npm run devとnpm run productionの違い
php:npm run devとnpm run productionの違い2020-07-28 20:42私はLaravelとvue.jsで非常に新しいです。違いは何ですか？ npm run dev そして npm run production これは環境と関係がありますか？ npm run dev ソースマップを作成し、js/cssを縮小しないため、デバッグとエラーの発見が容易になります npm run production 一方、ソースマップは作成されず、すべてのjs/cssファイルが縮小されるため、本番環境で使用できるようになり、システムによる読み取りが高速になります。 一般的にあなたは使いたいでしょう npm run dev サイトを開発しているとき npm run production デプロイする準備ができたとき。 これらは、 package.json スクリプトを実行する 以
Webpack を使っていてファイルの相対パスを書くのがつらくなったとき - kitak blog
小ネタ。 Webpack(というよりモジュールバンドラ) を使っていて、ディレクトリの階層が深くなってくると import や require でロードするファイルのパスを ../../../../foo.js のように ../ の数を正確に指定するゲームになってくる。 以下のように書くことで src ディレクトリをルートにしてパスを指定することができるようになるのだけど resolve: { modules: [ path.resolve(__dirname, 'src'), "node_modules" ], }, 同僚氏に npm でいれたパッケージか、src にあるファイルか分からないから、src ディレクトリの alias を定義したらどうか、と勧められた。 resolve: { alias: { '@': resolve(__dirname, 'src'), }, }, これで
Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。 - Qiita
概要 ・Laravel Mixとは、フロントエンドのアセットをコンパイル、バンドルしてくれるツール ・ツールの中身はwebpackを利用している ・webpack設定ファイルをより分かりやすく簡単に書けるように設定ファイルをラップしている ・lessやsass、babelなどよく使われるローダーが最初から用意されていて、デフォルトで利用することができる ・Laravelを使っていないアプリでも、コンパイル・バインディングのツールとして利用できる ※webpackが分からない方はこちらを参照 webpackとは？ 使い方 初期状態 ※npmが分からない方は、先にこちらを参照 npmとは？【フロントエンドパッケージ管理】 Laravelをインストールすると、 package.jsonとwebpack.mix.jsが用意されている。 package.jsonには Laravel Mix自体やその
Webpackのビルド時間を短くするための取り組み - freee Developers Hub
メリークリスマス。freeeでエンジニアをやってます @yo_waka です。 この記事は freee Developers Advent Calendar 2017 の25日目です。 Webpack でビルドしてますか？僕は今日もビルドしています。 弊社ではフロントエンドのビルドに Webpack を用いているのですが、サービスの規模が大きくなるとともにビルド時間が長くなってきて困ってきました。 会計freee というサービスのフロントエンドの規模的にはこのような感じです。 JSコード行数: 275421行 Webpack エントリポイント数: 108 そこそこですね。 煩悩の数だけJSのエントリポイントがあります。 エントリポイントが多い理由は、元々は Rails の標準である Sprockets のみでビルドしていたものを少しずつ移行していったためです。 元々SPAで作られているアプ
thread-loaderとcache-loaderでwebpackのビルドを高速化する - dackdive's blog
はじめに こちらのスライドを見て。 Webpackのビルド時間を1/3にした話 #gotandajs // Speaker Deck 紹介されている thread-loader も cache-loader も知らなかった！ので、使い方やどういった効果があるのか自分でも調べてみます。 なお、スライド中にもありますが、たしかに webpack 公式ドキュメントの Build Performance でもこれらの loader について言及されていました。 https://webpack.js.org/guides/build-performance/#worker-pool https://webpack.js.org/guides/build-performance/#persistent-cache thread-loader Runs the following loaders in
webpackのビルドを10倍高速化するプラグインの紹介 - Qiita
2018/3/29 キャッシュで問題が起こったときに、キャッシュを削除する方法を追記しました。 概要 TypeScript + React + Webpack で開発しているフロントエンドプログラムのビルド時間が、ファイルが増えるのに従ってどんどん長くなって来ていたのですが、その問題を解決するWebpackプラグインを見つけたので紹介します。 情報元: 0–100 in two seconds — speed up webpack 上記の記事によると、DLL と HardSourcePlugin を両方追加すると良い、と書かれてます。 残念ながら手元の環境では DLL はビルド時にエラーが起こったので採用を見送りましたが1、HardSourcePlugin は導入に成功し、ビルド時間を 105sec -> 10sec (!!!) に減らすことができました。 HardSourceWebpac
5.5 アセットのコンパイル(Laravel Mix) Laravel
イントロダクションIntroduction Laravel Mixは多くの一般的なCSSとJavaScriptのプリプロセッサを使用し、Laravelアプリケーションために、構築過程をWebpackでスラスラと定義できるAPIを提供しています。シンプルなメソッドチェーンを使用しているため、アセットパイプラインを流暢に定義できます。例を見てください。Laravel Mix[https://github.com/JeffreyWay/laravel-mix] provides a fluent API for defining Webpack build steps for your Laravel application using several common CSS and JavaScript pre-processors. Through simple method chaining
Laravel Mix なら設定3行だけで webpack/Sass/JS のビルド環境ができました ｜ Tips Note by TAM
2017.09.11 Laravel Mix なら設定3行だけで webpack/Sass/JS のビルド環境ができました Laravel Mix って？ Laravel Mix は PHPのフレームワーク Laravel に同梱されているビルドツールです。webpack をベースに作られていて、設定の記述量が少なく済むのが特徴。また、Laravel を使わないプロジェクトでも、Laravel Mix 単体でインストールして使うことができます。(Laravel 5.3までは Elixir という名前でした) ということで、Laravel Mix 単体を使ったビルドをやってみます。内容としてはフロントエンドのみの案件を想定し、 JavaScript (ES6) のビルド SCSSのビルド Uglify SourceMap出力 Watch Browsersync によるライブリロード これくら
LaravelでJavascriptやCSSを使おう( Laravel Mix ) - Qiita
はじめに Laravelを学んで「一通りデータベースとのCRUD処理はもう出来た！」という人のための記事。 次はそのサイトにJavascriptやCSSを使ってみよう。 今回はJavascriptでアラートを表示させてみます。 Laravel Mixとは Laravel Mixは多くの一般的なCSSとJavaScriptのプリプロセッサを使用し、Laravelアプリケーションために、構築過程をWebpackでスラスラと定義できるAPIを提供しています。(Laravel公式リファレンス) 何言ってんだ・・・？ 僕もわかりません笑 簡単にいうと、 Laravel Mixはjsファイルやcss(sass)ファイルをLaravel上で使えるようにしてくれるやつ。 ( jsファイルやsassファイルをコンパイルしてLaravel上で使えるようにするAPI ) インストールと準備 以下をお手元のパソコ
面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門 | さくらのナレッジ
最近JavaScript関連の開発で採用が進んでいる「webpack」は、JavaScriptファイルの変換や結合といった操作をコマンド1つで実行できるツールだ。本記事では、webpackとは何かという基本的な概念から導入方法、実際の利用例などを紹介する。 モジュール管理機構の不足や未サポート機能の問題をツールで解決する「webpack」 今日のWeb開発においてJavaScriptの利用は避けることができないが、JavaScriptのソースコードをどのように管理・デプロイすべきかという問題に対しては、まだ決定的な解決策が生まれていない状況が続いている。その根本的な原因の1つには、最近までJavaScriptにおいて普遍的に利用できるモジュール管理システムが存在しなかったことがある。 一般的なプログラミング言語では、大規模なプログラムを実装する際に作業性やメンテナンス性を高めるためプログラ
すべてをjsにまとめる思想を理解する - webpackハンズオンシリーズ｜こんぴゅ
javascriptの開発では、sassやtypescriptなどのコンパイル、minifyやautoprefixerでの最適化、依存関係を解決しbundleするなど多様な工程があるので、属人化・職人依存を避けるためにタスクランナーでの自動化が昔から当たり前に行われています。 webpackはこの手のツールのデファクトです。webpackはタスクの自動化支援ではなく、なんでもjsにまとめるという仕事をうまくやる事に特化しています。gulpやbrowserifyで行なっていたようなタスクの自動化はnpm scriptで十分やん、という割り切りを感じます。 なんでもjsで扱えるようにするので、cssや画像やhtmlもjs内にロードでき、設定が煩雑になりにくくなります。 webpackのloaderという仕組みがjsへの組み込みや最適化をうまくやってくれるのですが、どういうものか検証していきまし
webpack 4 入門 - Qiita
お知らせ（2020/08/25 追記） Udemy で「webpack 最速入門（10,800 円 -> 2,000 円）という講座を公開しました。 本来の価格は10,800円ですが、上記リンクからアクセスすると2,400円で購入できます。 どんな内容？ webpack を利用したフロントエンド開発環境が構築できるようになる、ハンズオン形式の講座です。 詳細は上記のリンクのプレビュー動画で詳しく説明しています。 記事との内容の違い 記事の内容に、以下の内容や特徴が追加された感じです。 実務で利用できる開発環境を徐々に構築していくので、記事と比べて実践的な内容 ハンズオン形式の講座なので、手を動かしながら webpack を学習できる webpack の設定ファイルに追加する値の詳細をすべて解説 記事では解説していない細かい補足や、機能のご紹介 なぜ npm scripts を利用するのか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
