webpack 3 を使ったウェブページ開発手順
webpack 3 を使って、簡単なウェブページを開発する手順を紹介します。あくまで一つの例です。 1つ1つ細かい説明はできていませんが、「だいたいこんなふうにして作ることができますよ」ということが伝わればいいなと思っています。 スポンサードリンク webpack 3 を使ったサンプルページ全てのファイルは、以下のページからダウンロードすることができます。 laboradian/webpack3-sample001: webpack 3 を使ったサンプルプロジェクトテストに関しては、Mocha を使った単体テストのみ行っています。 2. 注意事項サーバー側のプログラミング（PHP など）はありません。3. 環境OS Windows 10 Pro以下のアプリケーションがインストールされていることを前提としています。 Node.js 今回は、Windows 上での作業であるため、「Window
次のリリースであるwebpack 4の主な変更点まとめ - 技術探し
移行ガイド abouthiroppy.hatenablog.jp ドワンゴのアドベントカレンダーの17日が空いているので本来その予定で書かれた記事ではないですが、そこに埋めます。 2日連続になってしまった。。 qiita.com Happy Xmas, Noders! #Nodejs pic.twitter.com/Rsxr8SbeUz— hiroppy😶 (@about_hiroppy) 2017年12月24日 さて、今年は、webpack3.0.0が2017/06にリリースされました🎉 (現在、3.10.0) medium.com After we released webpack v2, we made some promises to the community. We promised that we would deliver the features you voted
BabelでES6で書いて、webpackでビルドして、mochaでテスト書いて、power-assertでassertの出力を見やすくして、karmaで複数ブラウザのテストを自動化して、カバレッジを出力するようにした - UUUMエンジニアブログ
おはこんばんちは!! 尾藤 a.k.a. BTOです。 UUUMでは業務の効率改善に kintone を導入しようとしているのですが、kintone の機能を拡張するには Javascript でプログラムを書く必要があります。 そこで、Javascript の開発環境を構築したので、何をやったのかをまとめてみました。 具体的には、 BabelでES6で書いて、webpackでビルドして、mochaでテスト書いて、power-assertでassertの出力を見やすくして、karmaで複数ブラウザのテストを自動化して、カバレッジを出力するようにしました。 お前は何を言っているんだと思うかもしれませんが、僕も何を言っているのかわかりません。 Babel 言わずと知れた ES6 用のトランスパイルツールです。 ご存知の方も多いと思うので、詳細は割愛しますね。 Babel の導入は npm でイ
webpack-dev-server を使う - scramble cadenza
イントロ webpack dev server 見ればだいたい書いてある。 webpack は少し触らないと忘れてしまうので、メモしておく。 それと何故か webpack の公式 Document は読みづらい(私だけ？)というのも理由の一つ。 webpack-dev-server って？ 開発用の web サーバー。Express で作られてる。 おおまかに２つのことができる Hot Module Replacement module を変更したら変更を検知して読み込み直す Automatic Refresh react とかで、component を変更したら、自動で reload する これだけできれば、わざわざ変更のたびにサーバーを再起動しなおさなくて済むので、とりあえずの開発には困らなくなる。 導入 まずは npm install $ npm i --save-dev webpa
ざっくりWebpack入門 Vol.2 babelでES6のトランスパイル - dev.techdrive.top
こんにちは。TECH DRIVEの小笠原です。 Vol1につづき、本記事でもWebpackについてご紹介させていただきます。 今回はWebpackを使いES6で書かれたファイルのトランスパイルを行いたいと思います。 前提条件 1.node.jsが導入済みのMac OSであること 2.ES6やbabelが何か理解していること Webpackについては、Vol1で触れておりますのでこちらに目を通していただければと。 dev.techdrive.top また、本記事はWebpackでES6のトランスパイルを行うことに重きを置いておりますので、ES6やbabelの詳細に関しては割愛させていただきます。 Webpackの導入 今回はプロダクトが以下のディレクトリ構造であることを前提に進めます。 ├── dist // HTMLから呼び出されるJSファイル ├── index.html ├── src
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 だけでフロントエンド開発する方法 – Web Application Security Memo
注意：この記事では Babel 5 を使っています。 Babel 6 を使用する場合は、このままだと動作しません。対応方法は、Quick guide: how to update Babel 5.x -> 6.x — Medium 等を参照して下さい。 Grunt や Gulp などのタスクランナーを使わず、webpack だけでフロントエンドを開発する方法を調べてみました。 以下、実際に簡単なウェブアプリケーションを作ってみます。 環境 webpack 1.12.0 ESLint v1.2.1 OS X 10.10.5 前提条件 JavaScriptは ECMAScript 6 で書けるようにします。但し、今回の記事内では ECMAScript 5の文法のみ使用しています。 CSSファイルは webpackで処理することにより、JavaScript のコードで表現されるようになります。こ
WebPack-Dev-ServerからBrowsersyncに乗り換えた | // sakura note
前々回に モダンなフロントエンド開発環境をつくる という記事を書きましたが、その中で使った WebPack-Dev-Server を捨てたのでその背景と、Step-by-Stepの導入フローを書いてみます。 WebPack-Dev-Server を捨てた理由 大きく次の問題がありました。 Scssで@importされているファイルを変更しても、正しくビルドされない TypeScriptのimportは問題ない ビルド時にマップファイルが生成されず、バグが発生したときにそのまま調査に入れない ビルド結果がインメモリでサーブされるため、ビルドされたソースを確認するには別途 webpack コマンドを打たなくてはいけない 特に1番目のものがクリティカルで、CSSを適用する段階では毎回webpackコマンドを打って実際にビルドしなくてはならず、使い物にならなかったためです。 この3つの問題をすべて
Webpackで Browsersync + Sassコンパイルを試す - aircolor memolog
GruntやGulpなどのタスクランナーツールでは一般的ですが、WebpackだけでBrowsersyncをベースにSassのコンパイルを試してみました。 そもそもWebpackに触れるについては、当初はやや億劫でした（汗 ローダーという仕組みについての理解不足、日本語ドキュメントの少なさ、そしてなんといっても大艦巨砲主義と揶揄されるようなオプションの多さが理由です。とにかく調べるのが大変そうなイメージでした。また本業がWebサイト制作メインなので、Gulpで十分なのでは？という気もしてます。 しかし前々からES6の導入とvue.jsを使う上でベストな環境を構築したかったのと、Rebuild.fmと例の記事に触発されて腰を上げて調べてみようと思いました。 準備 Webpackへの理解が圧倒的に足らないので自分なりに調査をするところから。大雑把なまとめとして、 Webpackはビルドツールで
いまどきのWebサイト制作におけるフロントエンド開発環境を構築してみた | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、2017年春アニメは良作揃いで今からワクワクが止まらないデザイナーの奥田です。 さて、ワクワクといえばIE9、10のサポート終了でかなりできる幅が広がりワクワクしますね。 個人的にはjQueryを切り捨て（jQuery今までありがとう！）できるだけコードはネイティブで書きつつ、モダンな環境で構築するという新たなステージに挑戦しました。 今回は僕が構築したWebサイト制作におけるフロントエンド開発環境をご紹介いたします。 「もっといい方法があるよ！」という方はぜひご一報ください。 Table of contents使用するビルドツール必要なパッケージをインストールするgulpfile.jsを作成するwebpack.confg.jsを作成する最後に使用するビルドツール今まではgulpでBrowserifyを使用していましたが今流行のWebpackに移行しました。 本来Webpack
Babel, PostCSSで静的サイトを作るためのwebpackの基本構成 - Sofar
Babel, PostCSSで静的サイトを作るためのwebpackの基本構成Created: 2016-03-25 06:52:11 (金) webpackの利点はなんでもrequireできる点な気がしているので、静的サイトを生成するために使うのはどうかなと思うけど、別途gulp等を使うのも癪なのでwebpackで完結するように構成した。loaderもすでに揃っているので無理はない。 機能 jsをBabelでコンパイル cssをPostCSSでコンパイル（プラグインはお好みで） font-awesomeを利用 画像リソースをオプティマイズ htmlをコピー（本当はjadeでテンプレート機能使いたかったけどうまく動かず断念） ディレクトリ構造 .babelrc dist |__base.css |__bundle.js |__fonts/... |__images/... |__index.
webpackで開発環境の構築 - Angular｜OAR CODE
昨年（2016年）の9月にAngularJSの後継であるAngular2（正しくはAngular）が正式にリリースされました。ちょうどAngularJSのフレームワークを扱っていたこともあって注目していましたが、このたび、PHPで作成していた管理サイトがだいぶ古くなっていて、かつ、新しくなったフレームワークを試してみたいという思いもあったので、Angular2でそのサイトを作り直してみることにしました。 というわけで、まず最初にやることは開発環境の構築です。 なお、AngularJSは扱ったことがありますが、ビルドツールやタスクランナーは使ったことがなく、どれを使えばいいのか初めは分かりませんでしたが、こちらの記事（これを選んでおけば間違いない2016年流行りのCSS・JavaScript・タスクランナー - Qiita）を参考にしてwebpackを利用してみることにしましたので、以下はA
webpack2へ移行する軽いメモ - 技術探し
npmの方もbetaが取れて、2.2.1が公式に配布となりました。 www.npmjs.com 公式サイト webpackのversion:2のために公式サイトが作られました。 webpack 移行の手順 詳しくはこちらを確認してください。 Migrating from v1 to v2 Medium medium.com medium.com 移行における変更点 フィールドバリデータ 設定ファイルのフィールドを検証します。 v1ではwebpack-validatorが必要でしたが、v2ではデフォルトで入っています。 ローダー リネーム module.loaders -> module.rules loaders -> use query -> options { rules: [ { test: /\.js$/, use: ['babel-loader'], options: { } }
webpack(v1)とbabelでES6コードをさくっと書く - getalog
最低限のコストで最近よく聞くいい感じのjsを書きたい時の構成をずらーっと書いてみる 準備するもの node/npm (最近はrbenvクローンのnodenvがいい感じ、操作は同じ) webpack babel .babelrc .babelrcを設置しとくとbabelのデフォルト設定がこいつの中身で書き換わる Reactを使わないなら、presetのreactはいらない export defaultされたパッケージをimportした時に.defaultで引くのを許せるなら、add-module-exportsはいらない(後述) Reactいる { "presets": [ "es2015", "stage-0", "react" ], "plugins": [ "add-module-exports" ] } いらない { "presets": [ "es2015", "stage-0"
webpack-dev-serverの基本的な使い方とポイント - dackdive's blog
はじめに （2017/08/10追記） この記事では webpack-dev-server を独立したサーバーとして使う場合の方法です。 また webpack 1 系の情報になっており少々古いです。 最新の設定についてはこちらの GitHub リポジトリを参考にしてください。 https://github.com/zaki-yama/redux-express-template （追記ここまで） JavaScript のビルドに webpack を使っている場合、ローカルでの開発には webpack-dev-server を使うと便利です。 通常の webpack コマンドも --watch （または -w）オプションつきで実行することにより ファイルの変更を検知して自動でリビルドを行うことが可能ですが、 webpack-dev-server は上記に加えて ローカルサーバーも起動してくれ
webpackの基本的な使い方(+Vue.js) - aosy
今まで自分で作ったプロジェクトは、ファイルは基本的な以下の3つで作成され、 HTML CSS JavaScript ライブラリはVue.jsをインストールしているだけでした。 Vue.jsはBowerでインストールし、CSS,JavaScriptファイル(とVue.js)はHTMLから読み込んでいました。 実際にWeb開発をする、となった場合もっとたくさんのライブラリを使うだろうし、HTML,CSSもコンパイルが必要なAltなんとかを使うこともあるでしょう。 今回のような単純なプロジェクトでは恩恵はあまりないかもしれませんが、モダンなWeb環境構築には慣れておかないといけないため、 webpack を利用してみることになりました。 やりたいこと 以下のような3つのファイルを用意します。Vue.jsを使って、p要素に赤文字の"hoge"が出力されるだけのページです。 <!DOCTYPE ht
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
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-dev-serverで継続的なクライアントサイドテスト - Namiking.net
webpackのTestingを眺めてたら、 ブラウザ上でアプリを動作させながらMochaのSpecを走らせて、 クライアントサイドのテストをする、 みたいなことが手軽に出来そうだったので、やってみた。 webpack-dev-serverを利用すれば、 ソースやテストを修正直後に自動リロードされるので、 継続的テストみたいな手法もとりやすい。 動作サンプル ひと通り動くサンプルを作ったので、以下のGitHubに上げておきます。 nodeやnpmがインストールされていれば、動作すると思われます。 “Greetingボタンを押したら、その下に挨拶が追加される” みたいな動作のサンプルアプリとそのSpecをjQueryでシンプルに組んであります。 GitHub: sample-webpack-test https://github.com/namikingsoft/sample-webpack
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webpackでビルドした後にBrowserSyncでリロードさせたい