{"id":17099942,"url":"https://github.com/kuangpf/webpack-demo","last_synced_at":"2026-04-09T02:30:54.892Z","repository":{"id":90983751,"uuid":"112557091","full_name":"KuangPF/webpack-demo","owner":"KuangPF","description":"webpack单页面应用，引入第三方类库","archived":false,"fork":false,"pushed_at":"2018-10-20T14:39:01.000Z","size":3344,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-29T00:47:05.682Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","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/KuangPF.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}},"created_at":"2017-11-30T02:59:25.000Z","updated_at":"2018-08-20T06:39:16.000Z","dependencies_parsed_at":"2024-02-09T15:30:53.167Z","dependency_job_id":"2f742ea0-5fed-4ef4-8b82-f2220a757b3b","html_url":"https://github.com/KuangPF/webpack-demo","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/KuangPF%2Fwebpack-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KuangPF%2Fwebpack-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KuangPF%2Fwebpack-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KuangPF%2Fwebpack-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KuangPF","download_url":"https://codeload.github.com/KuangPF/webpack-demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245147716,"owners_count":20568559,"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":[],"created_at":"2024-10-14T15:11:49.959Z","updated_at":"2025-12-30T22:41:32.279Z","avatar_url":"https://github.com/KuangPF.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack-demo\n该项目是一个简单的webpackDemo，使用常见的plugin以及loader,对一些常见的三方库进行了处理打包，使用插件将js,css,img,html单独打包，是一个单页面引用，适合刚开始接触的同学。\n#### Install with npm: \n    npm install\n#### start webpack-dev-server\n    npm run start:dev\n#### 打包\n    npm run build\n#### 效果\n![image](https://github.com/KuangPF/webpack-demo/blob/master/src/img/webpack-demo.gif)  \n### 目录结构\n```\nwebpack-demo\n    ├─dist\n    |   └─static\n    |   |    ├─css              //打包后的css\n    |   |    ├─img              //打包后的img\n    |   |    └─js               //打包后的js\n    |   └─index.html            //打包后页面index.html\n    ├─lib\n    |   └─js\n    |      └─flexible           //flexible库\n    ├─node_modules              //nmp install 模块\n    ├─src\n    |   ├─css                    //css\n    |   ├─img                    //img\n    |   |─js                     //js\n    |   └─index.html\n    ├─.balelrc                  //es6==\u003ees5\n    ├─.gitignore\n    ├─favicon\n    ├─package.json              //npm脚本  项目描述\n    ├─postcss.config.js         //postcss插件配置\n    ├─README.md\n    ├─webpack.config.js         //webbpack配置文件\n```\n---\n### webpack.config.js\n##### entry(入口)\n    entry: {\n        index: './src/js/index.js',\n        flexible:'./libs/js/flexbile/flexible.debug.js',\n        flexibleCss:'./libs/js/flexbile/flexible_css.debug.js',\n    },\n##### output(输出)\n    output: {\n        path: path.resolve(__dirname + '/dist'),\n        publicPath: '/dist/',\n        filename: 'static/js/[name].js'\n    },\n\n### loader\n利用了一些的常见的loader来处理代码，对于这些loader的配置可以查看对应loader Gitbub上的一些说明\n\n### plungins\n比较常见的plugin\n##### HTML Webpack Plugin\n     new webpackHtmlPlugin({\n            filename: 'index.html',  \n            template: __dirname + '/src/index.html',\n            inject: true,\n            chunks: ['flexible','flexibleCss','index'],         //需要将一些第三方库的js自动引入到html中\n            favicon: './favicon.ico',\n            minify: {                                           //html的压缩配置，详情参数可参考html-minifier\n                removeComments:true,\n                collapseWhitespace:true,\n            }\n        }),\n\n\n##### extract-text-webpack-plugin \n该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象\n\n    {\n                test: /\\.(css|scss)$/,\n                use: extractTextPlugin.extract({\n                    fallback: 'style-loader',\n                    use: [{\n                            loader: 'css-loader',\n                            options: {\n                                importLoaders: 1,\n                                minimize: currentTarget == 'build' ? true:''\n                            }\n                        },\n                        'sass-loader',\n                        'postcss-loader'\n                    ]\n                })\n            }\n     new extractTextPlugin({\n            filename: 'static/css/[name].css',          //将打包的css放在/dis/static/css 目录下\n            allChunks: true\n        }),","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuangpf%2Fwebpack-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkuangpf%2Fwebpack-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkuangpf%2Fwebpack-demo/lists"}