Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

webpack

Uncaught ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined を解決する

参照したページ コンパイル時フラグ | Vue.js vue.js - ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined - Stack Overflow 環境 私の環境で今回の件に関係ありそうなパッケージのバージョンは以下の通りです。 webpack: 4.46.0 vue: 3.4.21 vue-route…

webpack5 + React 17.x + TypeScript 4.x その0003 CSS Modulesでscopedな感じのCSSを書く

参考にさせていただいたページ CSS Modulesについて 【React】CSS ModulesでCSSとSass(SCSS)のローカルスコープを作る - クモのようにコツコツと 2020年におけるCSS設計の暫定解 | foo-x CSS Modulesの型定義について TypeScript + CSS Modules をWebpackで…

webpack5 + React 17.x + TypeScript 4.x その0002 VS Code Extensionとeslintでコードを自動整形する

参考にさせていただいたページ VS Code Extensionのインストール ESLint - Visual Studio Marketplace eslintのインストールと設定 主に「りあクト!(第3.1版)」という書籍の第6章を参照しました。 りあクト! TypeScriptで始めるつらくないReact開発 第3.1…

webpack5 + React 17.x + TypeScript 4.x その0001 最低限の環境構築とビルドまで

参考にさせていただいたページ 最新版TypeScript+webpack 5の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き) - ICS MEDIA npmモジュールのインストール webpackとTypeScriptの関連モジュールをインストールします。 yarn add --dev webpack webpack…

webpack4.x + sass-loader + postcss-loader + autoprefixerでscssファイルをコンパイルする

今日の環境 Windows10 Home node 12.13.1 npm 6.13.1 webpack 4.41.2 webpack-cli 3.2.3 プロジェクトディレクトリを作成 mkdir webpack_4_scss_introduction cd webpack_4_scss_introduction npm initする npm init グローバルにインストール npm install -…

computedでglobal変数をreturnしているvmをvue-test-utilsでtestする | Vuex + vue-test-utils その0001

参考にさせて頂いたページ Mounting Options | Vue Test Utils 要約すると 要約すると「任意のcomputedを上書きしてからtestを実行する。」ということになります。 例 例えばプロダクトのコードで、 window.gon = { hoge: 'example_value' } を用意して、こ…

webpackでビルドする前にeslintで.vueと.jsの構文チェックをする | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0004

参考にさせて頂いたページ webpack.config.jsについて Configuration | webpack eslintについて Command Line Interface - ESLint - Pluggable JavaScript linter eslint-loaderのoptionsについて GitHub - webpack-contrib/eslint-loader: eslint loader (f…

.vueファイルの中にscssを書けるようにする | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0003

参考にさせていただいたページ 【webpack】vue&type=style&index=0&lang=scss - Qiita プリプロセッサの使用 · vue-loader TextField.vueを編集する src/javascripts/vue_applications/common/components/TextField.vueのtemplate に以下の通り追記します。 <div class="mod-error-messages"> <ul class="mod-error-messages__list"></ul></div>…

vue-test-utils + jestを追加する | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0002

参考にさせて頂いたページ テストを実行する環境の構築 GitHub - vuejs/vue-test-utils-jest-example: Example project using Jest + vue-test-utils together GitHub - babel/babel-bridge: A placeholder package that bridges babel-core to @babel/core.…

Vuexを使用する基本的なビルド環境を構築する | webpack4.x+babel7+vue.js 2.x 環境構築 2019年3月版 ステップ0001

はじめに Windowsでもできます。 MacやUbuntuなどでもできると思います。 これから何回かに分けてnpm initするところから、以下のようなことをできる環境を構築していきます。 webpack4 + babel7 を使ってビルド vue-test-utils + jest を使ってテスト実行 e…

Windowsでwebpack4とwebpack3を任意で選択して実行する

はじめに Windowsでグローバルにwebpack4をインストールしていて、プロジェクトのディレクトリにはwebpack3をインストールしているので、これを実行したい。 今日の環境 Windows10 node v8.11.1 npm 5.8.0 webpackのバージョンを確認する グローバルにインス…

webpack4.xでjsをビルドする前にeslintで構文チェックをする

参考にさせて頂いたページ eslint-loaderについて GitHub - webpack-contrib/eslint-loader: eslint loader (for webpack) .eslintrcについて ESLint 最初の一歩 - Qiita 今日の環境 Windows10 node 8.11.1 npm 5.8.0 webpack 4.8.1 プロジェクトディレクト…

webpack4.xでscssファイルをコンパイルする

参考にさせて頂いたページ 設定全般 最新版で学ぶwebpack 4入門 - スタイルシート(CSSやSass)を取り込む方法 - ICS MEDIA ExtractTextPluginをwebpack 4 で使用する方法について Webpack 4 · Issue #760 · webpack-contrib/extract-text-webpack-plugin · Gi…

webpack4.x+vue.js 2.x+vue-loaderでビルド環境を構築する その0001 導入

参考にさせて頂いたページ vue-loaderを使うときのwebpack.config.jsの記述内容について Getting Started | Vue Loader .babelrcについて 1年前に作ったフロントエンド環境を色々新しくした - Qiita 包括的にwebpack 4 入門 webpack 4 入門 - Qiita 包括的に…

webpack3.x+vue.js 2.x+vue-loaderでビルド環境を構築する

参考にさせて頂いたページ Vue.js Vueコンポーネントのユニットテストを書いてみよう - Qiita 最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Vue, Three.js, jQueryのサンプル付き) - ICS MEDIA ベーシックなWebpackの導入と設定 - Qiita 過…

webpackを使ってES2015、Vue.jsのビルド環境を構築する

参考にさせて頂いたページ webpackのすごく基本 webpack で始めるイマドキのフロントエンド開発 - Qiita 以前書いたReact.jsの記事 webpackを使ってES2015、React.jsのビルド環境を構築する - Motomichi Works Blog Vue.jsでの記述例について vue.js + webpa…

webpackを使ってES2015、React.jsのビルド環境を構築する

参考にさせて頂いたページ webpackのすごく基本 webpack で始めるイマドキのフロントエンド開発 - Qiita 主に参考にさせて頂いたページ Webpackでイチから作るReact.js開発環境 - Qiita babelとwebpackを使ってES6でreactを動かすまでのチュートリアル - Qii…