{"id":16492743,"url":"https://github.com/hubcarl/egg-vue-webpack-dev","last_synced_at":"2025-03-21T07:31:45.289Z","repository":{"id":47537200,"uuid":"89054461","full_name":"hubcarl/egg-vue-webpack-dev","owner":"hubcarl","description":"基于egg + vue2 + webpack2 的前后端集成开发编译构建插件","archived":false,"fork":false,"pushed_at":"2017-06-19T01:53:52.000Z","size":225,"stargazers_count":28,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-13T04:07:08.945Z","etag":null,"topics":["egg","egg-plugin","server-side-rendering","vue","webpack"],"latest_commit_sha":null,"homepage":null,"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/hubcarl.png","metadata":{"files":{"readme":"README.md","changelog":"History.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-22T08:09:12.000Z","updated_at":"2023-08-08T11:11:23.000Z","dependencies_parsed_at":"2022-07-23T10:46:28.197Z","dependency_job_id":null,"html_url":"https://github.com/hubcarl/egg-vue-webpack-dev","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hubcarl%2Fegg-vue-webpack-dev","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hubcarl%2Fegg-vue-webpack-dev/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hubcarl%2Fegg-vue-webpack-dev/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hubcarl%2Fegg-vue-webpack-dev/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hubcarl","download_url":"https://codeload.github.com/hubcarl/egg-vue-webpack-dev/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243938730,"owners_count":20371916,"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":["egg","egg-plugin","server-side-rendering","vue","webpack"],"created_at":"2024-10-11T14:07:05.560Z","updated_at":"2025-03-21T07:31:45.008Z","avatar_url":"https://github.com/hubcarl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# egg-vue-webpack-dev\n\n基于egg + vue2 + webpack2 的前后端集成开发打包插件, 支持服务器端和客户端jsbundle构建. 项目使用时, 建议结合 `egg-view-vue和egg-view-vue-ssr` 插件一起使用.\n\n**NOTE: egg-vue-webpack-dev 插件已经分离为easywebpack, easywebpack-vue, egg-webpack, egg-webpack-vue 插件, 保证功能单一, 可以扩展更多基于webpack的打包方案, 比如vue, react, weex. 新版解决方案见[egg-vue-webpack-boilerplate](https://github.com/hubcarl/egg-vue-webpack-boilerplate)**\n\n\n## 特性\n\n- 支持vue单页面/多页面入口服务器端和客户端分别构建, 支持服务器渲染和前端客户端渲染两种模式.\n- 集成koa-webpack-dev-middleware和koa-webpack-hot-middleware中间件, 支持开发热更新和自动刷新, 开发时构建的目标文件存储到内存里面, 资源访问时直接从内存里面读取.\n- 内置本地开发, 测试环境, 正式环境默认配置, 可以基于默认配置进行扩展, 简化webpack配置的复杂性.\n- 插件已内置webpack基本配置, 可以自定义webpack配置覆盖已有配置.\n- 当结合`egg-view-vue-ssr` 插件一起使用, 本地开发时, 文件读取会改为从webpack编译的内存读取.\n- 通过require('egg-vue-webpack-dev')方式可以获取插件内部默认配置方便进行自定义实现打包插件.\n\n## 安装\n\n```bash\nnpm i egg-vue-webpack-dev --save-dev\n```\n\n\n## 插件配置\n\n\n#### 插件内置配置如下:\n\n```javascript\n// egg-vue-webpack-dev/config/config.default.js\nexports.vuewebpackdev = {\n  build: {\n    port: 8888, // 开发时webpack 内部启动构建服务端口, 这个端与应用启动的端口是两回事.\n    path: 'public', // webpack构建的文件生产到项目中的指定目录,\n    staticDir: 'static', // webpack构建静态资源目录,\n    publicPath: '/public/', // 静态资源访问的路径前缀\n    entryDir: 'app/web/page', // webpack构建etnry 的目录, 会递归遍历该目录所有文件,生产entry入口文件(多页面)\n    //globalLayout: 'app/web/view/layout/layout.html', // 全局html模板 ,默认关闭\n    //customLayout: 'layout.html', // 单个entry文件的html模板, 默认关闭\n    //commonsChunk:['vendor'],  // 生成公共库js/css的名字\n    //自定义配置与会与默认配置进行merge操作\n    webpackClientDevConfig: 'build/webpack.client.dev.conf.js',  // 自定义本地前端打包开发配置\n    webpackClientTestConfig: 'build/webpack.client.test.conf.js', // 自定义前端打包测试环境开发配置\n    webpackClientProdConfig: 'build/webpack.client.prod.conf.js', // 自定义前端打包正式环境开发配置\n    webpackServerDevConfig: 'build/webpack.server.dev.conf.js',   // 自定义服务器打包本地开发配置\n    webpackServerTestConfig: 'build/webpack.server.test.conf.js', // 自定义服务器打包测试开发配置\n    webpackServerProdConfig: 'build/webpack.server.prod.conf.js'  // 自定义服务器打包测试开发配置\n  },\n  // webpack: { // loader options\n  //  loaderOption: {\n  //    sass: {\n  //      includePaths: [path.join(app.baseDir, 'app/web/asset/style')]\n  //    }\n  //  }\n  // },\n  env: {\n    dev: {\n      uglifyJs: false  // 打包时, js是否压缩, 开发默认不压缩\n    },\n    test: {\n      uglifyJs: true  // 打包时, 测试环境js是否压缩, 默认压缩\n    },\n    prod: {\n      uglifyJs: true // 打包时, 正式环境js是否压缩, 默认压缩\n    }\n  }\n};\n```\n\n\n#### 插件运行自定义config配置如下:\n\n```javascript\n// {app_root}/config/config.local.js\nexports.vuewebpackdev = {\n\t\tbuild: {\n\t\t  // 生成公共库js/css的名字\n\t\t\tcommonsChunk: ['vendor'],\n\t\t},\n\t\tenv: {\n\t\t\tdev: {\n\t\t\t\tuglifyJs: true,\n\t\t\t\tuglifyJsConfig: {\n\t\t\t\t\tcompress: {\n\t\t\t\t\t\tdrop_console: true,\n\t\t\t\t\t\tdrop_debugger: true\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n};\n```\n\n\n\n## 编译打包\n\n#### 1.在项目build目录下面加入build.js, 然后加入如下内容:\n\n```javascript\n\nconst path = require('path');\nconst projectRoot = path.resolve(__dirname, '..');\nconst localConfigPath = path.join(projectRoot, 'config/config.local.js');\nconst buildConfig = require(localConfigPath)({}).vuewebpackdev;\nconst env = process.env.BUILD_ENV || 'prod';\nconst tool = require('egg-vue-webpack-dev');\ntool.build(projectRoot, env, buildConfig);\n\n```\n\n#### 2.在package.json 文件加入如下配置:\n\n```bash\n\"scripts\": {\n  \"build-dev\": \"node build/build.js -- dev\",\n  \"build-test\": \"node build/build.js -- test\",\n  \"build-prod\": \"node build/build.js -- prod\"\n}\n```\n\n#### 3.编译结果说明\n\n- 服务器构建结果默认会编译到 `path.join(app.baseDir, 'app/view')`\n\n- 客户端构建结构默认会编译到 `path.join(vuewebpackdev.build.path, vuewebpackdev.build.static)`\n\n- manifest资源依赖构建到 `path.join(app.baseDir, 'config/manifest.json')`\n\n```js\n{\n  \"/about/about.css\": \"/static/css/about/about.css\",\n  \"/about/about.js\": \"/static/js/about/about.js\",\n  \"/app/app.css\": \"/static/css/app/app.css\",\n  \"/app/app.js\": \"/static/js/app/app.js\",\n  \"/element/element.css\": \"/static/css/element/element.css\",\n  \"/element/element.js\": \"/static/js/element/element.js\",\n  \"/index/index.css\": \"/static/css/index/index.css\",\n  \"/index/index.js\": \"/static/js/index/index.js\",\n  \"/router/router.css\": \"/static/css/router/router.css\",\n  \"/router/router.js\": \"/static/js/router/router.js\",\n  \"/static/img/loading.gif\": \"/static/img/loading.0c81ad1.gif\",\n  \"/test/test.css\": \"/static/css/test/test.css\",\n  \"/test/test.js\": \"/static/js/test/test.js\",\n  \"/vendor.css\": \"/static/css/vendor.css\",\n  \"/vendor.js\": \"/static/js/vendor.js\"\n}\n```\n\n- 编译信息构建到 `path.join(app.baseDir, 'config/buildConfig.json')`\n\n```js\n\n{\n  \"publicPath\":  \"/public/\", // 资源访问前缀\n  \"commonsChunk\": [\"vendor\"] // 生成公共库js/css的名字\n}\n\n```\n\n\n默认资源访问路径:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"/public/static/css/vendor.3467a89.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"/public/static/css/home/home.7aa5d4b.css\"\u003e\n\n\u003cscript type=\"text/javascript\" src=\"/public/static/js/vendor.46747b9.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"/public/static/js/home.63a84eb.js\"\u003e\u003c/script\u003e\n```\n\n\n可以在自定义 `${app_root}/build/webpack.client.prod.conf.js` 配置cdn前地址\n\n```js\nconst webpackConfig = {\n  output: {\n    publicPath: '//cdn/app/prod'\n  }\n}\n```\n\n最终资源访问路径:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"//cdn/app/prod/public/static/css/vendor.3467a89.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"//cdn/app/prod/public/static/css/home/home.7aa5d4b.css\"\u003e\n\n\u003cscript type=\"text/javascript\" src=\"//cdn/app/prod/public/static/js/vendor.46747b9.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"//cdn/app/prod/public/static/js/home.63a84eb.js\"\u003e\u003c/script\u003e\n\n```\n\n#### 4.进入项目根目录, 命令行运行对应环境的命令, 就能编译出对应的构建文件.\n\n- 开发模式\n\n```bash\nnpm run build-dev\n```\n\n- 测试环境\n\n```bash\nnpm run build-test\n```\n\n- 正式环境\n\n```bash\nnpm run build-prod\n```\n\n## 本地开发\n\n- 在package.json 文件加入如下相应运行的快捷方式:\n\n```bash\n\"scripts\": {\n  \"build-dev\": \"node build/build.js -- dev\",\n  \"build-test\": \"node build/build.js -- test\",\n  \"build-prod\": \"node build/build.js -- prod\",\n  \"start\": \"node index.js\",\n  \"start-test\": \"npm run build-test \u0026\u0026 NODE_ENV=prodcution BUILD_ENV=test node index.js\",\n  \"start-prod\": \"npm run build-prod \u0026\u0026 NODE_ENV=prodcution BUILD_ENV=prod node index.js\"\n}\n```\n\n- 运行npm start 进入egg项目启动和webpack构建流程\n\n```bash\nnpm start\n```\n\n- npm start运行和webpack构建效果如下\n\n图片中有两个build的任务: build server bundle 和 build client bundle.  其中server bundle 是服务器渲染使用,  client bundle 是客户端渲染使用.\n\n![webpack运行](https://github.com/hubcarl/egg-vue-webpack-dev/blob/master/doc/webpack.png)\n\n访问:http://127.0.0.1:7001\n\n## 工程项目骨架\n\n[egg-vue-webpack-boilerplate](https://github.com/hubcarl/egg-vue-webpack-boilerplate)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhubcarl%2Fegg-vue-webpack-dev","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhubcarl%2Fegg-vue-webpack-dev","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhubcarl%2Fegg-vue-webpack-dev/lists"}