7
質問者さんのおっしゃる通り、そのファイルでは
@import '@/assets/styles/mixin.scss';
は
@import '../assets/styles/mixin.scss';
と同じ意味だと思われます。この@が何なのかは、webpackの設定ファイルを見れば答えが載っているかと思います。
これはwebpackでパスに対するエイリアスを指定しているものと思われます。つまり、@と書いてあったらプロジェクトのルートディレクトリを指すように設定しているのです。恐らく、そのファイルの場合は@が指し示す位置が..と同じなので、質問者さんの考察のようになるのではないかと思います。
このように設定することの利点は、...
4
こんにちは。Faily Feelyさんの回答に対する補足回答です。回答にある通り、@ は、ルートディレクトリを示すことができるショートカットのようなものです。示してくれた例の他にも、ディレクトリの階層が深い場所にあるファイルから、ルートに近いファイルを import するときなどにも便利に使えます。
webpack の設定ファイルの名前から推測して、おそらくそのプロジェクトは、@vue/cli-init を使用してセットアップしたものだと思います。これは、Vue.js プロジェクトが提供してくれているツールで、Vue.js に適した基本設定が施されたプロジェクトのひな形を自動生成してくれる便利なツールです。以下のコマンドでこのツールをインストールし、ひな形生成コマンドを実行すると、webpack と Vue....
3
まず、 package.json に書かれているスクリプトについてですが、実行したいパッケージは web-pack-dev-server ではなく、webpack-dev-server なので[1]、ここを修正します。
次に、特にプラグインを使用しない状態で webpack を実行しただけでは、バンドルされた JavaScript ファイルが生成されるだけで、 HTML ファイルが自動的に作成されたり、 HTML ファイルにバンドルされた JavaScript ファイルが自動挿入されることはありません[2] (実際には serve-index によりファイルの一覧が表示されます[3]が、これはバンドルファイルを読み込みません)。
そのため、今回の場合、 dist ディレクトリに index.html ...
3
まず原因ですが、UglfyJSのReadmeにある
however, that there might be situations where comments are lost.
と同等の状態になっているようです。具体的には即時関数の前に;がついていることにより、この;から前は不要な文として先にドロップされてしまっているため(この際にコメントも一緒に失われている)のようです。
このセミコロン、モジュールシステムを採用していないレガシーなコードで誤動作を防止するために使われていたものだったかと思いますが、まあwebpackを用いる場合は無用でしょう。
もし自身で書かれたコードなのであれば先頭のセミコロンを除去するだけで求められる挙動になるでしょう。
とはいえ、...
2
ドキュメントにちゃんと書いてありました。
他のファイルを読み込みたい場合もalias使えるようですね。
自己解決しました。失礼しました。
http://webpack.github.io/docs/configuration.html#resolve-alias
2
<追記>
その後調査したところ、こちらはwebpackに原因があったのではなく、使用していたcloud9のace editorの設定によって発生していたことがわかりました。
(「ビルド時に自動的にタブを保存して閉じる」のチェックを外すと発生しなくなりました)
2
私の場合は、これで動いてくれました:
{
test: /\.pug$/,
oneOf: [{
resourceQuery: /^\?vue/,
use: ["pug-plain-loader"]
}, {
use: [
"html-loader",
"pug-html-loader"
]
}]
}
2
@babel/coreではなく@babel/standaloneを使用するのがよいと思います。
webpackでご提示のプログラムをバンドルすると以下のワーニングが出ます。これが今回の問題を示しています。
WARNING in ./node_modules/@babel/core/lib/config/files/configuration.js 232:23-40
Critical dependency: the request of a dependency is an expression
@ ./node_modules/@babel/core/lib/config/files/index.js
@ ./node_modules/@babel/core/lib/index.js
@ ./src/...
2
- "start": "web-pack-dev-server --open",
+ "start": "webpack-dev-server --open",
不要な - が原因な気がしました(^ ^)
2
Webpack の mode については https://webpack.js.org/configuration/mode/ に記載があります。 mode は環境に合わせた最適化を有効にするオプションで、 none (最適化なし)、 development (開発環境向け最適化) production (本番環境向け最適化;デフォルト)の3種類があります。
mode を指定するには以下のように webpack.config.js に設定を書くか、
module.exports = {
mode: 'production',
// 他の設定…
};
あるいは webpack --mode=production のようにコマンドラインオプションを使います。
1
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 calender from './calender.js'
import * as validate from './validate.js'
///////////////////////////////////////////////////////////////////////
$('.js_slider')....
1
自己解決致しました。
webpacker.ymlの中でproductionに関する設定のうち、
extract_css: trueとあったところを
extract_css: falseとしたところ表示することができました。
私はsassを使っており、.cssのファイルがないので、こうしておかないと
.cssをデフォルトで探しに行くが見つからないという状況に陥るため、エラーが発生したと考えられます。
以下、参考にした記事です。
https://github.com/rails/webpacker/issues/2071
1
config/environments/production.rb で config.assets.compile = true とすることで解決しました。
1
Railsのアップグレードは比較的難しい作業です。日本語版のドキュメントなどを見ながら必要なステップを一つずつこなしていくことになります。6.0へのアップグレードについては特にこちらを参照してください。
アップグレードを支援するスクリプトとしてrails app:updateというものがあります。こちらを利用するとステップバイステップでアップグレードを行うことができるため、必要そうであればぜひ利用してみてください。
その上で、データベースに関するエラーですが、このコミットで導入されたエラーのようです。見たところconfig/database.ymlが正しくないために発生しているようです。質問にconfig/database.ymlを含めていただくことは可能でしょうか。
database....
1
webpack.config.jsの一番最初に
const webpack = require('webpack');
を追加したところ解決しました。
1
package.json の devDependencies プロパティから、質問者さんが Babel 7 を使用しているとわかります。そして Babel 7 からは、すべてのパッケージがスコープ付きパッケージへ変更されました[1]。これにより、パッケージ名は babel-* から @babel/* に切り替わることになります。
この変更が行なわれた主な理由は、下記引用の第二段落にあるとおり、パッケージ名の不当な占拠、コミュニティプラグインとの明確な区別や、命名に関する問題などを解消するためです。これに関してより詳細が知りたい場合は、 npm | policies | disputes や Nearing the 7.0 Release · Babel を参考にしてください。
Scoped ...
1
はじめまして。
Githubを見たところ、webpack.config.jsがないようです。
1
一つの方法は、SomeObject.tsからSOME_OBJECTを書き換える関数を提供することです。
SomeObject.ts
export let SOME_OBJECT: Object = {};
export function setSomeObject(newObj: Object) {
SOME_OBJECT = newObj;
}
index.tsからもexportして外部から使えるようにします。
index.ts
import { sampleAlert as _sampleAlert } from "./sampleAlert";
import { SOME_OBJECT, setSomeObject } from "./SomeObject";
const ...
1
webpack --watchとwebpack-dev-serverは別物です。webpack-dev-serverはブラウザからアクセス可能なサーバーを提供する代わりに、生成物をファイルシステムに保存する機能はありません(参考:Write bundle to disk)。ファイルに保存してもらうためにはwebpack --watchとする必要があります。
webpack-dev-serverを使いつつ生成物をファイルに保存してもらう方法としては、write-file-webpack-pluginを使う方法があるようです。
1
webpackの最新バージョンを使う際、
各ライブラリが、webpackの最新バージョンに対応していない場合があるので
対応するまではwebpackのバージョンを落として対応するなどする必要があるかと思います。
またnodeのバージョンを合わせていないと起こる場合もあるため、気をつける必要があります。
各ライブラリは、都度バージョンアップしているため、
webpack最新バージョンに対応ができしだい、都度合わせる必要があるかと思います。
ただ、webpackなどは日々バージョンアップしているため
個人的にはプロジェクトを始めるときに安定しているバージョンで作り始めるのがよいかなと思います。
1
自己解決:
index.htmlをpublic/に移動し、contentBase: publicDirとすることでやりたいことが突然満たされました。理由は謎ですが・・・。
1
すみません、自己解決してしまったかもしれません。
webpack.config.jsの中に、externals を追加することで、正常に動作するらしいことに気が付きました。(今回であれば外部ライブラリとしてjQueryを使うため、externalsにjQueryを追加)
お騒がせしました。
webpack.config.js
module.exports = {
// (中略)
externals: {
"jquery": "jQuery"
},
};
もしも、これが正しい解決方法でないというご意見などありましたら、追加のコメントや回答などを頂けると助かります。
1
slick-theme.scssファイル内で以下のパスが設定されているので、/detailからの相対パスになってしまっているようです。
$slick-font-path: "./fonts/" !default;
$slick-loader-path: "./" !default;
私のプロジェクトではscssからslickのスタイルをimportをしているのですが、そこでfile-pathを設定しています。
// プロジェクト内のscss
$slick-font-path: "~slick-carousel/slick/fonts/";
$slick-loader-path: "~slick-carousel/slick/";
@import "~slick-carousel/slick/slick....
1
結論から言いますと、トランスパイルするサードパーティのpolyfillやモジュールよっては実行時にエラーになる可能性のあるものがあるからです。
こちらのQiitaの記事が参考になります
webpackでbabel際はnode_modulesをexcludeし忘れるべからず
また、同じ作者の方がexcludeを忘れた際にエラーがでるケースを再現したアプリケーションを公開してくれています。詳しく知りたければこちらも参考になるかと思われます。
https://github.com/haribote/do-not-miss-excluding-node-modules
1
const {hoge, fuga} = require('hoge-fuga');
ができるモジュール hoge-fuga は既にあって(分割代入は理解していて)、同じことを webpack.ProvidePlugin() で行いたいということでしょうか。
それを実現する機能が webpack 2.2.0 で実装されました。
feat request: ProvidePlugin property import · Issue #2864 · webpack/webpack
分割代入のような記法ではなく、モジュール名に加えてプロパティ名を指定します。
const webpack = require('webpack');
module.exports = {
plugins: [
...
1
WebPackは知りませんが、お探しなのは分割代入では無いでしょうか(ECMAScript 6の機能)。
代入先の変数と同じ名前のプロパティを持ったオブジェクトを返すと出来ます。
function x() {
return {a: 9, b: 'hello', c:Date.now()};
}
//宣言と同時に
var {a, b, c} = x();
console.log(1, a, b, c);
//先見と代入を分ける場合は()で囲む必要あり
//var a, b, c;
//({a, b, c} = x());
//変数名を変える場合
var {a: foo, b:bar, c:time} = x();
console.log(2, foo, bar, ...
1
自己解決した内容ですが、gsapがwebpackに対応したためです
こちらを参照してください。
Best way to use GSAP with Webpack
私の方法が悪いのかもしれませんがScrollToPluginのみimportができないのでこのコメントのようにaliasを設定しています。
GSAP & NPM/Webpack import for ScrollToPlugin
1
https://github.com/webpack/webpack/issues/1021
こちらに方法が載っていました。
package.jsonのbrowserフィールドに無害化したいモジュール名を入力し、webpack.config.babel.jsのexternalsは削除することで、bundle.jsをhtmlから読み込んでもエラーが発生しなくなりました。
package.json
{
"name": "webpack-external-trouble",
"private": true,
"browser": {
"express": false
},
"scripts": {
"build": "webpack"
},
"...
上位に投票された、最小文字数のコミュニティ wiki 以外の回答のみが対象となります
関連するタグ
webpack × 45javascript × 16
ruby-on-rails × 10
vue.js × 6
typescript × 6
node.js × 5
npm × 5
babeljs × 5
reactjs × 4
css × 3
heroku × 3
nuxt.js × 3
jquery × 2
aws × 2
docker × 2
electron × 2
ecmascript-6 × 2
yarn × 2
html × 1
json × 1
laravel × 1
angularjs × 1
firebase × 1
rails-activerecord × 1
bootstrap × 1