├── .eslintignore ├── .eslintrc ├── .gitignore ├── doc └── webpack.png ├── agent.js ├── lib ├── constant.js ├── development-koa-server.js └── development-koa-client.js ├── History.md ├── index.js ├── config └── config.default.js ├── package.json ├── app.js └── README.md /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .git/ -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "eslint-config-egg" 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | *.log 4 | .vscode 5 | *.iml -------------------------------------------------------------------------------- /doc/webpack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hubcarl/egg-vue-webpack-dev/HEAD/doc/webpack.png -------------------------------------------------------------------------------- /agent.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = agent => { 4 | require('./lib/development-koa-client')(agent); 5 | require('./lib/development-koa-server')(agent); 6 | }; 7 | 8 | -------------------------------------------------------------------------------- /lib/constant.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | module.exports = { 3 | EVENT_WEBPACK_BUILD_STATE: 'webpack_build_state', 4 | EVENT_WEBPACK_SERVER_BUILD_STATE: 'webpack_server_build_state', 5 | EVENT_WEBPACK_CLIENT_BUILD_STATE: 'webpack_client_build_state', 6 | EVENT_WEBPACK_READ_SERVER_FILE_MEMORY: 'webpack_read_server_file_memory', 7 | EVENT_WEBPACK_READ_SERVER_FILE_MEMORY_CONTENT: 'webpack_read_server_file_memory_content', 8 | EVENT_WEBPACK_READ_CLIENT_FILE_MEMORY: 'webpack_read_client_file_memory', 9 | EVENT_WEBPACK_READ_CLIENT_FILE_MEMORY_CONTENT: 'webpack_read_client_file_memory_content', 10 | }; 11 | -------------------------------------------------------------------------------- /History.md: -------------------------------------------------------------------------------- 1 | 2 | 0.0.5 / 2017-04-26 3 | ================== 4 | 5 | * fix:server render can't loader, temporary fix 6 | 7 | 0.0.4 / 2017-04-26 8 | ================== 9 | 10 | * refactor:change npm loader module to require 11 | * fix: webpack hot middleware client path 12 | 13 | 0.0.3 / 2017-04-24 14 | ================== 15 | 16 | * fix:server render not find node_modules 17 | * deps:update 18 | * fix:scss loader config 19 | * refactor:loader use upgrade 20 | * docs:readme 21 | * Release 0.0.2 22 | 23 | 0.0.2 / 2017-04-22 24 | ================== 25 | 26 | * fix:npm publish file not include 27 | * doc:package 28 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | exports.build = require('./build/lib/build'); 4 | exports.loader = require('./build/lib/loader'); 5 | exports.utils = require('./build/lib/utils'); 6 | exports.entry = require('./build/lib/entry'); 7 | exports.create = require('./build/lib/create'); 8 | exports.baseConfig = require('./build/webpack.base.conf'); 9 | exports.clientConfig = require('./build/webpack.client.conf'); 10 | exports.clientDevConfig = require('./build/webpack.client.dev.conf'); 11 | exports.clientTestConfig = require('./build/webpack.client.test.conf'); 12 | exports.clientProdConfig = require('./build/webpack.client.prod.conf'); 13 | exports.serverConfig = require('./build/webpack.server.conf'); 14 | exports.serverDevDevConfig = require('./build/webpack.server.dev.conf'); 15 | exports.serverTestTestConfig = require('./build/webpack.server.test.conf'); 16 | exports.serverProdConfig = require('./build/webpack.server.prod.conf'); 17 | -------------------------------------------------------------------------------- /config/config.default.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = () => { 4 | const exports = {}; 5 | 6 | exports.vuewebpackdev = { 7 | build: { 8 | port: 8888, // 开发时webpack 内部启动构建服务端口, 这个端与应用启动的端口是两回事. 9 | path: 'public', // webpack构编译到项目中的根目录, 10 | staticDir: 'static', // webpack构建静态资源目录,基于path根目录 11 | publicPath: '/public/', // 静态资源访问的路径前缀 12 | entryDir: 'app/web/page', // webpack构建etnry 的目录, 会递归遍历该目录所有文件, 生产entry入口文件 13 | // globalLayout: 'app/web/view/layout/layout.html', // 全局html模板 ,默认关闭 14 | // customLayout: 'layout.html', // 单个entry文件的html模板, 默认关闭 15 | // commonsChunk:['vendor'], // 生成公共库js/css的名字 16 | sourceMap: false, 17 | webpackClientDevConfig: 'build/webpack.client.dev.conf.js', 18 | webpackClientTestConfig: 'build/webpack.client.test.conf.js', 19 | webpackClientProdConfig: 'build/webpack.client.prod.conf.js', 20 | webpackServerDevConfig: 'build/webpack.server.dev.conf.js', 21 | webpackServerTestConfig: 'build/webpack.server.test.conf.js', 22 | webpackServerProdConfig: 'build/webpack.server.prod.conf.js', 23 | }, 24 | // webpack: { // loader options 25 | // loaderOption: { 26 | // sass: { 27 | // includePaths: [path.resolve(__dirname, '../app/web/asset/style')] 28 | // } 29 | // } 30 | // }, 31 | env: { 32 | dev: { 33 | uglifyJs: false, 34 | }, 35 | test: { 36 | uglifyJs: true, 37 | }, 38 | prod: { 39 | uglifyJs: true, 40 | }, 41 | }, 42 | }; 43 | 44 | return exports; 45 | }; 46 | -------------------------------------------------------------------------------- /lib/development-koa-server.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const webpack = require('webpack'); 4 | const koa = require('koa'); 5 | const cors = require('kcors'); 6 | const app = koa(); 7 | app.use(cors()); 8 | const Constant = require('./constant'); 9 | const Utils = require('../build/lib/utils'); 10 | 11 | module.exports = agent => { 12 | 13 | const projectDir = agent.baseDir; 14 | const config = agent.config.vuewebpackdev; 15 | 16 | const env = process.env.EGG_SERVER_ENV || 'dev'; 17 | const serverWebpackConfig = require(`../build/webpack.server.${env}.conf`)(projectDir, config); 18 | 19 | const compiler = webpack([ serverWebpackConfig ]); 20 | 21 | compiler.plugin('done', () => { 22 | agent.messenger.sendToApp(Constant.EVENT_WEBPACK_SERVER_BUILD_STATE, { state: true }); 23 | agent.webpack_server_build_success = true; 24 | }); 25 | 26 | const devMiddleware = require('koa-webpack-dev-middleware')(compiler, { 27 | publicPath: serverWebpackConfig.output.publicPath, 28 | stats: { 29 | colors: true, 30 | children: true, 31 | modules: false, 32 | chunks: false, 33 | chunkModules: false, 34 | }, 35 | watchOptions: { 36 | ignored: /node_modules/, 37 | }, 38 | }); 39 | 40 | app.use(devMiddleware); 41 | 42 | app.listen(config.build.port + 1, err => { 43 | if (!err) { 44 | agent.logger.info(`start webpack server build service: ${Utils.getHost(config, 2, true)}`); 45 | } 46 | }); 47 | 48 | agent.messenger.on(Constant.EVENT_WEBPACK_SERVER_BUILD_STATE, () => { 49 | agent.messenger.sendToApp(Constant.EVENT_WEBPACK_SERVER_BUILD_STATE, { state: agent.webpack_server_build_success }); 50 | }); 51 | 52 | agent.messenger.on(Constant.EVENT_WEBPACK_READ_SERVER_FILE_MEMORY, data => { 53 | const fileContent = Utils.readWebpackMemoryFile(compiler, data.filePath); 54 | if (fileContent) { 55 | agent.messenger.sendToApp(Constant.EVENT_WEBPACK_READ_SERVER_FILE_MEMORY_CONTENT, { 56 | fileContent, 57 | }); 58 | } else { 59 | agent.logger.error(`webpack server memory file[${data.filePath}] not exist!`); 60 | agent.messenger.sendToApp(Constant.EVENT_WEBPACK_READ_SERVER_FILE_MEMORY_CONTENT, { 61 | fileContent: '', 62 | }); 63 | } 64 | }); 65 | }; 66 | -------------------------------------------------------------------------------- /lib/development-koa-client.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const webpack = require('webpack'); 4 | const koa = require('koa'); 5 | const cors = require('kcors'); 6 | const app = koa(); 7 | app.use(cors()); 8 | const Constant = require('./constant'); 9 | const Utils = require('../build/lib/utils'); 10 | 11 | module.exports = agent => { 12 | 13 | const projectDir = agent.baseDir; 14 | const config = agent.config.vuewebpackdev; 15 | 16 | const env = process.env.EGG_SERVER_ENV || 'dev'; 17 | 18 | const webpackConfig = require(`../build/webpack.client.${env}.conf`)(projectDir, config); 19 | 20 | const compiler = webpack([ webpackConfig ]); 21 | 22 | compiler.plugin('done', compilation => { 23 | // Child extract-text-webpack-plugin: 24 | compilation.stats.forEach(stat => { 25 | stat.compilation.children = stat.compilation.children.filter(child => { 26 | return child.name !== 'extract-text-webpack-plugin'; 27 | }); 28 | }); 29 | Utils.saveManifest(compiler, projectDir); 30 | agent.messenger.sendToApp(Constant.EVENT_WEBPACK_SERVER_BUILD_STATE, { state: true }); 31 | agent.webpack_client_build_success = true; 32 | }); 33 | 34 | const devMiddleware = require('koa-webpack-dev-middleware')(compiler, { 35 | publicPath: webpackConfig.output.publicPath, 36 | stats: { 37 | colors: true, 38 | children: true, 39 | modules: false, 40 | chunks: false, 41 | chunkModules: false, 42 | }, 43 | watchOptions: { 44 | ignored: /node_modules/, 45 | }, 46 | }); 47 | 48 | const hotMiddleware = require('koa-webpack-hot-middleware')(compiler, { 49 | log: false, 50 | reload: true, 51 | }); 52 | 53 | app.use(devMiddleware); 54 | app.use(hotMiddleware); 55 | 56 | app.listen(config.build.port, err => { 57 | if (!err) { 58 | agent.logger.info(`start webpack client build service: ${Utils.getHost(config, 2)}`); 59 | } 60 | }); 61 | 62 | agent.messenger.on(Constant.EVENT_WEBPACK_CLIENT_BUILD_STATE, () => { 63 | agent.messenger.sendToApp(Constant.EVENT_WEBPACK_CLIENT_BUILD_STATE, { state: agent.webpack_client_build_success }); 64 | }); 65 | 66 | agent.messenger.on(Constant.EVENT_WEBPACK_READ_CLIENT_FILE_MEMORY, data => { 67 | const fileContent = Utils.readWebpackMemoryFile(compiler, data.filePath); 68 | if (fileContent) { 69 | agent.messenger.sendToApp(Constant.EVENT_WEBPACK_READ_CLIENT_FILE_MEMORY_CONTENT, { 70 | fileContent, 71 | }); 72 | } else { 73 | agent.logger.error(`webpack client memory file[${data.filePath}] not exist!`); 74 | agent.messenger.sendToApp(Constant.EVENT_WEBPACK_READ_CLIENT_FILE_MEMORY_CONTENT, { 75 | fileContent: '', 76 | }); 77 | } 78 | }); 79 | }; 80 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "egg-vue-webpack-dev", 3 | "version": "0.0.5", 4 | "description": "基于egg + vue2 + webpack2 的前后端集成开发编译构建插件", 5 | "main": "index.js", 6 | "eggPlugin": { 7 | "name": "vuewebpackdev", 8 | "env": [ 9 | "local" 10 | ] 11 | }, 12 | "scripts": { 13 | "fix": "npm run lint -- --fix", 14 | "test-local": "egg-bin test", 15 | "cov": "egg-bin cov", 16 | "lint": "eslint .", 17 | "ci": "npm run lint && npm run cov", 18 | "autod": "autod" 19 | }, 20 | "bin": {}, 21 | "keywords": [ 22 | "egg", 23 | "eggPlugin", 24 | "egg-plugin-webpack", 25 | "webpack", 26 | "webpack build", 27 | "vue", 28 | "vue server side render", 29 | "ssr" 30 | ], 31 | "dependencies": { 32 | "autoprefixer": "^6.7.7", 33 | "babel-core": "^6.20.0", 34 | "babel-eslint": "^7.1.1", 35 | "babel-loader": "^7.0.0", 36 | "babel-plugin-add-module-exports": "^0.2.1", 37 | "babel-plugin-transform-runtime": "^6.15.0", 38 | "babel-preset-es2015": "^6.16.0", 39 | "babel-preset-stage-2": "^6.17.0", 40 | "babel-runtime": "^6.9.2", 41 | "browserslist": "^1.4.0", 42 | "chalk": "^1.1.3", 43 | "css-loader": "^0.25.0", 44 | "eventsource-polyfill": "^0.9.6", 45 | "extract-text-webpack-plugin": "^2.0.0-rc.3", 46 | "file-loader": "^0.9.0", 47 | "fs": "0.0.2", 48 | "html-webpack-plugin": "^2.21.0", 49 | "http-proxy-middleware": "^0.17.2", 50 | "json-loader": "^0.5.4", 51 | "kcors": "^1.3.1", 52 | "koa": "^1.2.4", 53 | "koa-webpack-dev-middleware": "^1.2.2", 54 | "koa-webpack-hot-middleware": "^1.0.3", 55 | "less": "^2.7.1", 56 | "less-loader": "^4.0.3", 57 | "node-noop": "^1.0.0", 58 | "node-sass": "^4.5.2", 59 | "ora": "^0.3.0", 60 | "postcss-loader": "^0.13.0", 61 | "progress-bar-webpack-plugin": "^1.9.0", 62 | "sass-loader": "^6.0.3", 63 | "shelljs": "^0.7.4", 64 | "style-loader": "^0.16.1", 65 | "url-loader": "^0.5.8", 66 | "vue-html-loader": "^1.2.4", 67 | "vue-loader": "^11.3.4", 68 | "vue-style-loader": "^3.0.0", 69 | "vue-template-compiler": "^2.2.6", 70 | "webpack": "^2.4.1", 71 | "webpack-hot-middleware": "^2.13.2", 72 | "webpack-manifest-plugin": "^1.1.0", 73 | "webpack-merge": "^2.4.0" 74 | }, 75 | "devDependencies": { 76 | "eslint": "^3.17.1", 77 | "eslint-config-egg": "^3.2.0" 78 | }, 79 | "engines": { 80 | "node": ">=6.0.0" 81 | }, 82 | "files": [ 83 | "index.js", 84 | "app.js", 85 | "agent.js", 86 | "config", 87 | "app", 88 | "lib", 89 | "build" 90 | ], 91 | "ci": { 92 | "version": "6, 7" 93 | }, 94 | "repository": { 95 | "type": "git", 96 | "url": "git+https://github.com/hubcarl/egg-vue-webpack-dev.git" 97 | }, 98 | "author": "hubcarl@126.com", 99 | "license": "MIT", 100 | "homepage": "https://github.com/hubcarl/egg-vue-webpack-dev" 101 | } 102 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | const path = require('path'); 3 | const fs = require('fs'); 4 | const Constant = require('./lib/constant'); 5 | 6 | module.exports = app => { 7 | 8 | if (app.view) { 9 | app.view.resolve = function* (name) { 10 | return name; 11 | }; 12 | } 13 | if (app.vue) { 14 | app.vue.readFile = fileName => { 15 | const filePath = path.isAbsolute(fileName) ? fileName : path.join(app.config.view.root[0], fileName); 16 | if (/\.html$/.test(fileName)) { 17 | return new Promise(resolve => { 18 | app.messenger.sendToAgent(Constant.EVENT_WEBPACK_READ_CLIENT_FILE_MEMORY, { 19 | filePath, 20 | fileName, 21 | }); 22 | app.messenger.on(Constant.EVENT_WEBPACK_READ_CLIENT_FILE_MEMORY_CONTENT, data => { 23 | resolve(data.fileContent); 24 | }); 25 | }); 26 | } 27 | return new Promise(resolve => { 28 | app.messenger.sendToAgent(Constant.EVENT_WEBPACK_READ_SERVER_FILE_MEMORY, { 29 | filePath, 30 | fileName, 31 | }); 32 | app.messenger.on(Constant.EVENT_WEBPACK_READ_SERVER_FILE_MEMORY_CONTENT, data => { 33 | resolve(data.fileContent); 34 | }); 35 | }); 36 | }; 37 | } 38 | 39 | app.use(function* (next) { 40 | 41 | if (app.webpack_server_build_success && app.webpack_client_build_success) { 42 | yield* next; 43 | } else { 44 | const serverData = yield new Promise(resolve => { 45 | this.app.messenger.sendToAgent(Constant.EVENT_WEBPACK_SERVER_BUILD_STATE, { 46 | webpackBuildCheck: true, 47 | }); 48 | this.app.messenger.on(Constant.EVENT_WEBPACK_SERVER_BUILD_STATE, data => { 49 | resolve(data); 50 | }); 51 | }); 52 | app.webpack_server_build_success = serverData.state; 53 | 54 | const clientData = yield new Promise(resolve => { 55 | this.app.messenger.sendToAgent(Constant.EVENT_WEBPACK_CLIENT_BUILD_STATE, { 56 | webpackBuildCheck: true, 57 | }); 58 | this.app.messenger.on(Constant.EVENT_WEBPACK_CLIENT_BUILD_STATE, data => { 59 | resolve(data); 60 | }); 61 | }); 62 | 63 | app.webpack_client_build_success = clientData.state; 64 | 65 | if (!(app.webpack_server_build_success && app.webpack_client_build_success)) { 66 | if (app.webpack_loading_text) { 67 | this.body = app.webpack_loading_text; 68 | } else { 69 | const filePath = path.resolve(__dirname, './build/template/loading.html'); 70 | this.body = app.webpack_loading_text = fs.readFileSync(filePath, 'utf8'); 71 | } 72 | } else { 73 | yield* next; 74 | } 75 | } 76 | }); 77 | 78 | app.messenger.on(Constant.EVENT_WEBPACK_SERVER_BUILD_STATE, data => { 79 | app.webpack_server_build_success = data.state; 80 | }); 81 | 82 | app.messenger.on(Constant.EVENT_WEBPACK_CLIENT_BUILD_STATE, data => { 83 | app.webpack_client_build_success = data.state; 84 | }); 85 | }; 86 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # egg-vue-webpack-dev 2 | 3 | 基于egg + vue2 + webpack2 的前后端集成开发打包插件, 支持服务器端和客户端jsbundle构建. 项目使用时, 建议结合 `egg-view-vue和egg-view-vue-ssr` 插件一起使用. 4 | 5 | **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)** 6 | 7 | 8 | ## 特性 9 | 10 | - 支持vue单页面/多页面入口服务器端和客户端分别构建, 支持服务器渲染和前端客户端渲染两种模式. 11 | - 集成koa-webpack-dev-middleware和koa-webpack-hot-middleware中间件, 支持开发热更新和自动刷新, 开发时构建的目标文件存储到内存里面, 资源访问时直接从内存里面读取. 12 | - 内置本地开发, 测试环境, 正式环境默认配置, 可以基于默认配置进行扩展, 简化webpack配置的复杂性. 13 | - 插件已内置webpack基本配置, 可以自定义webpack配置覆盖已有配置. 14 | - 当结合`egg-view-vue-ssr` 插件一起使用, 本地开发时, 文件读取会改为从webpack编译的内存读取. 15 | - 通过require('egg-vue-webpack-dev')方式可以获取插件内部默认配置方便进行自定义实现打包插件. 16 | 17 | ## 安装 18 | 19 | ```bash 20 | npm i egg-vue-webpack-dev --save-dev 21 | ``` 22 | 23 | 24 | ## 插件配置 25 | 26 | 27 | #### 插件内置配置如下: 28 | 29 | ```javascript 30 | // egg-vue-webpack-dev/config/config.default.js 31 | exports.vuewebpackdev = { 32 | build: { 33 | port: 8888, // 开发时webpack 内部启动构建服务端口, 这个端与应用启动的端口是两回事. 34 | path: 'public', // webpack构建的文件生产到项目中的指定目录, 35 | staticDir: 'static', // webpack构建静态资源目录, 36 | publicPath: '/public/', // 静态资源访问的路径前缀 37 | entryDir: 'app/web/page', // webpack构建etnry 的目录, 会递归遍历该目录所有文件,生产entry入口文件(多页面) 38 | //globalLayout: 'app/web/view/layout/layout.html', // 全局html模板 ,默认关闭 39 | //customLayout: 'layout.html', // 单个entry文件的html模板, 默认关闭 40 | //commonsChunk:['vendor'], // 生成公共库js/css的名字 41 | //自定义配置与会与默认配置进行merge操作 42 | webpackClientDevConfig: 'build/webpack.client.dev.conf.js', // 自定义本地前端打包开发配置 43 | webpackClientTestConfig: 'build/webpack.client.test.conf.js', // 自定义前端打包测试环境开发配置 44 | webpackClientProdConfig: 'build/webpack.client.prod.conf.js', // 自定义前端打包正式环境开发配置 45 | webpackServerDevConfig: 'build/webpack.server.dev.conf.js', // 自定义服务器打包本地开发配置 46 | webpackServerTestConfig: 'build/webpack.server.test.conf.js', // 自定义服务器打包测试开发配置 47 | webpackServerProdConfig: 'build/webpack.server.prod.conf.js' // 自定义服务器打包测试开发配置 48 | }, 49 | // webpack: { // loader options 50 | // loaderOption: { 51 | // sass: { 52 | // includePaths: [path.join(app.baseDir, 'app/web/asset/style')] 53 | // } 54 | // } 55 | // }, 56 | env: { 57 | dev: { 58 | uglifyJs: false // 打包时, js是否压缩, 开发默认不压缩 59 | }, 60 | test: { 61 | uglifyJs: true // 打包时, 测试环境js是否压缩, 默认压缩 62 | }, 63 | prod: { 64 | uglifyJs: true // 打包时, 正式环境js是否压缩, 默认压缩 65 | } 66 | } 67 | }; 68 | ``` 69 | 70 | 71 | #### 插件运行自定义config配置如下: 72 | 73 | ```javascript 74 | // {app_root}/config/config.local.js 75 | exports.vuewebpackdev = { 76 | build: { 77 | // 生成公共库js/css的名字 78 | commonsChunk: ['vendor'], 79 | }, 80 | env: { 81 | dev: { 82 | uglifyJs: true, 83 | uglifyJsConfig: { 84 | compress: { 85 | drop_console: true, 86 | drop_debugger: true 87 | } 88 | } 89 | } 90 | } 91 | }; 92 | ``` 93 | 94 | 95 | 96 | ## 编译打包 97 | 98 | #### 1.在项目build目录下面加入build.js, 然后加入如下内容: 99 | 100 | ```javascript 101 | 102 | const path = require('path'); 103 | const projectRoot = path.resolve(__dirname, '..'); 104 | const localConfigPath = path.join(projectRoot, 'config/config.local.js'); 105 | const buildConfig = require(localConfigPath)({}).vuewebpackdev; 106 | const env = process.env.BUILD_ENV || 'prod'; 107 | const tool = require('egg-vue-webpack-dev'); 108 | tool.build(projectRoot, env, buildConfig); 109 | 110 | ``` 111 | 112 | #### 2.在package.json 文件加入如下配置: 113 | 114 | ```bash 115 | "scripts": { 116 | "build-dev": "node build/build.js -- dev", 117 | "build-test": "node build/build.js -- test", 118 | "build-prod": "node build/build.js -- prod" 119 | } 120 | ``` 121 | 122 | #### 3.编译结果说明 123 | 124 | - 服务器构建结果默认会编译到 `path.join(app.baseDir, 'app/view')` 125 | 126 | - 客户端构建结构默认会编译到 `path.join(vuewebpackdev.build.path, vuewebpackdev.build.static)` 127 | 128 | - manifest资源依赖构建到 `path.join(app.baseDir, 'config/manifest.json')` 129 | 130 | ```js 131 | { 132 | "/about/about.css": "/static/css/about/about.css", 133 | "/about/about.js": "/static/js/about/about.js", 134 | "/app/app.css": "/static/css/app/app.css", 135 | "/app/app.js": "/static/js/app/app.js", 136 | "/element/element.css": "/static/css/element/element.css", 137 | "/element/element.js": "/static/js/element/element.js", 138 | "/index/index.css": "/static/css/index/index.css", 139 | "/index/index.js": "/static/js/index/index.js", 140 | "/router/router.css": "/static/css/router/router.css", 141 | "/router/router.js": "/static/js/router/router.js", 142 | "/static/img/loading.gif": "/static/img/loading.0c81ad1.gif", 143 | "/test/test.css": "/static/css/test/test.css", 144 | "/test/test.js": "/static/js/test/test.js", 145 | "/vendor.css": "/static/css/vendor.css", 146 | "/vendor.js": "/static/js/vendor.js" 147 | } 148 | ``` 149 | 150 | - 编译信息构建到 `path.join(app.baseDir, 'config/buildConfig.json')` 151 | 152 | ```js 153 | 154 | { 155 | "publicPath": "/public/", // 资源访问前缀 156 | "commonsChunk": ["vendor"] // 生成公共库js/css的名字 157 | } 158 | 159 | ``` 160 | 161 | 162 | 默认资源访问路径: 163 | 164 | ```html 165 | 166 | 167 | 168 | 169 | 170 | ``` 171 | 172 | 173 | 可以在自定义 `${app_root}/build/webpack.client.prod.conf.js` 配置cdn前地址 174 | 175 | ```js 176 | const webpackConfig = { 177 | output: { 178 | publicPath: '//cdn/app/prod' 179 | } 180 | } 181 | ``` 182 | 183 | 最终资源访问路径: 184 | 185 | ```html 186 | 187 | 188 | 189 | 190 | 191 | 192 | ``` 193 | 194 | #### 4.进入项目根目录, 命令行运行对应环境的命令, 就能编译出对应的构建文件. 195 | 196 | - 开发模式 197 | 198 | ```bash 199 | npm run build-dev 200 | ``` 201 | 202 | - 测试环境 203 | 204 | ```bash 205 | npm run build-test 206 | ``` 207 | 208 | - 正式环境 209 | 210 | ```bash 211 | npm run build-prod 212 | ``` 213 | 214 | ## 本地开发 215 | 216 | - 在package.json 文件加入如下相应运行的快捷方式: 217 | 218 | ```bash 219 | "scripts": { 220 | "build-dev": "node build/build.js -- dev", 221 | "build-test": "node build/build.js -- test", 222 | "build-prod": "node build/build.js -- prod", 223 | "start": "node index.js", 224 | "start-test": "npm run build-test && NODE_ENV=prodcution BUILD_ENV=test node index.js", 225 | "start-prod": "npm run build-prod && NODE_ENV=prodcution BUILD_ENV=prod node index.js" 226 | } 227 | ``` 228 | 229 | - 运行npm start 进入egg项目启动和webpack构建流程 230 | 231 | ```bash 232 | npm start 233 | ``` 234 | 235 | - npm start运行和webpack构建效果如下 236 | 237 | 图片中有两个build的任务: build server bundle 和 build client bundle. 其中server bundle 是服务器渲染使用, client bundle 是客户端渲染使用. 238 | 239 | ![webpack运行](https://github.com/hubcarl/egg-vue-webpack-dev/blob/master/doc/webpack.png) 240 | 241 | 访问:http://127.0.0.1:7001 242 | 243 | ## 工程项目骨架 244 | 245 | [egg-vue-webpack-boilerplate](https://github.com/hubcarl/egg-vue-webpack-boilerplate) 246 | --------------------------------------------------------------------------------