{"action":"created","issue":{"url":"https://api.github.com/repos/webpack/webpack-dev-server/issues/1381","repository_url":"https://api.github.com/repos/webpack/webpack-dev-server","labels_url":"https://api.github.com/repos/webpack/webpack-dev-server/issues/1381/labels{/name}","comments_url":"https://api.github.com/repos/webpack/webpack-dev-server/issues/1381/comments","events_url":"https://api.github.com/repos/webpack/webpack-dev-server/issues/1381/events","html_url":"https://github.com/webpack/webpack-dev-server/issues/1381","id":315373496,"node_id":"MDU6SXNzdWUzMTUzNzM0OTY=","number":1381,"title":"webpack dev server can't load fonts by file-loader","user":{"login":"se7en00","id":1452533,"node_id":"MDQ6VXNlcjE0NTI1MzM=","avatar_url":"https://avatars2.githubusercontent.com/u/1452533?v=4","gravatar_id":"","url":"https://api.github.com/users/se7en00","html_url":"https://github.com/se7en00","followers_url":"https://api.github.com/users/se7en00/followers","following_url":"https://api.github.com/users/se7en00/following{/other_user}","gists_url":"https://api.github.com/users/se7en00/gists{/gist_id}","starred_url":"https://api.github.com/users/se7en00/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/se7en00/subscriptions","organizations_url":"https://api.github.com/users/se7en00/orgs","repos_url":"https://api.github.com/users/se7en00/repos","events_url":"https://api.github.com/users/se7en00/events{/privacy}","received_events_url":"https://api.github.com/users/se7en00/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-04-18T08:07:12Z","updated_at":"2018-12-06T09:58:45Z","closed_at":"2018-05-08T22:43:31Z","author_association":"NONE","body":"<!--\r\n  Please note that this template is not optional.\r\n  Please fill out _ALL_ fields, or your issue may be closed as \"invalid.\"\r\n  Please do not delete this template.\r\n  Please ask questions on StackOverflow or Gitter (https://gitter.im/webpack/webpack).\r\n  General questions, how-to questions, and support requests will be closed.\r\n-->\r\n\r\n* Operating System: window7\r\n* Node Version: 6.14.1\r\n* NPM Version: 3.10.10\r\n* webpack Version: 4.5\r\n* webpack-dev-server Version: 3.1.3\r\n\r\n<!--\r\n  Please place an x, no spaces, in all [ ] that apply\r\n  Please note that we are NOT accepting FEATURE requests at this time.\r\n-->\r\n\r\n- [x ] This is a **bug**\r\n- [ ] This is a **modification** request\r\n\r\n### Code\r\n\r\n<!--\r\n  If you have a large amount of code to share which demonstrates the problem\r\n  you're experiencing, or your webpack config is very large, please provide a link\r\n  to your repository rather than pasting code. We'd also encourage you to use a\r\n  Github Gist link instead of pasting code. Otherwise, please paste relevant\r\n  short snippets below.\r\n\r\n  For bugs, please do consider providing a link to a stripped-down, bare-bones\r\n  repo that can reproduce the problem you're experiencing. Many times, bugs\r\n  aren't actual bugs, but rather specific issues with loaders, plugins, or\r\n  an environment/OS. Problems with complicated or large applications will almost\r\n  always require this to be triaged.\r\n-->\r\n```js\r\n//package.json\r\n{\r\n  \"scripts\": {\r\n    \"build\": \"webpack  --config webpack.config.js\",\r\n    \"dev\": \"webpack-dev-server --config  webpack.config.js\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"css-loader\": \"^0.28.7\",\r\n    \"file-loader\": \"^1.1.11\",\r\n    \"node-sass\": \"^4.5.3\",\r\n    \"sass-loader\": \"^6.0.6\",\r\n    \"style-loader\": \"^0.19.0\",\r\n    \"url-loader\": \"^0.6.2\",\r\n    \"webpack\": \"4.5.0\",\r\n    \"webpack-cli\": \"^2.0.14\",\r\n    \"webpack-dev-server\": \"3.1.3\"\r\n  },\r\n  \"dependencies\": {\r\n    \"font-awesome\": \"^4.7.0\"\r\n  }\r\n}\r\n\r\n```\r\n```js\r\n  // webpack.config.js\r\nmodule.exports = {\r\n    mode: 'development',\r\n    entry: './src/app.js',\r\n    devtool: 'cheap-module-source-map',\r\n    output: {\r\n        path: __dirname + '/dist',\r\n        filename: 'build.js',\r\n        publicPath: '/',\r\n    },\r\n    module: {\r\n        rules: [\r\n            {\r\n                test: /\\.scss$/,\r\n                loader: 'style-loader!css-loader!sass-loader'\r\n            },\r\n            {\r\n                test: /\\.(woff(2)?|ttf|eot|svg)(\\?v=\\d+\\.\\d+\\.\\d+)?$/,\r\n                use: [{\r\n                    loader: 'file-loader',\r\n                    options: {\r\n                        name: '[name].[ext]',\r\n                        outputPath: 'fonts/',\r\n                        publicPath: url => `../fonts/${url}`\r\n                    }\r\n                }]\r\n            }\r\n        ],\r\n    },\r\n    devServer: {\r\n        clientLogLevel: 'warning',\r\n        historyApiFallback: true,\r\n        hot: true,\r\n        publicPath: \"/\",\r\n        inline: true,\r\n        overlay: true,\r\n        contentBase: 'dist',\r\n        host: 'localhost',\r\n        port: 9001\r\n    },\r\n    watch: true,\r\n};\r\n```\r\n\r\n```js\r\n  // app.js\r\nimport './style.scss';\r\n```\r\n```scss\r\n  // style.scss\r\n@import '~font-awesome/css/font-awesome.css';\r\n```\r\n```html\r\n//index.html\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>Loading Fonts with Webpack - Chris Courses</title>\r\n</head>\r\n<body>\r\n\t<h1>Loading Fonts with Webpack - Chris Courses</h1>\r\n    <i class=\"fa fa-check fa-lg\"></i>\r\n    <script type=\"text/javascript\" src=\"build.js\"></script>\r\n</body>\r\n</html>\r\n```\r\n\r\n### Expected Behavior\r\nrequest the url localhost:9001, it can load the awesome fonts in dist when start dev server\r\n\r\n### Actual Behavior\r\ncan not load the awesome fonts when start dev server.\r\nbut if we user cli: yarn build, it can output the fonts in the dist directory.\r\n### For Bugs; How can we reproduce the behavior?\r\nyou can install this [repo](https://github.com/se7en00/fontsTestWithWepack4), when start the webpack dev server, it only show the words, not show the font icon.\r\nand it's similar as the [issue#4111](https://github.com/webpack/webpack/issues/4111).\r\n"},"comment":{"url":"https://api.github.com/repos/webpack/webpack-dev-server/issues/comments/444815653","html_url":"https://github.com/webpack/webpack-dev-server/issues/1381#issuecomment-444815653","issue_url":"https://api.github.com/repos/webpack/webpack-dev-server/issues/1381","id":444815653,"node_id":"MDEyOklzc3VlQ29tbWVudDQ0NDgxNTY1Mw==","user":{"login":"ItsJepser","id":8017075,"node_id":"MDQ6VXNlcjgwMTcwNzU=","avatar_url":"https://avatars0.githubusercontent.com/u/8017075?v=4","gravatar_id":"","url":"https://api.github.com/users/ItsJepser","html_url":"https://github.com/ItsJepser","followers_url":"https://api.github.com/users/ItsJepser/followers","following_url":"https://api.github.com/users/ItsJepser/following{/other_user}","gists_url":"https://api.github.com/users/ItsJepser/gists{/gist_id}","starred_url":"https://api.github.com/users/ItsJepser/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ItsJepser/subscriptions","organizations_url":"https://api.github.com/users/ItsJepser/orgs","repos_url":"https://api.github.com/users/ItsJepser/repos","events_url":"https://api.github.com/users/ItsJepser/events{/privacy}","received_events_url":"https://api.github.com/users/ItsJepser/received_events","type":"User","site_admin":false},"created_at":"2018-12-06T09:58:45Z","updated_at":"2018-12-06T09:58:45Z","author_association":"NONE","body":"@se7en00 I see you closed this issue, is this fixed? If yes, how did you fix it?"}}
{"actor":{"display_login":"ItsJepser"}}