We Are JavaScripters! @6th【初心者登壇歓迎!LT大会】で使用した資料です。 https://wajs.connpass.com/event/54667/
![そろそろWebpackと真剣に向き合ってみる](https://cdn-ak-scissors.b.st-hatena.com/image/square/0132a9779fcec6bb68872e5e5a34af21665c0920/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2F52ce6090ee9f474f9fe079c1c01ececc%2Fslide_0.jpg%3F7919534)
We Are JavaScripters! @6th【初心者登壇歓迎!LT大会】で使用した資料です。 https://wajs.connpass.com/event/54667/
webpackとは いろんなファイルをtranspileしてES5のJavaScriptに変換してくれるやつ AMDかCommonJSの形式でファイルをロード(CommonJSならrequire)すると、transpileしたファイルをロードしてくれる クライアント側のjsコードでもrequireを使用することができる assetとしてビルドして配布するイメージ コードが共用の場合、設定を変えることで素のrequireを利用するサーバー用コードと、webpackがpolyfillしたrequireを利用するクライアントコードとを別々に生成できる 全てがJavaScriptになる、画像やCSSも 画像は「Base64かFilePath」に CSSは「headにstyleを挿入するjsコード」に 特定のファイルをどのようにtranspileするかはpathマッチングでプラグイン形式で設定する
はじめまして! 2月から入社したエンジニアの安達(@ry0_adachi)です。 私からはwebpackを導入する際に行ったことをご紹介していきます。 webpackに乗り換えることのメリットって何だろう?という方や、運用中のサービスがGruntやgulp、browserifyで近いうちにwebpackに乗り換えたいなぁ、と考えている方の参考になれば幸いです。 webpackとは? ざっくり言うと「コード間の依存を解決するためのツール及びビルドツール」です。 AはBに依存している、といった状態の時にAの書かれているファイルに対してBのファイルを結合して参照できるようにするのがwebpackの仕事です。 なぜwebpackなのか なぜ私がwebpackを導入しようと思ったか、についてですが2つ大きな理由があります。 モジュールロードシステムの導入 ファイルを跨いだモジュールの呼び出しを行うた
したい 解決方法 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
webpack + bowerでライブラリの依存解決がちょっとうまくいかないことがあったのでメモ。 以下はusage with bowerのConfigurationのコードです。 var path = require("path"); var webpack = require("webpack"); module.exports = { resolve: { root: [path.join(__dirname, "bower_components")] }, plugins: [ new webpack.ResolverPlugin( new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"]) ) ] } resolve.rootでbower_componentsのディレクトリへの
本エントリーJavaScript Advent Calendar 2014 7日目の記事になります。 webpackとは 概要については最近いろんな方が書いてるいるのでそちらを参考にしていただければつかめるかと。 全部のせRequireJSっぽいWebpackを使ってみた。 RequireJS等はもう古い。WebPackとは? ようはナウいフロントエンドの依存解決ツールですね。 っていうネタで書こうと思っていたら、昨日yutaponさんが既に書いていたりするので(gulp.jsを使ってフロントエンドのビルドをする【webpack, stylus】)、いいところはパクリ参考にしつつ、もうちょっとwebpackに突っ込んだ内容を書いてみようと思います。 Options entryとoutput 簡単に試すときはentryは1ファイルだけ指定できればよいですが、実際にプロジェクトで使うとなると複
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く