webpackで静的サイトジェネレータ(EJS編) - Qiita
"devDependencies": { "copy-webpack-plugin": "^4.5.1", "ejs-html-loader": "^3.1.0", "globule": "^1.2.0", "html-loader": "^0.5.5", "html-webpack-plugin": "^3.1.0", "webpack": "^4.4.1", "webpack-cli": "^2.0.13" } リポジトリ kn1cht/webpack-sitegen-ejs 結果だけ見たいよという方はリポジトリを覗いていただければと思います。 EJSからHTMLへの変換 いきなりですがここで一番ハマりました。EJS webpackでググると、以下のような記事が出てくるわけです。 webpackでejsを使い、共通要素をインクルードして効率的にやりたいよね。 Webpackのハマりポイ
[webpack]CSS LoaderでCSSの圧縮してる人は最新版でminimizeオプションが削除されてるから気をつけて。|WEBプログラム覚書
HOME>WEBプログラム覚書>[webpack]CSS LoaderでCSSの圧縮してる人は最新版でminimizeオプションが削除されてるから気をつけて。 [webpack]CSS LoaderでCSSの圧縮してる人は最新版でminimizeオプションが削除されてるから気をつけて。 なんか圧縮されないと思ったら1.0.0で minimize オプションが削除されていた。 remove minimize option, use postcss-loader with cssnano or use optimize-cssnano-plugin plugin Release v1.0.0 · webpack-contrib/css-loader · GitHub
最新版で学ぶwebpack 5入門 - Babel 7でES2023環境の構築(React, Vue, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
Gulp + Webpack+BabelでシンプルJQuery構成 - Qiita
目的 Gulp + WebpackでJQueryを書けるようにします。 ちょうどいいのでBabel（ES6）も使ってしまいます。 CSS／SCSSもまとめられるけど、ややこしいのでJSのみをwebpackに任せる方針で。 手順まとめ JQueryをローカルダウンロード JQueryに依存したライブラリの使用 JQueryの実際の呼び出し JQueryライブラリの実際の呼び出し WebpackはJSをまとめるツールなので、JQueryをローカルにもつ必要があります。 $で始まる関数をもつJQueryライブラリは、Webpack的には例外なのでJQueryを使っていることを教えてあげます。 具体的な手順へ JQueryをローカルダウンロード → npm install --save-dev / npm i -D (npmでプロジェクトディレクトリにインストール) JQueryに依存したライブラ
npmとwebpack4でビルド - jQueryからの次のステップ - Qiita
むずかしくないJavaScriptのやさしい話 デモチュートリアル このチュートリアルは、#ndsmeetup8 で発表した内容のデモの手順をまとめたものです。 jQueryをscriptタグ挿入で使っているような開発者向けの内容です。 npmとwebpackでビルドをするという使い方の提案です。 発表内容はこちら。 http://www.slideshare.net/fbcivic/javascript-ndsmeetup8 ※発表当時はwebpack1についての記事でしたが、webpack1→webpack2→webpack3→webpack4と記事を更新しています。 webpack3までの古い解説はこちら （基本的なことなのでほとんど変わりませんが、webpack4でwebpack-cliが必要になったり設定ファイルの記述が変わりました） 事前準備 nodejsをインストールしてくだ
最新版で学ぶwebpack 5入門 - スタイルシート(CSS/Sass)を取り込む方法 - ICS MEDIA
ウェブのフロントエンドエンジニア開発で人気を集めるモジュールバンドラーのwebpack（ウェブパック）。webpackにはJavaScriptファイルのバンドルだけではなく、スタイルシート（CSSやSass）のバンドルもできます。ICS MEDIAの記事「最新版で学ぶwebpack入門」では、webpackの基本的な使い方を解説しましたが、この記事ではスタイルシートに焦点をあてて解説します。 ※webpackを利用するには事前にNode.jsをインストールしておいてください。この記事では2021年5月現在最新のNode.js v14、npm 7と、webpack 5をもとに解説しています。 この記事で説明していること CSSをバンドルする利点 CSSのバンドル方法 Sassのバンドル方法 Sass内の画像もバンドルする方法 容量の閾値で画像のバンドルを制御する方法 PostCSS(Auto
静的サイトをとにかく高速化する話
自分のポートフォリオサイトをサンプルに、どのくらいの容量削減ができるのかを確認してみました。 jsおよびCSSは、サイトの表示に必要な要素を1ファイルにバンドルした状態です。 画像ファイルはjpegの圧縮率などによって最終的なサイズが大幅に変化するので、jsとCSSのサイズ変化のみを取り上げました。 Bootstrap + Font Awesomeのような重量級フレームワークを使用しても、十分に実用的な容量まで削減できました。これならスマホ+3G回線での表示も心配ありません。 手法 適用しやすさを順に手法を並べると、以下のようになります。 遅延する 圧縮する キャッシュする まとめて削る 遅延する サイト上にあるほとんどのリソースは、実際には後から読み込んでも問題なく動作します。 まず最小限の構成でサイトを表示させ、重いファイルは後から読み込みます。 javascriptの遅延読み込み h
Webpackを使ってSassをビルドする - Qiita
var path = require('path'), ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = [{ context: path.join(__dirname, 'src/css'), entry: { style: './style.scss' }, output: { path: path.join(__dirname, 'public/css'), filename: '[name].css' }, module: { loaders: [ { test: /\.scss$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader?-url&minimize&sourceMap!sass-loader'
webpack4でSCSS+Autoprefixer+CSScomb+Babel+ESLint環境構築
CSSとJavaScriptに最適な環境構築 少し前だとタスクランナーにgruntやgulpなどが使用されていたが、現在はwebpackで作業環境を構築するケースが多い。 最新のwebpack 4なら簡単にCSSとJavaScriptに最適な作業環境を構築できるので劇的な作業効率向上が期待できる。 今回作成したpackage.jsonは下記の通り。以降の説明を見る前にあらかじめnpm installしておくと良い。 { "name": "webpack4", "version": "1.0.0", "scripts": { "start": "webpack-dev-server --open --env.dev", "build": "webpack --env.dev" }, "devDependencies": { "autoprefixer": "^8.4.1", "babel-c
webpackで上層のディレクトリにバンドルしたファイルを出力する | オウンドメディア | 大阪市天王寺区ホームページ制作｜合同会社デザインサプライ-DesignSupply.LLC-
タイトルの通りですが、webpackではバンドルしたファイルの出力先を絶対パスで指定するため、そのままですと上層のディレクトリへの出力ができません。そこでカレントディレクトリを基準としたパスの指定が必要になります。 …
webpackとBabelの基本を理解する(1) ―webpack編― - Qiita
独学の内容をまとめたものです。誤りがございましたら、ご連絡いただけると幸いです。 リンク 1. webpackとBabelの基本を理解する(1) ―webpack編―（本記事） 2. webpackとBabelの基本を理解する(2) ―Babel編― 3. webpackとBabelの基本を理解する(3) ―webpackとBabel編― 4. webpackとBabelの基本を理解する(4) ―React編― 5. webpackとBabelの基本を理解する(5) ―Sass編― 概要 この記事の概要 目的 フロントエンドの環境構築に利用されるツールへの理解を深める 本記事のゴール webpackでJSファイルを結合する方法を知る 対象者 WEBフロント担当者 HTML,CSS,JavaScript(es2015含む)の基本的な構文を理解している人 npmの利用方法を理解している人 環境
webpack-streamでエラー発生時に処理を終了させずに監視を続ける方法（plumber不要） | WEMO
よくあるwebpack-streamの使い方 Gulpにwebpackを導入する系の記事で、webpack-streamを使っているもののほとんどが以下のような使い方で紹介されていました。 const webpack = require("webpack"); const webpackStream = require("webpack-stream"); const webpackConfig = require("./webpack.config"); gulp.task("webpack", function () { return webpackStream(webpackConfig, webpack) .pipe(gulp.dest("./js")); }); gulp.task("default", function () { gulp.watch("./js/src/*.j
二日費やしてやっぱり使わなかったwebpack.config.js
最近WebGLを触ることが多いが、「VueやNuxtだと全体のJSをVue向けに変えていかんといけないし面倒だな」→「webpackだけで回せるシンプルなビルドタスクをつくろうか」 という動機で始めたが、webpackも気が付けば4になっており、もはやconfigの読み方もわからないので勉強がてらフルスクラッチで組んでみた。 ただ、やってみると辛さばかり。 単一ページが乱立するレガシーなサイト構成なら、結局今あるGulpfile.jsで十分パワフルに動くし、minify・autoprefixer・Babel・sourceMapsと、ファイル単体への干渉しかないのでプロジェクト構成が自由。webpackでやろうとすると、「まずwebpack作法で癖のある構成に変えられたものを元の形に戻す」大変で虚無感しかないフローを作らないといけない。モジュールバンドラー以外、全て今Gulpでできていること
Gulpで始めるwebpack 4入門 - Qiita
webpackは複数ファイルのJavaScriptファイルやCSS、画像ファイルをモジュールとして取り扱う為の人気のツールです。2018年7月時点の最新バージョンは4.16（いちろく、ではなくじゅうろく）です。 ▲ webpackの公式サイト webpackはJavaScriptのモジュールの取り扱いに特に便利で、機能ごとに分割したJavaScriptをimport()やrequire()を使って読み込めるようになります。ビルドツールGulpと組み合わせれば、大規模なプロジェクトでも見通しのよいタスクを定義可能です。 webpack 4をGulpで使用するには一工夫が必要なので、本エントリーで紹介します。 なお、webpackについて詳しくは記事「最新版で学ぶwebpack 4.8入門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照ください。 環境準備 Gul
普通のサイトの開発環境（Gulp・Webpack） - Qiita
私が所属する会社では主にBtoB向けのサイトやコーポレートサイト、採用サイトなど、いわゆる「普通」なサイトが多い。 canvasやwebglでゴリゴリ動かす案件や流行りのReact.jsやAngularを使ったSPAみたいなものもあまりない。JSのライブラリもjQueryで事足りてしまう。 ただ焦る気持ちはあるので最低限流行をかじりながらも、一般的なサイトを作るときの開発環境をまとめてみたので興味ある方の参考になれば幸いです。 やりたいこと Sassのコンパイル ES2015のコードを複数のファイルに書き、結合 ejsのコンパイル ブラウザのオートリロード コーディングスタイルの統一 1～4はgulpとwebpack、5はeditorConfigを使います。 ディレクトリ構成 project / ├ editorconfig ├ gulpfile.js ├ public / └ src /
webpackでjQueryの多重ロードを回避する方法 - Qiita
最適解だと確信が持てないので、あえてQiitaに晒してパブリックコメントを募りたい。 今回はMaterialize-CSSとjQuery Validation Pluginで発生したけど、似たシチュエーションは多そう。 Qiita内だとこの辺の記事とか。 結構困ったwebpackのお話 【Typescript】DefenitelyTypedはjQuery objectをbootstrapで拡張しない？ stack overflowだとこの記事がまさに。 Managing jQuery plugin dependency in webpack TL; DR 序 jQuery2系を内包するMaterialize-CSSを使いつつ、 jQuery1系を推奨するjQuery Validation Pluginが効いたフォームを作りたい。 破 あちらを立てればこちらが立たず。気づけばjQuery3系
【意訳】Webpackの混乱ポイント - Qiita
この記事はWebpack — The Confusing Partsを、筆者の許諾を得て意訳しています。 何か誤りがありましたら、ご指摘いただけると幸いです。 (以下、訳) ReactとReduxで作られたアプリケーションにとって、Webpackは最先端を行くモジュールバンドラです。Angluar2やその他のフレームワークを使っている人々は、たいへんWebpackのお世話になっていることでしょう。 私が初めてWebpackの設定ファイルを見た時、それはさながら宇宙人のようで非常にわかりづらく見えました。しばらく試しているうちに、今では次のように考えるようになりました。Webpackは単に独特のシンタックスと新しい哲学を持っており、それがとっつきにくさの原因になっているのだと。偶発的とはいえ、これらの哲学は、Webpackの人気を押し上げた原因の１つでもあります。 Webpackのとっつきに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
コーディング用テンプレート-webpack編- - Qiita
webpack4の導入とwebpack-dev-serverで自動ビルド - Qiita
Loading...
