面倒なJavaScriptコードのとりまとめがこれ1つで可能に、「webpack」入門 | さくらのナレッジ
最近JavaScript関連の開発で採用が進んでいる「webpack」は、JavaScriptファイルの変換や結合といった操作をコマンド1つで実行できるツールだ。本記事では、webpackとは何かという基本的な概念から導入方法、実際の利用例などを紹介する。 モジュール管理機構の不足や未サポート機能の問題をツールで解決する「webpack」 今日のWeb開発においてJavaScriptの利用は避けることができないが、JavaScriptのソースコードをどのように管理・デプロイすべきかという問題に対しては、まだ決定的な解決策が生まれていない状況が続いている。その根本的な原因の1つには、最近までJavaScriptにおいて普遍的に利用できるモジュール管理システムが存在しなかったことがある。 一般的なプログラミング言語では、大規模なプログラムを実装する際に作業性やメンテナンス性を高めるためプログラ
webpack4の基礎 - よちよち開発の日々
ついに webapck4.0.0がリリースされましたね！ 変更点としてよく言われているのが設定ファイルが不要ということです。 この記事では主要な変更点に絞って実際に手を動かしながらwebpack4の特徴を掴んでいくことを目的とします。 では早速、開発用のディレクトリを作成します。 mkdir webpack4_practice npm init -y package.jsonファイルが作られます。 ではではwebpack4.0.0をインストールしましょう！ npm i -D webpack webpackみたいにコマンドを実行している場合はcliを入れる必要があります。webpack-cliをインストールしましょう。 npm i webpack-cli -D インストールができたらpackage.jsonを開き、以下の記述を追加します。 "scripts": { "build": "web
Webpack4 + TypeScript + Sass + EJSの開発環境を構築する | あるいてっく
Webpack4がリリースされたので、Webpack4をベースにTypeScript、Sass、EJSの開発環境を構築したので、備忘録として残しておきます。 OS X 10.13.3 Node.js 9.5.0 ディレクトリ構造 ├── docs │ ├── css │ │ └── bundle.css │ ├── images │ │ ├── images │ │ │ └── 01.jpg │ │ └── 01.jpg │ ├── js │ │ └── bundle.js │ └── index.html ├── src │ ├── css │ │ ├── main.scss │ │ └── sub.scss │ ├── images │ │ └── 01.jpg │ ├── js │ │ ├── main.ts │ │ └── sub.ts │ ├── index.ejs │ └──
React を TypeScript で使う際のツール考察 2018 春 | La Verda Luno
最近のフロントエンドの流れから取り残されている感じがしたので、一念発起して React で小さなアプリを作ろうと思いました。 せっかくなので、 React 関連ツールはなるべく統合して使うようにし、コード本体は TypeScript を使って開発しようと設定を始めました。 （ webpack 4 が出てきてしまいましたので、まだ周回遅れです。） 残念ながら、 create-react-app でテンプレートを作成してからツールを追加していくたびにエラーに見舞われたので、メモ書きとして記録しておきます。 執筆に長い期間かかってしまいましたので、もしその間にライブラリがアップデートされ、動かなくなっていたら申し訳ありません。 目次と使用ツール （以下のリンクは関係する部分へジャンプします。） TL;DR create-react-app React 16 TypeScript webpack
webpack2でテンプレート用の複数ライブラリを1CSSファイルにビルドする
2017年 4月1日 22時45分 6年前 webpackでテンプレートに関するライブラリを1つのCSSファイルにビルドする方法の紹介です。 webpackでjavascriptライブラリを1つのファイルにバンドル化することは手軽ですが、 Webサイトのテンプレートをバンドル化するなら話しは変わってきます。 "" 「各種スタイルシートファイルのインポート」 「 バンドルファイルで読み込んだSASSやLESSファイルを CSSへ変換 」 「 フォントや画像等の外部ファイルの参照の解決 ( スタイルシート内での url関数 ) 」 「CSSファイルへ発行」 "" 上記４つに関するプラグインの追加や ルールの定義をする必要があります。 っということで、webpackを使って BootstrapやFont-awesome等のライブラリを使って デザインに関するスタイルシートを１ファイルに統合してみ
webpack 2 入門: HtmlWebpackPlugin を利用して表示 HTML を自動生成する | DriftwoodJP
var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { app: ['./app/index.js', './app/console.js'], vendors: './app/vendors.js' }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }, module: { : }, plugins: [new HtmlWebpackPlugin()] }; % $(yarn bin)/webpack Hash: ef551bd7848118795eac Version: webpack 2.6.1 Time: 4084ms Asset Size Chunks Chunk Name
TypeScriptでReactを書く – webpackを使った開発環境の構築方法
2017年に入りTypeScriptがだいぶ熱くなってきています。特に以下の2つのニュースはTypeScriptの使用について大きく後押ししてくれるものとなったかと思います。 Googleが社内の標準言語としてTypeScriptを追加SlackでのJavaScriptからTypeScriptへの移行こうした動きを受けて、私もTypeScriptへの移行を模索し始めました。今回の記事では、私が現在最も書く機会の多いReactをTypeScriptで書く環境の構築方法を紹介したいと思います。 はじめにTypeScriptは、言わずもがなMicrosoftが開発する静的型付けに対応したJavaScriptのスーパーセットです。 ReactをTypeScriptで書くメリットは、このTypeScriptの静的型チェックをReactの開発に導入できることです。特にReactでは、コンポーネント間で
30分ちょっとの時間と慣れと気合で作るフロントエンド開発環境 - 我が名はなんとか菜である！
初投稿です。 シャカイに出て1年とちょっとが経ちました。研修後に配属されたチームで、なんとあれほど避けていた フロントエンド をやるハメになりました。 大体ここ10ヶ月ぐらいで学んだり感じたりしたことをここに書いてみようと思います。 目次 エディタのインストール node.jsのインストール npmを使ってみる webpackのインストール babel及びプラグインのインストール webpack-dev-serverのインストール 目標: 基本的なnode.js, npmの仕組みを使ってフロントエンドの 最小限の 開発環境を構築する。 エディタのインストール メモ帳以外ならなんでもいいです。 僕はVisual Studio Codeを使ってます。 理由としては、JavaScriptの補完が大変優秀だったり、エディタ上で端末も起動できるので、node.jsを扱う上で大変相性がよかったり、など
@wakamshaさんの AltJS, AltCSS 課題を webpack, SCSS, TypeScript, React でやってみた | DevelopersIO
@wakamshaさんの AltJS, AltCSS 課題を webpack, SCSS, TypeScript, React でやってみた はじめに こんにちは、すわ＠秋葉原オフィスです。先日 Naoki YAMADA (@wakamsha) さんがSpeakerdeckで公開したAltJS/AltCSSに関するスライドを大変興味深く読ませてもらいました。 このスライドは社内の新卒社員向け研修の内容とのことで、最後に「課題」があったため、今回私なりに回答してみました。 …といったような、植木が執筆したブログに触発され、私が最近業務で使っている技術を織り交ぜた別解を作ってみました。 お題 JavaScript, CSS いずれも何かしらのプリプロセッサを使用すること（※HTMLは任意） ローカルサーバーの起動 ファイルを変更したら自動的にビルド処理が実行 コンテンツは「Hello, wor
最新版で学ぶwebpack 4入門 – JavaScript開発で人気のバンドルツール - ICS MEDIA
webpack（ウェブパック）とはJSファイルをまとめる高機能なモジュールバンドラー。まとめることでウェブページのHTTPリクエストの数を減らしたり、高度なウェブアプリケーションの開発に役立ちます。 連載ではTypeScriptやBabelなどのES2015+の環境構築、ReactなどのJSライブラリの設定方法を網羅。サンプルファイルで詳しく解説します。 webpackの入門記事は他のサイトにもありますが、対象バージョンが古くて使えなかったりします。検索結果の上位の野良記事を参照にしたら古いバージョンの内容ばかり。解説記事通りにやったのにうまく動かない･･･なんて困った方も多いのではないでしょうか。本記事は常に最新版に対応させているので、安心して読み進めてください。 ※本記事では2023年3月現在のwebpack 5（2020年10月リリース）以上で解説しています。 本記事で解説しているこ
【意訳】Webpackの混乱ポイント - Qiita
この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに
webpack 3 リリース内容まとめ - dackdive's blog
2系に上げるかどうかを悩んでいる間に 3.0.0 がリリースされてしまった。 を参考にアップデート内容をメモ。 概要、v2 からのマイグレーション 大きな feature は Scope Hoisting と Magic Comment ぐらい。 v2 からの移行も特別な作業は必要なく、たいていはバージョン上げるだけで機能するとのこと。 それでもメジャーバージョンを上げたのは内部的に breaking changes があって、いくつかのプラグインには影響しそうだったから、とのこと。 ということはプラグインが動くかどうか一応確認した方がいい...？ Scope Hoisting 目玉機能その１。 これまでの webpack ではモジュールを１つ１つクロージャでラップしており、それによりそれぞれのモジュールの独立性が保たれていた（関数名の衝突とか）ものの、ブラウザでの実行速度が重くなる原因に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
