[webpack] タグが付いた質問
45
質問
0
票
0回答
21 件の閲覧数
Rails5.2.4にWebpacker&Vue&Bootstrapを適用したらDestroyアクションに処理が飛ばない
起きている問題/ 何をしたいか
RailsアプリケーションにWebpackerを導入し、Vue/MaterialDesignForBootstrapを適用しCRUD処理を書きましたが
削除処理を実装した際サーバーにDELETEメソッドは飛んでいるがDestroyアクションに処理が通らず削除ができない状況です。
大変恐縮ですが知見のある方がいらっしゃいましたらアドバイスいただけると幸いです。
...
0
票
0回答
38 件の閲覧数
デプロイ時にwebpackerに関するエラー
AWSで自動デプロイをする時にwebpackerに関するエラーが発生してしまいます
Vue.jsを導入しようとこちらでwebpackerをインストールしました。
試しにGemfileのwebpackerをコメントアウトしてみるとデプロイは成功するので、webpackerが原因だと思っています
よろしくお願いします
yarn -v
1.22.10
node -v
v15.2.1
エラー
...
0
票
0回答
36 件の閲覧数
アプリからFirebase名前空間にアクセスできない Cannot access JS SDK from firebase namespace
Firebase JavaScript SDK でアプリから firebase.functions() を使おうとして以下の記述を行いました。
import firebase from "firebase/app";
const functions = firebase.function();
依存関係 : {
"firebase": "...
0
票
0回答
94 件の閲覧数
Nuxt Typescriptのランタイム lintについて
nuxt.config.tsにてファイル保存時にeslintを実行するための設定について質問です。
NuxtとTypeScriptのバージョンアップ作業をしていたところ、nuxt.config.tsにtypeCheckモジュールがあることを知りました。
現状のコードではbuildプロパティに下記のように記述しており、ここでファイル保存時にeslintをかけるようにしています。
config....
0
票
1回答
74 件の閲覧数
webpack利用時、jestを実行するとCannot find moduleエラーが発生
環境依存値(APIのURL)を取得するために、webpackを使用しています。
参考:
JavaScriptでデプロイ環境ごとに設定ファイルを読み込む方法
正しくビルド、実行されましたが、環境別の設定値を持つindex.tsを用いる機能についてjestを実行したところ、下記の通りエラーとなりました。
Cannot find module './_test' from 'ts/environment/...
0
票
0回答
168 件の閲覧数
Railsチュートリアルで`git push heroku master`したときに`webpack binstubs not found.`というエラーが発生する
環境
Rails 6.0.3
エラー内容
Ruby on Railsのチュートリアルでgit push heroku masterを実行した際、下記のようなエラーが発生します。
エラーメッセージの通りにrails webpacker:installを実行しましたが解消しません。
解消方法をご教示いただけると幸いです。よろしくお願いいたします。
省略
︙
remote: ...
0
票
1回答
168 件の閲覧数
electronにてwebpackでソースのビルドが成功しているのに何も表示されない
electron reactにてwebpackでソースのビルドが成功しているのに何も表示されない
いろいろ調べたりして直したのですがどこが間違っているのかどんどんわからなくなってきました
参考資料として「ソシム株式会社 いまどきJSプログラマーのための Node.jsとReactアプリケーション開発テクニック」を読んでます
main.js
const electron = require(&...
0
票
1回答
369 件の閲覧数
webpackでnpmでインストールしたjQueryを使いたい
webpack4+jQuery+sass環境を作りたいのですが、
jQueryを使う設定がうまくいかず、下記のようなエラーが出てしまいます。
ERROR in ../js/index.js
Module not found: Error: Can't resolve 'jquery' in '/private/var/www/test/resource/js'
@ ../js/index....
0
票
1回答
107 件の閲覧数
npm, browsefiryを利用し複数の外部ライブラリを1つにビルドする運用をしたいが、フロント側でクラス名のnot definedエラーが出力されてしまう
Webサービスを個人的に開発しております。
npm, browserifyを利用し、フロントエンドで利用するいくつかの外部ライブラリを1つにビルドし、
HTMLにはjsファイル1行書けば済むように運用したいのですがエラーが出てしまい、解決できずに悩んでおります。
LaravelMix+...
0
票
0回答
533 件の閲覧数
manifest.jsonで定義されているjsファイルが生成されない
前提・実現したいこと
Rails 6で、manifest.jsで定義されているファイル名の、jsが生成されません
ビルドしたところ、public/packs以下にcssファイルとjsファイル、manifest.jsonは生成されるのですが、jsファイルだけネームが違います
開発環境では、webpacker_dev_serverを使用することで問題なく機能しているのですが、herokuデプロイ時に、...
0
票
0回答
744 件の閲覧数
Rails6+docker+webpacker 環境での 本番環境におけるActionView::Template::Error
実現したいこと
dockerで開発しているrailsアプリをHerokuへデプロイしたいのですが、ターミナルでheroku openを叩くと以下のエラーが発生しました。
開発環境では問題なく動作しております
webpackのproductionでの設定に問題がありそうだと予想しているのですが、数日間試行錯誤しており解決に至っておりません。
過去に同様の問題に遭遇した方、...
0
票
1回答
522 件の閲覧数
webpackerのエラーによってAWSでRails6のアプリを表示できません
環境
rails 6.0.2.1
ruby 2.6.3
amazon linux
mysql
nvm v14.2.0
node v14.2.0
yarn 1.22.4
前提・実現したいこと
EC2を使ってAWSにRails6で作ったアプリをデプロイしているところです。
https://qiita.com/Yuki_Nagaoka/items/55ed1610cfc1f59398b1
...
0
票
1回答
163 件の閲覧数
Rails6で、実行環境時にFont Awesomeの絵文字が四角に表示される
環境
Ruby 2.6.3
Ruby on Rails 6.0.0
Yarn 1.22.4
Webpacker 5.1.1
@fortawesome/fontawesome-free 5.13.0
問題
記事(https://techracho.bpsinc.jp/hachi8833/2020_01_17/85943)の通りにRailsにYarnでFontawesomeパッケージを導入し、...
0
票
1回答
288 件の閲覧数
Rails5.2.3から6.0.2へのアップグレード後に起動できない
ActionTextを使用するために、Railsを5.2.3から6.0.2にアップグレードしたところ、
起動しなくなってしまいました。
rails sを実行すると下記のエラーのため、
webpackerがインストールされていないのが原因かと思っておりますが
◾️rails sでのエラー内容
/Users/〜/projects/blog/vendor/bundle/ruby/2.5.0/...
0
票
1回答
203 件の閲覧数
webpackでjQueryをすべてのjsファイル内で使いたい
webpack+scss+jQuery環境を作ろうとしています。
webpack+scssまではできたのですが、jQuery環境がうまくいきません。
index.js内でもutility.js内でも $ が使えるようにしたいです。
webpackでjqueryを使用、しかし「$ is not defined」のエラー - teratail
こちらを参考にして plugins: ...
0
票
1回答
2,801 件の閲覧数
webpackのビルドをしても,ローカルの開発環境でエラーが出てしまいブラウザに何も表示されません
質問の主旨
現在、Reactを勉強中で本を読み進めてチャットアプリを作成しています。ですが、webpackのコンパイルでよく理解できないエラーが出てしまいうまくいきません。
ブラウザは立ち上がるのですが、画面が白いまま、エラーが出ます。
初心者なので、webpack周りのエラーのことを調べてみても結局よくわからないままです。
開発環境は以下の通りです。
インストールしたライブラリ
Node....
1
票
2回答
1,407 件の閲覧数
webpack-dev-serverをインストールしたもののローカル開発環境(localhost:8080)で作成したファイルを実行するとエラーが出ます。エラーを出さずにファイルの内容をブラウザで表示させるためにはどうすれば良いでしょうか?
いつもお世話になっております。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。
【質問の主旨】
GitHubにUPしているコードを$ npm start もしくは $ npm run startで実行するとターミナルの画面で下記のエラーが出ます。
> @ start /Users/MYUSERNAME/Desktop/firebase/...
1
票
2回答
182 件の閲覧数
Node.jsの環境でwebpackを実行すると、`WARNING`の注意文が表示されました。この注意文に対する対処方法(既存ファイルの修正や注意文の無視など)を教えてください。
いつもお世話になっています。
下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。
【質問の主旨】
webpackをインストールすると、WARNINGの注意文が表示されました。この注意文に対する対処方法(既存ファイルの修正や注意文の無視など)を教えてください。
【質問の主旨】
1.
モジュール構成のアプリを1ファイルにまとめるために、...
1
票
0回答
77 件の閲覧数
レンダリング専用スクリプトが無くても正常に表示されるのは何故か?
Electronの初心者なりにMain ProcessとRendering Processの間の違いが分かっていますが、この記事を読んで、Webpackで構成されるElectornアプリにはtarget: 'electron-renderer'専用ファイルは何の為必要か、良くわかりませんでした。そもそも、レンダリングプロセス専用エントリーポイントファイル(src/renderer/index.js)...
2
票
0回答
44 件の閲覧数
CSS Modulesで@importを含んだCSSのクラス名が取得できない
webpackのcss-loaderを使ったCSS Modulesで @import したファイルのクラス名が取得できません。以下に最小と思われる再現コードを掲載します。
再現コード
test.html
<script src="dist/main.js"></script>
JavaScriptを実行するのが目的です。
src/index.js
const ...
1
票
1回答
312 件の閲覧数
単独ファイルコンポネント(.vueファイル)にも、vue-class-componentのクラスにもpugプレプロセッサーを利用出来るようなWebpack設定
Vue.js 説明書に依ると、単独ファイルコンポネント(.vueファイル)でpugプレプロセッサーを利用するにはpug-loaderではなく、pug-plain-loaderが要ります:
{
test: /\.pug$/,
loader: 'pug-plain-loader'
}
単独ファイルコンポネント(.vueファイル)に加えて、vue-property-decorator(vue-...
0
票
1回答
80 件の閲覧数
useを配列にした場合のloaderの読み込み順
webpackの設定をしているのですが、
loaderを配列で指定した場合、読み込む順番は、index番号が若い順で読み込まれるのでしょうか?
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['...
2
票
1回答
117 件の閲覧数
babelを内部で使用したjsをwebpackでバンドルできない
以下のjsをwebpackでバンドルしたいのですが、出力されたjsを呼び出してみるとエラーが返ってきます。バンドル自体は成功しているように見えます。
const babel = require('@babel/core');
const _global = global || window;
_global.transform = function(code, cb) {
babel....
1
票
0回答
30 件の閲覧数
webpacker のロード時に各変数を確認する方法
Webpacker で呼び出されるコードのデバックはどのようにすればよいのでしょうか?
具体的には以下のような流れで問題に直面しました。
こちらのQiitaの記事を参考にRails+Vue.jsの勉強をしていたのですが
https://qiita.com/naoki85/items/51a8b0f2cbf949d08b11
記事内にもある通りconfig/webpack/loaders/...
0
票
1回答
72 件の閲覧数
Webツールのリリース、公開について
Webツール(HTMLとCSSとJavascriptで作ったブラウザで動くツール)を作りました。
他のデベロッパーさんにも広く使ってほしいのですが、どのようにリリース、公開するのが良いでしょうか。
一般的なやり方や、人気なやり方を教えてください。
また、できればその方法について、実際にリリース、公開までの流れがわかる資料があれば教えていただけると嬉しいです。
なお今現在は、特にパッケージ化などせず、...
2
票
1回答
548 件の閲覧数
uglifyjs-webpack-pluginでライセンスコメントを残したい
// webpack.config.js
const uglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
mode: 'production',
entry: './input.js',
output: {
filename: 'output.js'
},
...
0
票
1回答
671 件の閲覧数
Webpackで作ったパッケージにHTMLのScriptからオブジェクトをセットしたい
TypeScriptで書いたコードをWebpackでバンドル化し、パッケージの中に定義したオブジェクトに
HTMLのスクリプトから設定値をセットしたいと考えています。
構成は以下の状態です。
html
<script src="dist/bundle.js"></script>
<script type ="text/javascript" src="....
5
票
2回答
380 件の閲覧数
@importするときの@の意味
プログラム初心者です。
Qiitaなどでいつもgithubでpushしている方のソースコードを読む日々なのですが、
以下に示している@の存在の意味がよくわかっていません。
@import '@/assets/styles/mixin.scss';
アドレスに示している@は何を意味しているのでしょうか。
一見考えたところ、私の考察では、以下と同じようにも思いますがよろしかったでしょうか。
...
0
票
1回答
503 件の閲覧数
webpack --watch で build.js ファイルが生成されません
以下の手順では生成されます。
$ webpack
以下のコマンドでは build.js が作成されません
$ webpack-dev-server --progress --colors --watch --config webpack.config.js
webpack.config.jsの中身
// webpack.confing.js
const path = require('...
1
票
1回答
209 件の閲覧数
nuxtjsのホットリロード時のsassコンパイル
main.cssやnormalize.cssのように固定で必ず最初に読み込ませたいsassファイルのコンパイルで困っています。
nuxt-device-detectを使用して、pc/spの表示切り替えを行っているため
vueファイルにstyle記載やimportを行うとpc表示の時にもspのcssが読み込まれてしまうため、cssはレイアウトのheadで読み込ませているのですが、...
2
票
1回答
55 件の閲覧数
webpackのパッケージ依存について
こんにちは、初めまして。
今Reactで開発を始めようと環境を作っているところですが、
npmでwebpackをインストールするところでバージョン依存ではまっています。
最新の webpac@k4.8.3 を使いたいのですが、
インストールしようとすると以下が出ます。
webpack4.8.3 => UNMET PEER DEPENDENCY ajv@6.5.0
上記が出たので、
ajv@6....
0
票
1回答
36 件の閲覧数
webpackerを使ったrailsアプリを実行するとき、TypeError: environment.plugins.set is not a functionというエラーが出る
環境
Rails 5.1.5
webpacker 3.3.0
現象
Compilation failed:
remote: /tmp/build_074ca0ee678491d6f72035c60cc5f616/config/webpack/environment.js:5
remote: environment.plugins.set('Provide',
...
0
票
1回答
168 件の閲覧数
Railsでwebpackerを入れるとherokuへのデプロイでこける
環境
Rails 5.1.5
webpack 3.11.0
エラーメッセージ
remote: Webpacker is installed 🎉 🍰
remote: Using /tmp/build_a60546bb726d2fa7f4b8b4ac052f461e/config/webpacker.yml file for setting up webpack ...
0
票
0回答
2,902 件の閲覧数
自作vueコンポーネントをimportする際のエラー "export 'default' (imported as 'NuxtAutolink') was not found in 'nuxt_autolink'
自作した'nuxt_autolink'という.vueコンポーネントモジュールを、npm publishして公開したのですが、nuxt.jsのプロジェクトで、node_moduleからインストールして以下のように、使用したところ、
import NuxtAutolink from 'nuxt_autolink';
export default {
components: {
...
0
票
1回答
2,383 件の閲覧数
webpack-dev-serverで自動コンパイル・画面更新できない
この度フロントエンドに入門しようとしています。
やりたいこと
webpack及びその周辺技術を用いて、
- js及びcssが保存時(ファイル変更時)にウォッチされ自動コンパイルされる
- 自動コンパイルされた際に、ブラウザ(localhost:8080 ??)が自動でリロードされる
やったこと
以下のようにyarnとwebpackで環境構築をしました。
package.json
{
...
1
票
1回答
291 件の閲覧数
TypeScript 2 + Webpack 3で、同じライブラリを通常のモジュールとしてインストールすると動くが、@typesの型定義だけをインストールするとエラーになる
TypeScript 2 + Webpack 3を用いて、外部ライブラリ(モジュール)を使用したアプリケーションを作ろうとしているのですが、このとき、あるライブラリAについて
ライブラリA本体をnpm installでインストールすると正常にビルドできる
ライブラリAの型定義のみ(@types/A)をnpm installでインストールするとビルドに失敗する
という現象が発生し、...
0
票
1回答
1,965 件の閲覧数
WebpackでSlickを使用する際に、“slick-theme.scss”内で使用されている画像とフォントが読み込めない
内容
WebpackでjQueryのスライダー用ライブラリSlickを使用しているのですが、
slick-theme.scssをimportするとscss内で定義されている画像とフォントのパスが
localhostのドキュメントルートからのパスになってしまい404 Not Foundとなってしまいます。
現状回避策として、
htmlファイルに直接書きを記述することでslick-theme....
1
票
1回答
943 件の閲覧数
babel-loaderの設定でexclude: /(node_modules|bower_components)/しているのは何故でしょうか
webpackでES6構文を用いたJavascriptのコードを処理するためにbabel-loaderを利用しています。
Github babel-loaderにあるREADME.mdの通りに設定し、問題なく動いていることを確認できていますが、下記の設定のうち、excludeを指定する必要が何故あるのかがわかりません。
module: {
rules: [
{
test:...
1
票
1回答
162 件の閲覧数
tsxファイルに書いた __('x_id') を i18n-webpack-pluginで処理したい
webpack.config.dev.js へ
const I18nPlugin = require("i18n-webpack-plugin");
const langJa = require("./ja.json");
・・・
module: {
loaders: [
{
test: /\.(ts|tsx)$/,
include: paths.appSrc,...
2
票
1回答
229 件の閲覧数
webpackのaliasに付く$の意味
vue.jsのwebpackテンプレートのwebpackのaliasの記述に
vuejs-templates/webpack
'vue$': 'vue/dist/vue.common.js'
と、$が付いてますがこの意味ってなんでしょうか?
aliasの名前がvue$になるわけでもないようですし。。。
1
票
1回答
65 件の閲覧数
webpack -w 使用時に、ファイルごとのコンパイル結果を出力させたくない
webpackでTypeScriptとSCSSをビルドしようとしています。
双方とも複数のファイルで構成しており、ビルド時に1つのファイルにバンドルさせようとしています。
このとき、コマンドラインから「webpack」と入力したときは期待通りにコンパイルを行なうのですが、「webpack -w」でファイル監視させ、tsファイルやscssファイル変更時に自動リビルドした際、...
3
票
0回答
256 件の閲覧数
webpackで結合したファイルのサイズが6MBを超えてしまいます
webpack/es2015で開発をしているのですが、結合したファイルのサイズが6MBを超えてしまいます。
angular-materialのimportを外すと3MBほど減るのですが、それにしても大きすぎるのでなんとかしたいのですが、そもそもそのくらいのサイズになるのは仕方がないのでしょうか?
src
import 'babel-polyfill';
import angular from ...
1
票
2回答
118 件の閲覧数
webpackのProviderPluginについて
webpackのProviderPluginについて質問です。
const {hoge, fuga} = require('hoge-fuga');
のように一つのモジュールの返り値を分割したい場合はどう記述すればいいのでしょうか。
// やりたいイメージ
module.exports = {
plugins: [
new webpack.ProvidePlugin({...
1
票
1回答
1,158 件の閲覧数
webpackでのTweenMax、EasePackの使い方(typescriptを使用)
TimelineMaxやTweenLiteは使えているのですが、同じようにしてもTweenMaxが使えません。
webpack.config.jsではresolveのaliasで以下のように設定しています。
alias: {
TweenLite: 'gsap/src/uncompressed/TweenLite.js',
TweenMax: 'gsap/src/...
1
票
1回答
638 件の閲覧数
webpackでサーバー側のモジュールを無害化したい
browserifyであれば、ignoreに追加したモジュールは無害化され、require()は空の参照を返します。
webpackで同様のことをしたいと思い、以下のようなwebpack.config.babel.jsのexternalを利用してビルドを行いましたが、htmlから読み込むとReferenceError: express is not definedとなってしまいます。
npm ...