{"id":21315431,"url":"https://github.com/bingxuelover/webpack-auto-refresh","last_synced_at":"2025-03-15T21:26:15.244Z","repository":{"id":126605099,"uuid":"117801566","full_name":"bingxuelover/webpack-auto-refresh","owner":"bingxuelover","description":"webpack auto","archived":false,"fork":false,"pushed_at":"2018-09-26T02:08:49.000Z","size":218,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-22T10:30:50.298Z","etag":null,"topics":["babel-loader","extract-text-webpack-plugin","html-webpack-plugin","sass-loader","url-loader","webpack"],"latest_commit_sha":null,"homepage":"http://www.huangyuhong.com/2018/09/webpack-%E4%BB%A3%E7%A0%81%E5%88%86%E7%A6%BB/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bingxuelover.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-17T07:35:01.000Z","updated_at":"2018-09-26T02:12:02.000Z","dependencies_parsed_at":"2023-06-17T10:15:51.463Z","dependency_job_id":null,"html_url":"https://github.com/bingxuelover/webpack-auto-refresh","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bingxuelover%2Fwebpack-auto-refresh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bingxuelover%2Fwebpack-auto-refresh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bingxuelover%2Fwebpack-auto-refresh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bingxuelover%2Fwebpack-auto-refresh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bingxuelover","download_url":"https://codeload.github.com/bingxuelover/webpack-auto-refresh/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243791601,"owners_count":20348480,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel-loader","extract-text-webpack-plugin","html-webpack-plugin","sass-loader","url-loader","webpack"],"created_at":"2024-11-21T18:19:53.107Z","updated_at":"2025-03-15T21:26:15.238Z","avatar_url":"https://github.com/bingxuelover.png","language":"JavaScript","readme":"webpack\n\n# 内容\n\n- webpack.config.js中是本地配置文件，支持多入口文件的打包，支持Es6、css、less、sass\n\n# 启动\n\n## npm start\n\n- 使用 webpack-dev-server 启动项目，项目打包到build文件夹中，修改后会实时刷新页面内容。\n- 使用的是 webpack.config.js\n- css 在页面头部的 style 中显示\n\n## npm test\n\n- 使用 webpack-dev-server 启动项目，修改后会实时刷新页面内容。\n- 使用的是webpack.dev.config.js\n- css 会生成单独的 css 文件\n\n## npm run build\n\n- 一次性执行打包到 public 文件夹中，生成home.html入口文件;\n- 使用的是 webpack.production.config.js\n- 生成 public 文件夹\n\n## npm run watch\n\n- 监视文件修改，进行打包，但不会自动刷新页面；想实现自动刷新，请使用npm start\n- 生成 build 文件夹\n\n## npm run dev\n\n- 开发模式启动服务，webpack-dev-server进行了一些配置\n- --devtool eval 为你的代码创建源地址，当有任何报错的时候可以让你更加精确地定位到文件和行号\n- --progress 运行进度输出到控制台\n- --colors 命令行中显示颜色\n- --hot 热更新\n- --compress gzip压缩\n- --contentBase 启动时加载的目录\n- --port 启动端口\n- 使用的 webpack.config.js\n\n# 知识点\n\n## scss支持\n\n- 需要 style-loader、css-loader、sass-loader、node-sass\n\n## extract-text-webpack-plugin\n\n- 将css文件单独打包成.css文件\n- 可以生成多个\n\n## html-webpack-plugin\n\n- 生成一个index.html页面，其中自动引入打包好的js和css文件；\n- title: html的title.\n- filename: 输出的html页面的路径和名称，默认为index.html.\n\n## url-loader\n\n- 加载 css 和 js 中使用的图片\n- 大的图片会以 base64 形式加载\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbingxuelover%2Fwebpack-auto-refresh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbingxuelover%2Fwebpack-auto-refresh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbingxuelover%2Fwebpack-auto-refresh/lists"}