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

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

ただいまの
回答率

88.62%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 828
退会済みユーザー

退会済みユーザー

 Windows7でwebpackチュートリアル

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

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

"devDependencies": {
    "autoprefixer": "^8.0.0",
    "css-loader": "^0.28.9",
    "file-loader": "^1.1.8",
    "node-sass": "^4.7.2",
    "postcss-loader": "^2.1.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.2",
    "url-loader": "^0.6.2",
    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
},
"dependencies": {
    "font-awesome": "^4.7.0"
}


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

 font-awesomeが読み込めない

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

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

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

/* 7 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__.p + "fonts\\fontawesome-webfont.eot";
/***/ }),

/* 8 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__.p + "fonts\\fontawesome-webfont.eot";
/***/ }),

/* 9 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__.p + "fonts\\fontawesome-webfont.woff2";
/***/ }),

/* 10 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__.p + "fonts\\fontawesome-webfont.woff";
/***/ }),

/* 11 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__.p + "fonts\\fontawesome-webfont.ttf";
/***/ }),

/* 12 */
/***/ (function(module, exports, __webpack_require__) {
module.exports = __webpack_require__.p + "fonts\\fontawesome-webfont.svg";
/***/ }),


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

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

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

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

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

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

// webpack.config.js

const path = require("path");

module.exports = [{
  entry: ["./src/app.js"],
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "public"),
  },
  devServer: {
    contentBase: path.resolve(__dirname, "public")
  },
  module: {
    rules: [{
      test: /\.(css|sass|scss)$/,
      use: [
        "style-loader",
        "css-loader",
        "sass-loader",
        {
          loader: "postcss-loader",
          options: {
            plugins: function(){
              return [
                require("autoprefixer")
              ];
            }
          }
        }
      ]
    },{
      test: /\.(jpe?g|png|gif|svg|ico)(\?.+)?$/,
      include: [
        path.resolve(__dirname, "src", "img")
      ],
      use: {
        loader: "url-loader",
        options: {
          limit: 8192,
          name: "./img[name].[ext]"
        }
      }
    }, {
      test: /\.(eot|otf|ttf|woff2?|svg)(\?.+)?$/,
      include: [
        path.resolve(__dirname, "node_modules")
      ],
      use: {
        loader: "file-loader",
        options: {
          name: "./fonts/[name].[ext]"
        }
      }
    }]
  }
}];
// app.js

var css = {
  fontAwesome: require("font-awesome/scss/font-awesome.scss"),
  style: require("./scss/style.scss")
};

console.log("hello world!");

 追記 -コマンド

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

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

を登録しています。

上記の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


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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • asahina1979

    2018/03/07 12:12

    コマンドかいてないけどコマンドミスなのでは

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/03/07 13:42

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

    キャンセル

回答 1

check解決した方法

0

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

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

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

"devDependencies": {
  "autoprefixer": "^8.1.0",
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.4",
  "babel-preset-env": "^1.6.1",
  "css-loader": "^0.28.10",
  "file-loader": "^1.1.11",
  "node-sass": "^4.7.2",
  "postcss-loader": "^2.1.1",
  "sass-loader": "^6.0.7",
  "style-loader": "^0.20.2",
  "url-loader": "^1.0.1",
  "webpack": "^4.1.1",
  "webpack-cli": "^2.0.10",
  "webpack-dev-server": "^3.1.0"
},
"dependencies": {
  "font-awesome": "^4.7.0"
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る