Skip to main content

次のタグが付いている話題の回答:

9

@importするときの@の意味

質問者さんのおっしゃる通り、そのファイルでは @import '@/assets/styles/mixin.scss'; は @import '../assets/styles/mixin.scss'; と同じ意味だと思われます。この@が何なのかは、webpackの設定ファイルを見れば答えが載っているかと思います。 ...
Faily Feely's user avatar
  • 2,883
4

@importするときの@の意味

こんにちは。Faily Feelyさんの回答に対する補足回答です。回答にある通り、@ は、ルートディレクトリを示すことができるショートカットのようなものです。示してくれた例の他にも、ディレクトリの階層が深い場所にあるファイルから、ルートに近いファイルを import するときなどにも便利に使えます。 webpack の設定ファイルの名前から推測して、おそらくそのプロジェクトは、@vue/cli-...
shuuji3's user avatar
  • 141
3
承認済み

webpack-dev-serverをインストールしたもののローカル開発環境(localhost:8080)で作成したファイルを実行するとエラーが出ます。エラーを出さずにファイルの内容をブラウザで表示させるためにはどうすれば良いでしょうか?

まず、 package.json に書かれているスクリプトについてですが、実行したいパッケージは web-pack-dev-server ではなく、webpack-dev-server なので[1]、ここを修正します。 次に、特にプラグインを使用しない状態で webpack を実行しただけでは、バンドルされた JavaScript ファイルが生成されるだけで、 HTML ...
supa's user avatar
  • 5,391
3
承認済み

uglifyjs-webpack-pluginでライセンスコメントを残したい

まず原因ですが、UglfyJSのReadmeにある however, that there might be situations where comments are lost. と同等の状態になっているようです。具体的には即時関数の前に;がついていることにより、この;から前は不要な文として先にドロップされてしまっているため(この際にコメントも一緒に失われている)のようです。 ...
hinaloe's user avatar
  • 4,751
3
承認済み

webpack での jquery の $ 変数の扱いについて

コードの順番に関係無く、importやrequireでモジュールのファイルを読み込む処理が最初に実行され、その後に地の文にある処理が実行されるからです。 どういうことかというと、import '../vendor/jQuery-Validation-Engine/js/jquery.validationEngine';の方が、globalThis.jQuery = globalThis.$ = ...
raccy's user avatar
  • 8,069
3

Webpackを使用すればグローバル汚染は起こりませんか?

いいえ、webpackはグローバル汚染を完全に防いでくれません。これはwebpackの限界と言うより、ESモジュール、CommonJS、AMDの限界です。 webpackはCommonJSやAMDを用いてモジュール化されたJavaScript群を一つのJavaScriptとして結合するために作られました。ES2015からECMAScriptの仕様自体にモジュールの機能(ESモジュール)が加わり、...
raccy's user avatar
  • 8,069
2
承認済み

webpackのaliasに付く$の意味

ドキュメントにちゃんと書いてありました。 他のファイルを読み込みたい場合もalias使えるようですね。 自己解決しました。失礼しました。 http://webpack.github.io/docs/configuration.html#resolve-alias
けーこ's user avatar
  • 181
2
承認済み

webpack -w 使用時に、ファイルごとのコンパイル結果を出力させたくない

<追記> その後調査したところ、こちらはwebpackに原因があったのではなく、使用していたcloud9のace editorの設定によって発生していたことがわかりました。 (「ビルド時に自動的にタブを保存して閉じる」のチェックを外すと発生しなくなりました)
smw's user avatar
  • 33
2
承認済み

単独ファイルコンポネント(.vueファイル)にも、vue-class-componentのクラスにもpugプレプロセッサーを利用出来るようなWebpack設定

私の場合は、これで動いてくれました: { test: /\.pug$/, oneOf: [{ resourceQuery: /^\?vue/, use: ["pug-plain-loader"] }, { use: [ "html-loader", "pug-html-...
徳川武's user avatar
  • 213
2
承認済み

babelを内部で使用したjsをwebpackでバンドルできない

@babel/coreではなく@babel/standaloneを使用するのがよいと思います。 webpackでご提示のプログラムをバンドルすると以下のワーニングが出ます。これが今回の問題を示しています。 WARNING in ./node_modules/@babel/core/lib/config/files/configuration.js 232:23-40 Critical ...
Faily Feely's user avatar
  • 2,883
2

webpack-dev-serverをインストールしたもののローカル開発環境(localhost:8080)で作成したファイルを実行するとエラーが出ます。エラーを出さずにファイルの内容をブラウザで表示させるためにはどうすれば良いでしょうか?

- "start": "web-pack-dev-server --open", + "start": "webpack-dev-server --open", 不要な - が原因な気がしました(^ ^)
奥村健吾's user avatar
2
承認済み

Node.jsの環境でwebpackを実行すると、`WARNING`の注意文が表示されました。この注意文に対する対処方法(既存ファイルの修正や注意文の無視など)を教えてください。

Webpack の mode については https://webpack.js.org/configuration/mode/ に記載があります。 mode は環境に合わせた最適化を有効にするオプションで、 none (最適化なし)、 development (開発環境向け最適化) production (本番環境向け最適化;デフォルト)の3種類があります。 mode を指定するには以下のように ...
uasi's user avatar
  • 442
2
承認済み

UAParser.js をインポートできない

Babel はデフォルトでは、読み込むファイルを ES モジュールだと想定しパースします[1]。一方で ua-parser-js は CommonJS モジュールにのみ対応[2]しています。この状況で babel によるトランスパイルを行うと、 babel は ua-parser-js を import 文と同様の方法で読み込もうとします。しかし、 ua-parser-js は import ...
supa's user avatar
  • 5,391
2
承認済み

Rails + webpacker における global と window と config/webpack/environment.js の違い

それぞれについて「一体何をしているのか?」を理解しておく必要があります。 windowやglobalはグローバルオブジェクトというものです。歴史的な経緯でグローバルオブジェクトはJavaScriptの実装によって名前が異なっており、ブラウザではwindow、Node.jsではglobalを使っていました。これは混乱のもとなっていたため、最新のECMAScript(...
raccy's user avatar
  • 8,069
1
承認済み

webpackのdevServer はどうやって立ち上げるのでしょうか?

webpack-dev-serverですが、7月にリリースされたv4より設定のスキーマが変更されているようです。 マイグレーションガイドのこのあたりがエラーの該当箇所ですね。 --- webpack.config.js.orig +++ webpack.config.js @@ -23,8 +23,9 @@ devServer: { - contentBase: path....
hinaloe's user avatar
  • 4,751
1
承認済み

Rails6/Webpacker環境で外部JSファイル内でHTMLのIDを取得したい

app/javascript/chk_waittime/index.jsを下記のように window.onload = function() {} で囲うことで解決しました。 javascriptが読み込まれるタイミングが原因のようです。 変更前 document.getElementById('post_waittime').onclick = function(){ alert('...
leo's user avatar
  • 73
1

electronにてwebpackでソースのビルドが成功しているのに何も表示されない

この本、持ってます。何ページのものですか? require が定義されていない、というエラー表示が出ているみたいなので 何かビルド設定が間違っているのかも。 追記です。本の著者さんの記事が出ていました。 ちょうどエレクトロンのところですので、こちらで動かされるとよいと思います。 https://news.mynavi.jp/article/zerojavascript-6/
s.yamamoto's user avatar
1

webpackでnpmでインストールしたjQueryを使いたい

index.jsに import $ from '../env/node_modules/jquery'; を追加したらいけました。 ●index.js import '../scss/style.scss'; import $ from '../env/node_modules/jquery'; import * as util from './utility.js' import * as ...
user37807's user avatar
1
承認済み

webpackerのエラーによってAWSでRails6のアプリを表示できません

自己解決致しました。 webpacker.ymlの中でproductionに関する設定のうち、 extract_css: trueとあったところを extract_css: falseとしたところ表示することができました。 私はsassを使っており、.cssのファイルがないので、こうしておかないと .cssをデフォルトで探しに行くが見つからないという状況に陥るため、エラーが発生したと考えられます。...
jimbo5922's user avatar
1

Rails6で、実行環境時にFont Awesomeの絵文字が四角に表示される

config/environments/production.rb で config.assets.compile = true とすることで解決しました。
yudukikun5120's user avatar
1
承認済み

Rails5.2.3から6.0.2へのアップグレード後に起動できない

Railsのアップグレードは比較的難しい作業です。日本語版のドキュメントなどを見ながら必要なステップを一つずつこなしていくことになります。6.0へのアップグレードについては特にこちらを参照してください。 アップグレードを支援するスクリプトとしてrails app:updateというものがあります。こちらを利用するとステップバイステップでアップグレードを行うことができるため、...
Masafumi Okura's user avatar
1

webpackでjQueryをすべてのjsファイル内で使いたい

webpack.config.jsの一番最初に const webpack = require('webpack'); を追加したところ解決しました。
user37807's user avatar
1
承認済み

webpackのビルドをしても,ローカルの開発環境でエラーが出てしまいブラウザに何も表示されません

package.json の devDependencies プロパティから、質問者さんが Babel 7 を使用しているとわかります。そして Babel 7 からは、すべてのパッケージがスコープ付きパッケージへ変更されました[1]。これにより、パッケージ名は babel-* から @babel/* に切り替わることになります。 この変更が行なわれた主な理由は、下記引用の第二段落にあるとおり、...
supa's user avatar
  • 5,391
1

Node.jsの環境でwebpackを実行すると、`WARNING`の注意文が表示されました。この注意文に対する対処方法(既存ファイルの修正や注意文の無視など)を教えてください。

はじめまして。 Githubを見たところ、webpack.config.jsがないようです。
ymd's user avatar
  • 11
1
承認済み

Webpackで作ったパッケージにHTMLのScriptからオブジェクトをセットしたい

一つの方法は、SomeObject.tsからSOME_OBJECTを書き換える関数を提供することです。 SomeObject.ts export let SOME_OBJECT: Object = {}; export function setSomeObject(newObj: Object) { SOME_OBJECT = newObj; } index....
Faily Feely's user avatar
  • 2,883
1

webpack --watch で build.js ファイルが生成されません

webpack --watchとwebpack-dev-serverは別物です。webpack-dev-serverはブラウザからアクセス可能なサーバーを提供する代わりに、生成物をファイルシステムに保存する機能はありません(参考:Write bundle to disk)。ファイルに保存してもらうためにはwebpack --watchとする必要があります。 webpack-dev-...
Faily Feely's user avatar
  • 2,883
1

webpackのパッケージ依存について

webpackの最新バージョンを使う際、 各ライブラリが、webpackの最新バージョンに対応していない場合があるので 対応するまではwebpackのバージョンを落として対応するなどする必要があるかと思います。 またnodeのバージョンを合わせていないと起こる場合もあるため、気をつける必要があります。 各ライブラリは、都度バージョンアップしているため、 ...
kamem's user avatar
  • 121
1

webpack-dev-serverで自動コンパイル・画面更新できない

自己解決: index.htmlをpublic/に移動し、contentBase: publicDirとすることでやりたいことが突然満たされました。理由は謎ですが・・・。
Taichi's user avatar
  • 111
1

TypeScript 2 + Webpack 3で、同じライブラリを通常のモジュールとしてインストールすると動くが、@typesの型定義だけをインストールするとエラーになる

すみません、自己解決してしまったかもしれません。 webpack.config.jsの中に、externals を追加することで、正常に動作するらしいことに気が付きました。(今回であれば外部ライブラリとしてjQueryを使うため、externalsにjQueryを追加) お騒がせしました。 webpack.config.js module.exports = { // (中略) ...
Dice's user avatar
  • 21
1

WebpackでSlick.jsを使用する際に、"slick-theme.scss"内で使用されている画像とフォントが読み込めない

slick-theme.scssファイル内で以下のパスが設定されているので、/detailからの相対パスになってしまっているようです。 $slick-font-path: "./fonts/" !default; $slick-loader-path: "./" !default; 私のプロジェクトではscssからslickのスタイルをimportをしているのですが、そこでfile-...
Nozomi's user avatar
  • 11

無効化に投票