webpackとBabelの基本を理解する(1) ―webpack編― - Qiita
独学の内容をまとめたものです。誤りがございましたら、ご連絡いただけると幸いです。 リンク 1. webpackとBabelの基本を理解する(1) ―webpack編―（本記事） 2. webpackとBabelの基本を理解する(2) ―Babel編― 3. webpackとBabelの基本を理解する(3) ―webpackとBabel編― 4. webpackとBabelの基本を理解する(4) ―React編― 5. webpackとBabelの基本を理解する(5) ―Sass編― 概要 この記事の概要 目的 フロントエンドの環境構築に利用されるツールへの理解を深める 本記事のゴール webpackでJSファイルを結合する方法を知る 対象者 WEBフロント担当者 HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解している人 npmの利用方法を理解している人 環境
webpacker/css.md at master · rails/webpacker · GitHub
CSS, Sass and SCSS Webpacker supports importing CSS, Sass and SCSS files directly into your JavaScript files. Importing and loading styles is a two step process: You need to tell webpack which file(s) it has to compile and know how to load When you do import '../scss/application.scss', you're telling webpack to include application.scss in the build. This does not mean it's going to be compiled int
webpackでモジュール解決しながらディレクトリ構成を保ったまま書き出す - Qiita
webpackって超便利ですよね。 違うファイルで作ったモジュールを１つにまとめてることができて、bundle.jsみたいなファイルにまとめることが出来て。。。 でも。。。。 僕みたいなまだまだレガシーエンジニアには１つのファイルにまとめてSPAライクにすることなんて出来ないわけです。 ぶっちゃけ共通のApp.jsと各ページ1ファイル読み込むパターンで十分なんです。 初期ロードで数10MBのjsを読み込むのって我慢できないんです。 なので今回はwebpackを使って複数のディレクトリにまたがったファイルを依存解決も行いながら別ディレクトリに同じ構成で書き出すのをやってみたいと思います。 目指す姿 applicationのルートディレクトリにfrontendsディレクトリを作成し、PC用の各ページのjsファイル、mobile各ページ用のjsファイル、共通で使えそうなmodulesファイルに分
すべてをjsにまとめる思想を理解する - webpackハンズオンシリーズ｜こんぴゅ
javascriptの開発では、sassやtypescriptなどのコンパイル、minifyやautoprefixerでの最適化、依存関係を解決しbundleするなど多様な工程があるので、属人化・職人依存を避けるためにタスクランナーでの自動化が昔から当たり前に行われています。 webpackはこの手のツールのデファクトです。webpackはタスクの自動化支援ではなく、なんでもjsにまとめるという仕事をうまくやる事に特化しています。gulpやbrowserifyで行なっていたようなタスクの自動化はnpm scriptで十分やん、という割り切りを感じます。 なんでもjsで扱えるようにするので、cssや画像やhtmlもjs内にロードでき、設定が煩雑になりにくくなります。 webpackのloaderという仕組みがjsへの組み込みや最適化をうまくやってくれるのですが、どういうものか検証していきまし
なんとなくで理解しないWebpackのCSS周辺 - Qiita
CSS in JSに夢を見たが、なかなか一筋縄では行かなかったので1、webpackにおけるCSSと本気で向き合ってみた。 しかしまだ理解が甘いところがあったのでloader, pluginまわりの関係性を整理した。 （前置き）webpackの基礎情報 css関連の本題にはいる前に、webpackの基礎を再確認する。 Webpackの特徴 webpackの特徴的な事項として、CSSや画像など、javascriptでないデータも基本的に全てをjavascriptで扱ってしまう、という事が挙げられる。 同等の対抗として挙げられるbrowserifyやrollupは、あくまでも「javascriptのmodule解決」にフォーカスしているのに対して、webpackは全く違う方向を向いている loaderとpluginの違い 結構あやふやに扱っていたが、上記のwebpackの基本部分を明確にして考
最新版で学ぶwebpack 5入門 - スタイルシート(CSS/Sass)を取り込む方法 - ICS MEDIA
ウェブのフロントエンドエンジニア開発で人気を集めるモジュールバンドラーのwebpack（ウェブパック）。webpackにはJavaScriptファイルのバンドルだけではなく、スタイルシート（CSSやSass）のバンドルもできます。ICS MEDIAの記事「最新版で学ぶwebpack入門」では、webpackの基本的な使い方を解説しましたが、この記事ではスタイルシートに焦点をあてて解説します。 ※webpackを利用するには事前にNode.jsをインストールしておいてください。この記事では2021年5月現在最新のNode.js v14、npm 7と、webpack 5をもとに解説しています。 この記事で説明していること CSSをバンドルする利点 CSSのバンドル方法 Sassのバンドル方法 Sass内の画像もバンドルする方法 容量の閾値で画像のバンドルを制御する方法 PostCSS(Auto
Rails5.1.3 + Webpacker 3.1でsassとjsの管理をSprocketsからWebpackerに移行する - Qiita
Rails5.1.3 + Webpacker 3.1でsassとjsの管理をSprocketsからWebpackerに移行するRailssprocketsVue.jswebpackwebpacker こちらの、Webpacker 3.1対応版です。 ほとんど差分はないですが、上記の記事からの変更点としては webpacker 3系の設定ファイルの書き方に対応 bootstrap v4.0.0-beta.2 に対応 vue.jsを使った場合のwebpackのresolve.alias周りの設定 実際に開発を進めた後のディレクトリ構成の変遷 となってます。上の記事を既に見ている人は、その辺だけ見てもらう形でも問題無かなと思われます。 インストール Gemfileにwebpackerを追加します。
今日から簡単！Webpacker 完全脱出ガイド - pixiv inside
こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見ています。 今回は pixivFACTORY において、フロントエンドのビルドに Webpacker を利用するのをやめた話をします。 Webpacker をやめよう rails/webpacker は Ruby on Rails のプロジェクトに webpack を導入する際に用いられる gem です。必要な webpack の設定ファイルの生成や、Rails のテンプレートからビルド済みの JavaScript ファイルを読み出すために用いるヘルパー関数など、多数の機能を提供します。 結論から言うと、Webpacker を入れてもあまり良いことがありませんでした。単に必要が無いというより、あることによって面倒が増していると感じたので、剥がしました。以下 Webpacker が導入された Ra
Rails webpackerでJavaScriptのエントリーポイントをAction毎に分ける
こんにちは。@river_okaです。 JavaScriptファイルをプロジェクトで一つにまとめると、肥大化してどこをいじったら良いかわからないみたいな状態になっちゃいますよね。 そういうときはページ毎に.jsファイルを分けたりします。 今回はwebpacker を使って entry pointをページ毎に分けていきたいと思います。 サンプルは下記に雑にあげております。 https://github.com/kawoka/webpacker_entry_point_example Webpackerの導入railsのプロジェクトから作る場合は下記 rails new myapp — webpack既存のプロジェクトに追加する場合は下記でGemが入ります # Gemfile gem ‘webpacker’, ‘~> 3.5'初期化bundle exec rails webpacker:ins
webpackでnode_modules配下のcssをimportするときのpathにチルダを入れる - development log
npm installやyarn installで追加したcssを@importするとき、../../node_modules/normalize.css/normalize.cssのようにnode_modulesまでのディレクトリを辿っていくのは面倒。 stackoverflow.com So using the prefix ~ at the start of the path tells the Webpack loader to resolve the import “like a module”. ~をパスの先頭につけると、node_modules配下のパスを解決してくれる。 @import "~normalize.css/normalize.css"; なので、このように~付きにすればnormalize.cssがimportできるようになる。
Webpacker 3ではじめるRailsエンジニアのためのモダンフロントエンド入門 〜Sprocketsを使わないRailsプロジェクト試案〜
はじめに Webpack、ES6風味のJavaScript、そして他すべてのモダンなクライアント側開発体験の進歩をまだ試していないなら、Webpacker 3.0は、はじめるのに絶好の機会だ。 —DHH Rails 5.1 で Webpacker が導入され、Railsでもモダンなフロントエンド開発が簡単にできるようになりました。 Webpackerはリリースからどんどん進化しており、 3.0でさらに使いやすくなりました。 本記事には2つの目的があります: RailsのAsset pipeline(Sprockets)をまったく使用しなくてもRails開発が可能であることを実証すること モダンフロントエンド未体験のRailsエンジニアに向けて、実際のコードをまじえつつ、モダンフロントエンド開発の雰囲気を伝えること また、Webpackerの概要を知りたいRailsエンジニアへの機能と使い方
Railsが5.1になることでフロントエンドの開発が本当に楽しくなりました - チラシ裏日記上等！！新館
Ruby on Rails の 5.1.0.beta1がリリースされましたね！ weblog.rubyonrails.org 仕事でRailsを使うものとしてちゃんと触っておかねばと思い、まずは自分の好きなJavaScript周りがどれぐらい良くなったのか見てみたところかなりびっくりしました。JavaScriptすごく開発しやすいです。 webpack があって yarn がありますし、ReactやVue、angular まで rake タスクでセットアップできます。ちょっと前までRailsでJavaScriptやるのが辛いなんて言っていたのが嘘みたいです・・・。 今回はRails 5.1.0 で Vue.js を使って新しくプロジェクトを作るところまでやってみました。 rails new rails webpacker:install:vue Webpackでのビルド Hot Modul
webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ
はじめに こんにちは、投稿開発部エンジニアの芳賀です。 既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsでReact.jsを使ういくつかの方法 2016年時点で、RailsでReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://github.com/bholloway/resolve-url-loader/blob/master/packages/resolve-url-loader/README.md
フロントエンドエンジニアのための webpacker - Qiita
なんか書いていこうぜー.com | なんか書いていこうぜー.com