webpack初級者から中級者にステップアップするために理解しておきたいプラグインまとめ - Qiita
はじめに Rails5系から、webpackerが導入され注目を集めるwebpackですが、名前聞いたことあるし、いっちょ試してみっかとHello, World!的に触って見た人は多いのではないでしょうか？ 僕も流行りに乗っかって、gulp、Browserify、Reactifyで行っていたReactのjsxのコンパイルを、webpackとbabelを用いて行うように変更したのですが、まあ、設定ファイルを作成するのが難しいわけですよ。 実際は、entryとoutputと必要ならloaderを定義するだけである程度の事はできるので、特定の目的を達成するだけなら凄くシンプルなので分かりやすいんです。関連するプラグイン豊富ですし、やれることも多いですし。 なので、厳密に言うと、関連するプラグインや設定が豊富が故に自分たちのプロダクトに合った設定ファイルを作成するのが難しいんですよね。 その設定フ
Combine Webpack with Gulp 4 | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Webpack is so hot right now! Webpack is great when it comes to module bundling and working with frameworks like Vue or React, but it is a bit more awkward when handling static assets (like CSS). You might be more used to handling your static assets with something like Gulp, and there are som
webpackでReact/Reduxを本番環境用にビルド(production build)する - dackdive's blog
はじめに React に限らず、JavaScript を使ってると本番環境用のビルド（以後、production build）として圧縮や難読化を行う必要があります。 webpack にはそのためのプラグインとして UglifyJsPlugin があるのは知っていましたが、 単純にこのプラグインを適用しただけだとブラウザで以下のような warnings が出ていることがわかりました。 Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is
Rails5.1から導入されるwebpacker.gemは本当にRailsのフロントエンド開発に福音をもたらすのか? - Qiita
Rails5.1が今betaで出ていますね。中でも目玉はwebpacker.gemによるモダンなフロントエンド開発がRailsに導入されることでしょう。 今までのRailsのasset pipelineとは別に、yarnによって依存性を管理しwebpackで結合する独立したjsのビルドシステムがサポートされます。 これによって、以下のような従来のasset pipelineでは解決がむずかしかった問題への解が示されました。 coffee scriptへの依存 npmによる依存性、バージョン管理が難しい javascriptのライブラリが野良gem化されてupdateされない問題 webpacker.gemはyarn/webpackの薄いwrapperとなっていて、加えて幾つかのrakeタスクを追加することでフロントエンド開発をサポートします。 具体的には以下のような機能が提供されます。 y
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
Webpack Tutorial: Understanding How it Works
Sean Landsman 23 January 2017 | Tutorial Webpack Tutorial | ag-GridThis Webpack tutorial is my attempt to document what I learnt and is the blog I wish I’d found when I first started my Webpack journey, all those months ago. When I first started working at ag-Grid (which is a great place to work!) I had to ramp up on many technologies and frameworks that I hadn’t used before. One of these was We
Webpack your bags | Webpack 1.13.0 日本語リファレンス | js STUDIO
このページは、Webpackの公式ドキュメント内で紹介されていたMaxime Fabre氏によるWebpack your bags - madewithloveの記事を madewithloveブログの「Content is published under the Creative Commons BY-SA license」に基づいて翻訳したものになります。 ブログで紹介されているWebpackのバージョンは1系のものになります。 2017年2月現在Webpackは1系を非推奨として2の使用を勧めています。 webpack webpack1 (旧サイト) 非推奨 もしかしたら、あなたは既にここで紹介するWebpackと呼ばれるクールなツールについて聞いたことがあるかもしれません。 ある人は「このツールはGulpのようなビルドツールだ」と言い、またある人は「これはBrowserifyのよう
Webpack の本質とそれがよく分かるチュートリアル - おいちゃんと呼ばれています
DHH さんが Rails 5.1 に Webpack を取り入れる意向 を示し、webpacker gem なるものをつくり始めたようである。 今後ますます Webpack は利用されていくであろうが、一方で Webpack はいろんなことができ過ぎるが故にかえって本質が掴みにくい点があると思う。そういえばこの間も、同僚のデザイナーに Webpack がよく分からないんですけど？と質問されていたのだった。 そこで今回 Webpack の本質つまり Webpack がどんな問題を解決しようとしているものなのかについて整理する。また Webpack の中核となる機能をよく理解できるチュートリアルを見つけたので紹介する。 （フロントエンドエンジニア Advent Calendar 2016 - Qiita の 9日目が空いていたので、後付けだけどそこに登録した） Webpack がつくられた背
レガシーシステム上のJavaScriptをモダンビルドにしていくwebpack利用実例 - Qiita
(function(){ var self = this; $("button").click(function(){ // }) })() // 古いコードはglobalに定義された何か SomeLib.prototype.foo = function(){ // } 下記のような特徴があります。 ライブラリ系（jQueryやjQuery.functionなど）は別途読み込み common.jsのようなよくある共通ファイルが存在 1ページ中で、scriptはファイル単位で複数読み込み 原始的なJavaScript配信状態（Sprocketsのようなビルドプロセスとは全く無縁な状態） jQuery以外に、ライブラリ・フレームワークなどは基本入っていない 色々とJavaScript初心者殺しな記法が多い (function(){})()を利用したglobal汚染回避 self = thisの
webpackでJavaScriptライブラリを利用する
webpackでJavaScriptライブラリを利用する webpackで様々なJavaScriptライブラリをコマンドラインからインストールして利用する事が可能になります。 webpackのインストールと利用方法 まずプロジェクトフォルダで以下のコマンドでpackage.jsonを作成します。 npm init -y 次にwebpackを以下のコマンドでインストールします。 npm install --save-dev webpack webpackをインストールしたならpackage.jsonと同一階層にwebpack.config.jsという設定ファイルを作成します。 設定内容はひとまず以下のようにしておきます。これは./src/script.jsの内容をコンパイルして./dist/script.jsに出力するという命令です。 module.exports = { entry: __
なんとなくで理解しない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の基本部分を明確にして考
step by stepで始めるwebpack - Qiita
※webpack1系の記事です。 1→2への移行ガイドを見る限り破壊的な変更点はそんなにありませんが、preLoadersやpostLoadersがなくなっていたり、差が出ていますのでご注意ください。 https://webpack.js.org/guides/migrating/ webpackを手を動かしつつ学べる初学者向け資料を作成しました。 公式のチュートリアルもあるのですが、webpackが使用されているOSSのボイラープレートを見る限り、世の中の使われ方に沿ってないかも？と思い書きました。 これから始める人の手助けになれば幸いです。 また最終形のソースをupしてあるので詰まったら見てください。 webpackとは webpack で始めるイマドキのフロントエンド開発の説明が良かったので引用させていただきます。m(_ _)m webpack は WebApp に必要なリソースの依
webpack.config.jsの読み方、書き方 - dackdive's blog
（2017/08/28追記） この記事は webpack v1 系での config について書かれています。 v2 系以降は一部の項目名などに変更があります。 Migrating from v1 to v2 を読んで v2 系への移行を行うか、または私のリポジトリを参考にしてください。 https://github.com/zaki-yama/react-redux-template https://github.com/zaki-yama/redux-express-template （追記ここまで） はじめに webpack を使った JS/CSS のビルドを行う場合、webpack.config.js という設定ファイルを用意してコマンド自体は webpack で済ませることがほとんどだと思いますが 公式チュートリアルでも webpack.config.js については少ししか触れ
【意訳】Webpackの混乱ポイント - Qiita
この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに
webpackを使った開発の効率化方法やloaderの種類をTLで話してきました【スライド付き】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、まろCです。 2月に2本のLTに登壇してきたのですが、どちらもwebpackを題材にして喋ってきました。 今回は、そのときのスライドを共有したいと思います。また、すぐに使えるインストール方法もあわせて解説したいと思います。 webpackとは http://webpack.github.io/ webpackとは、一言でいうと依存性を解決するツールです。 HTML上に、何本もscriptタグでJavaScriptを読み込んでいたものを、1本のJSにしてパックします。 エントリーポイントと呼ばれるJSにrequireと書いて、他のJSを読み込むことで、ビルド時にそれを探して1つのJSファイルの中に書き出してくれます。 自作のモジュールを、パスから引っ張ってきたりbowerから引っ張ってきたりできるのはもちろん、node_modulesからも使えるものは使えたりと何でもありなツール
webpackを使い倒す - Thujikun blog
本エントリーJavaScript Advent Calendar 2014 7日目の記事になります。 webpackとは 概要については最近いろんな方が書いてるいるのでそちらを参考にしていただければつかめるかと。 全部のせRequireJSっぽいWebpackを使ってみた。 RequireJS等はもう古い。WebPackとは？ ようはナウいフロントエンドの依存解決ツールですね。 っていうネタで書こうと思っていたら、昨日yutaponさんが既に書いていたりするので（gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】）、いいところはパクリ参考にしつつ、もうちょっとwebpackに突っ込んだ内容を書いてみようと思います。 Options entryとoutput 簡単に試すときはentryは1ファイルだけ指定できればよいですが、実際にプロジェクトで使うとなると複
webpackでbower使って外部ライブラリの依存解決する - Qiita
したい 解決方法 bower_components以下のディレクトリもrequire pathにいれて、resolverプラグインで解決するようにする。 というかこの記事でやってることは、基本的には usage with bowerのまんまなんだけど… 実例 var webpack = require('webpack'); var path = require('path'); module.exports = { output: { filename: 'app.js' }, resolve: { root: [path.join(__dirname, "bower_components")], extensions: ["", ".js"] }, plugins: [ new webpack.ResolverPlugin( new webpack.ResolverPlugin.Dir
uu59のメモ | browserifyとwebpack
webpack for browserify users browserify for webpack users browserify フロントエンド界にCommonJSスタイルを持ち込める 一部Node.jsのモジュールも使える。pathとかurlといった便利な小物から、zlibとかcryptoなどの本格派も移植されてる substackプロダクト。よってUNIX哲学へのこだわりが強く、必要なさそうな機能は本体で持ってない。 本体は単機能だけどwatchifyやdebowerifyやbundle-factorなどと連携して多くのことができる 当然ながらgrunt/gulpに組み込むことも出来る webpack フロントエンド界にCommonJSやAMDスタイルを持ち込める JS以外にもCSSとか色々扱える オプションやモジュールが色々あって気になったことは大抵できると思う grunt,
『Ameba Ownd のフロントエンド開発』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 Ameba Ownd（アメーバオウンド）のフロントエンドエンジニア、五藤（@ygoto3_）です。前々々々回、前々々回に引き続き Ameba Ownd について、今回はフロントエンド開発のお話です。 本エントリーのアジェンダ： はじめに Ameba Ownd は３つのアプリケーションで構成 再利用可能な機能単位でのパッケージング 機能別のパッケージをまとめてモジュール化 複数のアプリケーションで再利用可能な UI コンポーネント作成 機能の独立性が高い大きなモジュールは非同期読み込みでファイル分割 ３つのアプリケーションで異なるルーティングの特徴 階
webpack で始めるイマドキのフロントエンド開発 - Qiita
webpack とは webpack は WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。 WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした（少なくとも、自分はそうでした）。 webpack を使えば、Grunt も Gulp も必要ありません！覚えるべきことはほとんどありません。（必要なら）簡単な設定ファイルを書いて webpack コマンドを実行するだけです。 以下では基本的な使い方を見ていきます。 ※もちろん Grunt/G
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
