[B! webpack] kyompiのブックマーク

How to Use Webpack in WordPress | WP Tips

kyompi 2021/10/18

リンク

【Nuxt.js】Sassのバージョンに注意！｜aLiz

#vue #nuxt #プログラミング #プログラミング初心者 #エンジニア #駆け出しエンジニア #駆け出しエンジニアと繋がりたい 🎈 WPでも公開中です https://wp.me/pc9NHC-18D 前置きここ1週間で Sassが使えなくて困っている😖💦 って方いらっしゃいますよね…！？こんなエラーが出ますよね…！？！？ [Vue warn]: Error in beforeCreate hook: "Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): TypeError: this.getOptions is not a function at Object.loader (/Users/yoshiko/udemy/node_modules/sass-loader/dist/i

kyompi 2021/06/08

webpack
sass

リンク

React: import時のaliasを設定するときはWebpack、TypeScript、ESLintの3つを対応しなければならない件 - Qiita

React: import時のaliasを設定するときはWebpack、TypeScript、ESLintの3つを対応しなければならない件TypeScript webpack ReactESLint ReactとTypeScript & ESLintで開発するのがここ最近好き。tslintさようなら、@typescript-eslintこんにちは。そんな中でaliasを設定しよう思ったとき、三カ所も設定する必要があったので覚え書き。以下、想定としては、ルート直下に/srcがあって、それに対するaliasを~/で書きたいというもの。Nuxtっぽい感じ。 ex) import Awesome from '~/components/Awesome'; 1. Webpack の resolve.alias 公式にもある通り、まず何よりバンドルする際にきちんと認識してもらわないと始まらない終わらない

kyompi 2021/06/08

webpack

リンク

Webpackでjqueryなどが認識されない

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。 JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

kyompi 2020/02/13

リンク

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に依存したライブラ

kyompi 2020/02/06

リンク

gulpとbabelとwebpackというフロント開発３銃士 - Qiita

gulpはJavascript製のタスクランナーです。例えば、 cssファイルが増えて大変だから一つにまとめたい！とか、 lessをcssにコンパイルしたい！とかをJavascriptの記述でタスク化することができます。 ... gulp.task('less2css', (callback) => {//lessをcssにコンパイルするタスク return gulp.src([//対象を指定 "./src/main/resources/static/less/**/*.less" ]) .pipe( plumber() )//エラーが起きた際によきに計らってくれるおまじない★ .pipe( less() )// lessをcssにコンパイル .pipe( gulp.dest("./src/main/resources/static/css/") );//コンパイルしたファイルを吐き

kyompi 2020/02/06

リンク

Laravel Mixを使って簡単にフロントエンド開発環境を構築する方法 | Will Style Inc.｜神戸にあるウェブ制作会社

こんにちは、アートディレクターの奥田です。先日、日本列島を襲った台風21号、皆様は大丈夫でしたでしょうか？僕は幸い家は無事でしたが26時間停電し、マンションのテレビのアンテナが壊れ10日間テレビのない生活を強いられました。普段はニュースや録画したアニメを観る程度なのですが、いざ観られないとなると逆に気になるものですね。北海道地震も含め、もっと大変な思いをされた方もいらっしゃると思います。一日も早い復興と、皆様が日常の生活に戻れるよう、お祈り致します。さて、ここ数年のフロントエンド界隈の発展は目覚ましく、わりとカオスな状況になっているとよく言われていますね。現在はビルドツールに関してはWebpackが主流なのではないでしょうか。（また変わってくる可能性は大いにありますが・・・）ただ、Webpackは設定ファイルの書き方が特殊でなかなか一筋縄ではいかないのが現状です。僕がよく

kyompi 2020/02/06

リンク

Webpack4でJavaScriptとCSSを結合しつつminfyする設定を書いてみた。

root/ - プロジェクトディレクトリ + dist/ - サーバーのドキュメントルート | + js/ - JavaScriptの出力先 | + css/ - CSSの出力先 | ` * - その他のファイル + src | + js/ - JavaScriptのソース | | + app.js - JavaScriptのエントリポイント | | ` *.js - その他のJavaScript | ` scss/ - Scssのソース | + app.scss - スタイルシートのエントリポイント | ` _*.scss - その他のスタイルシート + package.json - node設定（下記参照） + webpack.config.js - webpack設定（下記参照） ` node_modules/ { "scripts": { "watch": "webpack --m

kyompi 2020/01/17

webpack

リンク

なんとなくで理解しない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の基本部分を明確にして考

kyompi 2020/01/17

webpack

リンク

jQueryやslickはnpmで使うのが楽かも

近頃はどのGitHubリポジトリでもnpmやらyarnやらでインストールする方法が紹介されていますよね。npmはgulpやwebpackで使っているものの、フロントのライブラリにnpmを使う必要性がよくわからず普通にscriptタグで読み込んでいました。でも試しもせず従来のやり方を続けているのも進歩がないなと試してみたところ、以外にも良さげだったのでやり方をメモ。 slickをnpmで使う今回、npmでの使用を試したのは「slick」という有名なスライダー用のライブラリです。こちらはjQueryに依存したプラグインなのでjQueryもnpmで導入してしまいます。まずは作業用のディレクトリ（ここではdev-slickとします）を作り、npmを使うための準備をします。ターミナルで実行するコマンドは下記の通り。 $ mkdir dev-slick $ cd dev-slick $ npm ini

kyompi 2018/06/12

npm
webpack

リンク

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