webpack

expressとwebpackな環境でホットリロード設定する

express+webpackな環境でホットリロード設定を行い快適な開発環境を構築する はじめまして。最近SHIFTに入社した三輪です。SHIFT社内のプロダクト開発に従事しております。 今までサーバサイドはRailsを使ってきましたが、初めてexpressを使うことになったので開発してるときに役立ったホットリロードの設定方法をまとめてみようと思います。 ホットリロード現在の開発環境ではWebpackでビルドしてNodeサーバの起動を行っている。 Webpackでは--w

スキ
8

TailwindCSSの再導入に挑んだ

今日はサンプルのrailsを使って、TailwindCSSの再導入に挑戦した。 ここで重要なことに気づいたのだが、railsにTailwindを導入するときと素のhtmlに導入する方法と全く異なるということだ。 動画では素のHTMLに導入をするものだったので、そのままrailsに導入しても指定したパスへのビルドができなかったり、JIT(開発用のモード)も作動しなかった。「rails Tailwind」で調べたところ、下記の記事に巡り会うことができ、railsへの導入には違

Webpackを学んだが、Tailwindを雰囲気で使っていたことがバレた

今日は下記の動画を見ながら、webpackとは何かを学び、サンプルのappを使って実際にコンパイルするところまで実践した。 参考動画: https://www.youtube.com/watch?v=7I8Eyf6vKbQ ↑スムーズに学習できました〜🙏 で、動画ではrailsも何もない環境でwebpackを学んだわけだが、実際に自分のappに落とし込もう!と思ったのだが、Javascriptのファイルたくさんあるし、そもそもgemにwebpackerという似たようなもの

スキ
1

備忘録 -Webpack導入編-

こんにちは。いといです。 最近後学のためにReactを勉強し始めました。 それに伴いWebpackを導入したのですが、参考にしていたネット記事ではバージョン等が古く期待通りの動作をしないことがあったので、 情報共有も兼ねてここに書いておこうと思います。(基本的には自分用) ※誤り等があればご一報ください。 以下環境やバージョン OS: MacOS Big Sur 11.4Node.js: 14.17.5npm: 7.21.1Webpack: 5.51.1Webpa

スキ
1
+28

駆け出しからGulpを使って即戦力になろう!

おかげさまで200名以上の方にご購入いただけました!!! このテンプレートファイルが皆さんのWEB制作に役立てば幸いです! こんにちは!いちくん(@tips__web)と申します 簡単に自己紹介 都内のWEB制作会社でエンジニアとして勤務しております(歴~3年) 普段はコーポレートサイトのWordPress構築をメインにやっていたり、デイトラというオンラインスクールのメンターも1年ほどやらせていただいております。 また、最近はMENTAも始めました! 案件の実装で相談でき

スキ
50
有料
1,980

モジュールバンドラで画像を扱う【webpack5】

動作確認時の環境は以下。(2021/08/10時点) // package.jsonから一部抜粋"devDependencies": { "autoprefixer": "^10.3.1", "css-loader": "^6.2.0", "postcss-loader": "^6.1.1", "sass": "^1.37.5", "sass-loader": "^12.1.0", "style-loader": "^3.2.1",

スキ
1

バンドル時にベンダープレフィックスを自動付与する【webpack5】

webpackについて学習中の講座は以下。 ※ただし、講座内のwebpackのバージョンは4なので、現在のwebpack5で動作確認済み。 環境は以下。 // package.jsonから抜粋"devDependencies": { "autoprefixer": "^10.3.1", "css-loader": "^6.2.0", "postcss-loader": "^6.1.1", "sass": "^1.37.5", "sass-l

スキ
1

モジュールバンドラ/webpackを学ぶための学習環境作り

オンライン学習プラットフォーム「Udemy」に、超絶わかりやすいwebpack学習講座が無料で公開されていた。 webpackを学習するための環境作りについて テキストでまとめる。 →講座は以下。 →webpackの公式サイト ▶︎必要なもの最低限必要なのは、以下の3点。 1. Node.js 2. webpack 3. webpack-cli ただし、webpackとwebpack-cliはバージョンにより挙動が異なる部分があるため注意が必要。 講座のとおりに進め

package.jsonにコメントを書く方法

どうも、おっさんです。 package.jsonにコメント書きたい!って思ったことないですか? おっさんは思いました。 結局、現状、こうなってます。 { "name": "my-package", "description": "my first package ever", "license": "MIT", "version": "1.0.0", "bin": "./cli.js", "main": "index.js", "scripts"

スキ
1

ポートフォリオに導入しているwebpack

「gulpfile.jsの中身をタスク毎に分割しました!」でwebpackの設定については割愛させていただきましたので、今回はこちらにフォーカスしていきます。(こちらも試行錯誤中ですのであくまでご参考までにどうぞ🙇‍♂️) フォルダ構造 まず、自分がwebpackで行っていることとしては主にJavaScriptファイルのみのバンドルになります。説明のためにJavaScriptファイル名は実際のものと変えています😅 script01.min.jsにバンドル・src/ass

スキ
3