質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Windows 7

Microsoft Windows 7は過去にリリースされたMicrosoft WindowsのOSであり、Windows8の1代前です。2009年の7月にリリースされ販売されました。Windows7の前はWindowsVistaで、その更に3年前にリリースされました。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1653閲覧

webpack: パスのセパレータが一部"%0"になってしまう

退会済みユーザー

退会済みユーザー

総合スコア0

Windows 7

Microsoft Windows 7は過去にリリースされたMicrosoft WindowsのOSであり、Windows8の1代前です。2009年の7月にリリースされ販売されました。Windows7の前はWindowsVistaで、その更に3年前にリリースされました。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/02/22 07:11

編集2018/03/07 04:40

Windows7でwebpackチュートリアル

LyudeさんのQiitaポスト今時のフロントエンド開発2017を参考に、webpackの使い方を勉強中です。

OSはWindows7 x64, Node.jsはv8.9.3です。
基本的にはポストの通りに進め、package.jsonは以下の通りです。

json

1"devDependencies": { 2 "autoprefixer": "^8.0.0", 3 "css-loader": "^0.28.9", 4 "file-loader": "^1.1.8", 5 "node-sass": "^4.7.2", 6 "postcss-loader": "^2.1.0", 7 "sass-loader": "^6.0.6", 8 "style-loader": "^0.20.2", 9 "url-loader": "^0.6.2", 10 "webpack": "^3.11.0", 11 "webpack-dev-server": "^2.11.1" 12}, 13"dependencies": { 14 "font-awesome": "^4.7.0" 15}

file-loaderを使ってみるという所で、例としてfont-awesomeを使うのですが、そこで躓いています…

font-awesomeが読み込めない

font-awesomeが読み込めていないスクショ
font-awesomeが読み込めません!

chromeのdevToolsから確認してみたところ、
fonts%0fontawesome~?
リクエストのパスのセパレータが"%0"になってしまっていました。

webpackでバンドルされたbandle.jsは、

js

1/* 7 */ 2/***/ (function(module, exports, __webpack_require__) { 3module.exports = __webpack_require__.p + "fonts\fontawesome-webfont.eot"; 4/***/ }), 5 6/* 8 */ 7/***/ (function(module, exports, __webpack_require__) { 8module.exports = __webpack_require__.p + "fonts\fontawesome-webfont.eot"; 9/***/ }), 10 11/* 9 */ 12/***/ (function(module, exports, __webpack_require__) { 13module.exports = __webpack_require__.p + "fonts\fontawesome-webfont.woff2"; 14/***/ }), 15 16/* 10 */ 17/***/ (function(module, exports, __webpack_require__) { 18module.exports = __webpack_require__.p + "fonts\fontawesome-webfont.woff"; 19/***/ }), 20 21/* 11 */ 22/***/ (function(module, exports, __webpack_require__) { 23module.exports = __webpack_require__.p + "fonts\fontawesome-webfont.ttf"; 24/***/ }), 25 26/* 12 */ 27/***/ (function(module, exports, __webpack_require__) { 28module.exports = __webpack_require__.p + "fonts\fontawesome-webfont.svg"; 29/***/ }),

こんな感じに、パスがおかしくなっていました。

Windowsのファイルセパレータ""をさらにエスケープしたのでしょうか…?
試しに手書きで""を"/"に置換したところ、

font-awesome読み込めたスクショ
読み込むことができました。

毎回手書きなんてやってられない!

できることにはできたのですが、毎回手書きで修正なんてやっていられないです。
何とかする方法をご存知の方いらっしゃいませんか…?

webpack.config.jsとentryのapp.jsは以下の通りです。
不足の情報がありましたらおっしゃってください…!

js

1// webpack.config.js 2 3const path = require("path"); 4 5module.exports = [{ 6 entry: ["./src/app.js"], 7 output: { 8 filename: "bundle.js", 9 path: path.resolve(__dirname, "public"), 10 }, 11 devServer: { 12 contentBase: path.resolve(__dirname, "public") 13 }, 14 module: { 15 rules: [{ 16 test: /.(css|sass|scss)$/, 17 use: [ 18 "style-loader", 19 "css-loader", 20 "sass-loader", 21 { 22 loader: "postcss-loader", 23 options: { 24 plugins: function(){ 25 return [ 26 require("autoprefixer") 27 ]; 28 } 29 } 30 } 31 ] 32 },{ 33 test: /.(jpe?g|png|gif|svg|ico)(?.+)?$/, 34 include: [ 35 path.resolve(__dirname, "src", "img") 36 ], 37 use: { 38 loader: "url-loader", 39 options: { 40 limit: 8192, 41 name: "./img[name].[ext]" 42 } 43 } 44 }, { 45 test: /.(eot|otf|ttf|woff2?|svg)(?.+)?$/, 46 include: [ 47 path.resolve(__dirname, "node_modules") 48 ], 49 use: { 50 loader: "file-loader", 51 options: { 52 name: "./fonts/[name].[ext]" 53 } 54 } 55 }] 56 } 57}];

js

1// app.js 2 3var css = { 4 fontAwesome: require("font-awesome/scss/font-awesome.scss"), 5 style: require("./scss/style.scss") 6}; 7 8console.log("hello world!"); 9

追記 -コマンド

コマンドに関してはpackage.jsonに、

json

1"scripts": { 2 "test": "echo \"Error: no test specified\" && exit 1", 3 "webpack": "webpack", 4 "start": "npm run serve", 5 "build": "webpack --progress --optimize-minimize", 6 "serve": "webpack-dev-server --hot --inline --devtool source-map" 7}

を登録しています。

上記のbandle.jsはコマンドプロンプトでプロジェクトのルートディレクトリから

npm run webpack

を実行し、出力されたものです。

出力されたパス以外は特に問題は見られないのですが、
何かオプションが必要だったりするのでしょうか…?

出力時のログはこんな感じです。

Version: webpack 3.11.0 Child Hash: 6944c0d7ce27a3036b70 Time: 1225ms Asset Size Chunks Chunk Names fonts\fontawesome-webfont.eot 166 kB [emitted] fonts\fontawesome-webfont.woff2 77.2 kB [emitted] fonts\fontawesome-webfont.woff 98 kB [emitted] fonts\fontawesome-webfont.ttf 166 kB [emitted] fonts\fontawesome-webfont.svg 444 kB [emitted] [big] bundle.js 66.7 kB 0 [emitted] main [3] multi ./src/app.js 28 bytes {0} [built] [4] ./src/app.js 152 bytes {0} [built] [14] ./src/scss/style.scss 1.39 kB {0} [built] [15] ./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/postcss-loader/lib??ref--0-3!./src/scss/ style.scss 690 bytes {0} [built] [16] ./src/img/logo.png 1.18 kB {0} [built] + 12 hidden modules

また、

npm start npm run build npm run serve

も試してみましたがダメでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/03/07 03:12

コマンドかいてないけどコマンドミスなのでは
退会済みユーザー

退会済みユーザー

2018/03/07 04:42

失礼致しました。コマンドについて追記致しました!
guest

回答1

0

ベストアンサー

結局このままの環境では解決できなかったのですが、
こちらのエントリーや各ツールのドキュメントを参考にし、Babel等を組み込みつつリトライしてみたところ上手くいきました。

理由等はよく分からないのですが、バージョンの関係だったのかもしれません…

念のため、package.jsonを載せておきます。
お手数おかけして申し訳ありませんでした…!

json

1"devDependencies": { 2 "autoprefixer": "^8.1.0", 3 "babel-core": "^6.26.0", 4 "babel-loader": "^7.1.4", 5 "babel-preset-env": "^1.6.1", 6 "css-loader": "^0.28.10", 7 "file-loader": "^1.1.11", 8 "node-sass": "^4.7.2", 9 "postcss-loader": "^2.1.1", 10 "sass-loader": "^6.0.7", 11 "style-loader": "^0.20.2", 12 "url-loader": "^1.0.1", 13 "webpack": "^4.1.1", 14 "webpack-cli": "^2.0.10", 15 "webpack-dev-server": "^3.1.0" 16}, 17"dependencies": { 18 "font-awesome": "^4.7.0" 19}

投稿2018/03/08 16:16

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問