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が読み込めない
chromeのdevToolsから確認してみたところ、
リクエストのパスのセパレータが"%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のファイルセパレータ""をさらにエスケープしたのでしょうか…?
試しに手書きで""を"/"に置換したところ、
毎回手書きなんてやってられない!
できることにはできたのですが、毎回手書きで修正なんてやっていられないです。
何とかする方法をご存知の方いらっしゃいませんか…?
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
も試してみましたがダメでした。
回答1件
あなたの回答
tips
プレビュー