; rel="fragment-script"`
21 | })
22 | return res.end('')
23 | }
24 | })
25 |
26 | server.listen(PORT, () => {
27 | console.log(`fragment server ${NAME} started at ${PORT}`)
28 | })
29 |
--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Tailor + VueJS Example Application
5 |
6 |
7 |
8 |
9 |
10 |
13 |
14 |
15 |
16 |
17 |
18 | Dashboard failed to load
19 |
20 |
21 |
22 |
23 |
24 |
25 | Twitter feed failed to load
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/tailor.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 |
3 | const fs = require('fs')
4 | const http = require('http')
5 | const Tailor = require('node-tailor')
6 | const tailor = new Tailor({
7 | templatesPath: __dirname + '/templates'
8 | })
9 |
10 | const PORT = 8089
11 |
12 | http
13 | .createServer((req, res) => {
14 | if (req.url === '/favicon.ico') {
15 | res.writeHead(200, { 'Content-Type': 'image/x-icon' })
16 | return res.end('')
17 | }
18 |
19 | if (req.url === '/commons/style.css') {
20 | fs.readFile(__dirname + '/commons/style.css', (err, data) => {
21 | if (err) console.log(err)
22 | res.writeHead(200, { 'Content-Type': 'text/css' })
23 | res.write(data)
24 | res.end('')
25 | })
26 |
27 | } else {
28 |
29 | req.headers['x-request-uri'] = req.url
30 | req.url = '/index'
31 |
32 | tailor.requestHandler(req, res)
33 | }
34 | })
35 | .listen(PORT, function() {
36 | console.log(`Tailor server listening on port ${8089}`)
37 | })
38 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tailor-vue-demo",
3 | "version": "0.1.0",
4 | "description": "mosaic-tailor-vuejs-example",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "npm run start-fragments & node tailor.js",
8 | "install-fragment-dependencies": "lerna bootstrap",
9 | "build-fragments": "lerna run build",
10 | "start-fragments": "lerna run --parallel start",
11 | "watch-fragments": "lerna run --parallel dev"
12 | },
13 | "repository": {
14 | "type": "git",
15 | "url": "git+https://github.com/shershen08/tailor-vue-demo.git"
16 | },
17 | "author": "",
18 | "license": "ISC",
19 | "bugs": {
20 | "url": "https://github.com/shershen08/tailor-vue-demo/issues"
21 | },
22 | "homepage": "https://github.com/shershen08/tailor-vue-demo#readme",
23 | "devDependencies": {
24 | "babel-eslint": "^8.0.2",
25 | "eslint": "^4.11.0",
26 | "eslint-import-resolver-webpack": "^0.8.3",
27 | "eslint-plugin-import": "^2.8.0",
28 | "eslint-plugin-react": "^7.5.1",
29 | "lerna": "^2.5.1",
30 | "node-tailor": "^3.4.0",
31 | "webpack": "^3.8.1"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/fragments/header/build/build.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | require('./check-versions')()
3 |
4 | process.env.NODE_ENV = 'production'
5 |
6 | const ora = require('ora')
7 | const rm = require('rimraf')
8 | const path = require('path')
9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 |
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 |
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 | if (err) throw err
19 | webpack(webpackConfig, (err, stats) => {
20 | spinner.stop()
21 | if (err) throw err
22 | process.stdout.write(stats.toString({
23 | colors: true,
24 | modules: false,
25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
26 | chunks: false,
27 | chunkModules: false
28 | }) + '\n\n')
29 |
30 | if (stats.hasErrors()) {
31 | console.log(chalk.red(' Build failed with errors.\n'))
32 | process.exit(1)
33 | }
34 |
35 | console.log(chalk.cyan(' Build complete.\n'))
36 | console.log(chalk.yellow(
37 | ' Tip: built files are meant to be served over an HTTP server.\n' +
38 | ' Opening index.html over file:// won\'t work.\n'
39 | ))
40 | })
41 | })
42 |
--------------------------------------------------------------------------------
/fragments/dashboard/build/build.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | require('./check-versions')()
3 |
4 | process.env.NODE_ENV = 'production'
5 |
6 | const ora = require('ora')
7 | const rm = require('rimraf')
8 | const path = require('path')
9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 |
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 |
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 | if (err) throw err
19 |
20 | webpack(webpackConfig, (err, stats) => {
21 | spinner.stop()
22 | if (err) throw err
23 | process.stdout.write(stats.toString({
24 | colors: true,
25 | modules: false,
26 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
27 | chunks: false,
28 | chunkModules: false
29 | }) + '\n\n')
30 |
31 | if (stats.hasErrors()) {
32 | console.log(chalk.red(' Build failed with errors.\n'))
33 | process.exit(1)
34 | }
35 |
36 | console.log(chalk.cyan(' Build complete.\n'))
37 | console.log(chalk.yellow(
38 | ' Tip: built files are meant to be served over an HTTP server.\n' +
39 | ' Opening index.html over file:// won\'t work.\n'
40 | ))
41 | })
42 | })
43 |
--------------------------------------------------------------------------------
/fragments/header/build/check-versions.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const chalk = require('chalk')
3 | const semver = require('semver')
4 | const packageConfig = require('../package.json')
5 | const shell = require('shelljs')
6 |
7 | function exec (cmd) {
8 | return require('child_process').execSync(cmd).toString().trim()
9 | }
10 |
11 | const versionRequirements = [
12 | {
13 | name: 'node',
14 | currentVersion: semver.clean(process.version),
15 | versionRequirement: packageConfig.engines.node
16 | }
17 | ]
18 |
19 | if (shell.which('npm')) {
20 | versionRequirements.push({
21 | name: 'npm',
22 | currentVersion: exec('npm --version'),
23 | versionRequirement: packageConfig.engines.npm
24 | })
25 | }
26 |
27 | module.exports = function () {
28 | const warnings = []
29 |
30 | for (let i = 0; i < versionRequirements.length; i++) {
31 | const mod = versionRequirements[i]
32 |
33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34 | warnings.push(mod.name + ': ' +
35 | chalk.red(mod.currentVersion) + ' should be ' +
36 | chalk.green(mod.versionRequirement)
37 | )
38 | }
39 | }
40 |
41 | if (warnings.length) {
42 | console.log('')
43 | console.log(chalk.yellow('To use this template, you must update following to modules:'))
44 | console.log()
45 |
46 | for (let i = 0; i < warnings.length; i++) {
47 | const warning = warnings[i]
48 | console.log(' ' + warning)
49 | }
50 |
51 | console.log()
52 | process.exit(1)
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/fragments/dashboard/build/check-versions.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const chalk = require('chalk')
3 | const semver = require('semver')
4 | const packageConfig = require('../package.json')
5 | const shell = require('shelljs')
6 |
7 | function exec (cmd) {
8 | return require('child_process').execSync(cmd).toString().trim()
9 | }
10 |
11 | const versionRequirements = [
12 | {
13 | name: 'node',
14 | currentVersion: semver.clean(process.version),
15 | versionRequirement: packageConfig.engines.node
16 | }
17 | ]
18 |
19 | if (shell.which('npm')) {
20 | versionRequirements.push({
21 | name: 'npm',
22 | currentVersion: exec('npm --version'),
23 | versionRequirement: packageConfig.engines.npm
24 | })
25 | }
26 |
27 | module.exports = function () {
28 | const warnings = []
29 |
30 | for (let i = 0; i < versionRequirements.length; i++) {
31 | const mod = versionRequirements[i]
32 |
33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34 | warnings.push(mod.name + ': ' +
35 | chalk.red(mod.currentVersion) + ' should be ' +
36 | chalk.green(mod.versionRequirement)
37 | )
38 | }
39 | }
40 |
41 | if (warnings.length) {
42 | console.log('')
43 | console.log(chalk.yellow('To use this template, you must update following to modules:'))
44 | console.log()
45 |
46 | for (let i = 0; i < warnings.length; i++) {
47 | const warning = warnings[i]
48 | console.log(' ' + warning)
49 | }
50 |
51 | console.log()
52 | process.exit(1)
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/fragments/header/src/components/Header.vue:
--------------------------------------------------------------------------------
1 |
2 |
48 |
49 |
50 |
60 |
61 |
62 |
78 |
--------------------------------------------------------------------------------
/fragments/header/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "header",
3 | "version": "1.0.0",
4 | "description": "A Vue.js project",
5 | "author": "Mikhail Kuznetcov ",
6 | "private": true,
7 | "scripts": {
8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
9 | "start": "node fragment.js",
10 | "build": "node build/build.js"
11 | },
12 | "dependencies": {
13 | "v-autocomplete": "^1.8.2",
14 | "vue": "^2.5.2"
15 | },
16 | "devDependencies": {
17 | "autoprefixer": "^7.1.2",
18 | "babel-core": "^6.22.1",
19 | "babel-helper-vue-jsx-merge-props": "^2.0.3",
20 | "babel-loader": "^7.1.1",
21 | "babel-plugin-syntax-jsx": "^6.18.0",
22 | "babel-plugin-transform-runtime": "^6.22.0",
23 | "babel-plugin-transform-vue-jsx": "^3.5.0",
24 | "babel-preset-env": "^1.3.2",
25 | "babel-preset-stage-2": "^6.22.0",
26 | "chalk": "^2.0.1",
27 | "copy-webpack-plugin": "^4.0.1",
28 | "css-loader": "^0.28.0",
29 | "extract-text-webpack-plugin": "^3.0.0",
30 | "file-loader": "^1.1.4",
31 | "friendly-errors-webpack-plugin": "^1.6.1",
32 | "html-webpack-plugin": "^2.30.1",
33 | "node-notifier": "^5.1.2",
34 | "optimize-css-assets-webpack-plugin": "^3.2.0",
35 | "ora": "^1.2.0",
36 | "portfinder": "^1.0.13",
37 | "postcss-import": "^11.0.0",
38 | "postcss-loader": "^2.0.8",
39 | "postcss-url": "^7.2.1",
40 | "rimraf": "^2.6.0",
41 | "semver": "^5.3.0",
42 | "shelljs": "^0.7.6",
43 | "uglifyjs-webpack-plugin": "^1.1.1",
44 | "url-loader": "^0.5.8",
45 | "vue-loader": "^13.3.0",
46 | "vue-style-loader": "^3.0.1",
47 | "vue-template-compiler": "^2.5.2",
48 | "webpack": "^3.6.0",
49 | "webpack-bundle-analyzer": "^2.9.0",
50 | "webpack-dev-server": "^2.9.1",
51 | "webpack-merge": "^4.1.0"
52 | },
53 | "engines": {
54 | "node": ">= 6.0.0",
55 | "npm": ">= 3.0.0"
56 | },
57 | "browserslist": [
58 | "> 1%",
59 | "last 2 versions",
60 | "not ie <= 8"
61 | ]
62 | }
63 |
--------------------------------------------------------------------------------
/fragments/header/config/index.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | // Template version: 1.3.1
3 | // see http://vuejs-templates.github.io/webpack for documentation.
4 |
5 | const path = require('path')
6 |
7 | module.exports = {
8 | dev: {
9 |
10 | // Paths
11 | assetsSubDirectory: 'static',
12 | assetsPublicPath: '/',
13 | proxyTable: {},
14 |
15 | // Various Dev Server settings
16 | host: 'localhost', // can be overwritten by process.env.HOST
17 | port: 8091, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 | autoOpenBrowser: false,
19 | errorOverlay: true,
20 | notifyOnErrors: true,
21 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 |
23 |
24 | /**
25 | * Source Maps
26 | */
27 |
28 | // https://webpack.js.org/configuration/devtool/#development
29 | devtool: 'cheap-module-eval-source-map',
30 |
31 | // If you have problems debugging vue-files in devtools,
32 | // set this to false - it *may* help
33 | // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 | cacheBusting: true,
35 |
36 | cssSourceMap: true
37 | },
38 |
39 | build: {
40 | // Template for index.html
41 | index: path.resolve(__dirname, '../public/index.html'),
42 |
43 | // Paths
44 | assetsRoot: path.resolve(__dirname, '../public'),
45 | assetsSubDirectory: 'static',
46 | assetsPublicPath: '/',
47 |
48 | /**
49 | * Source Maps
50 | */
51 |
52 | productionSourceMap: true,
53 | // https://webpack.js.org/configuration/devtool/#production
54 | devtool: '#source-map',
55 |
56 | // Gzip off by default as many popular static hosts such as
57 | // Surge or Netlify already gzip all static assets for you.
58 | // Before setting to `true`, make sure to:
59 | // npm install --save-dev compression-webpack-plugin
60 | productionGzip: false,
61 | productionGzipExtensions: ['js', 'css'],
62 |
63 | // Run the build command with an extra argument to
64 | // View the bundle analyzer report after build finishes:
65 | // `npm run build --report`
66 | // Set to `true` or `false` to always turn it on or off
67 | bundleAnalyzerReport: process.env.npm_config_report
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/fragments/header/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const utils = require('./utils')
4 | const config = require('../config')
5 | const vueLoaderConfig = require('./vue-loader.conf')
6 |
7 | function resolve (dir) {
8 | return path.join(__dirname, '..', dir)
9 | }
10 |
11 |
12 |
13 | module.exports = {
14 | context: path.resolve(__dirname, '../'),
15 | entry: {
16 | app: './src/main.js'
17 | },
18 | output: {
19 | path: config.build.assetsRoot,
20 | filename: '[name].js',
21 | publicPath: process.env.NODE_ENV === 'production'
22 | ? config.build.assetsPublicPath
23 | : config.dev.assetsPublicPath
24 | },
25 | resolve: {
26 | extensions: ['.js', '.vue', '.json'],
27 | alias: {
28 | 'vue$': 'vue/dist/vue.esm.js',
29 | '@': resolve('src'),
30 | }
31 | },
32 | module: {
33 | rules: [
34 | {
35 | test: /\.vue$/,
36 | loader: 'vue-loader',
37 | options: vueLoaderConfig
38 | },
39 | {
40 | test: /\.js$/,
41 | loader: 'babel-loader',
42 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
43 | },
44 | {
45 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
46 | loader: 'url-loader',
47 | options: {
48 | limit: 10000,
49 | name: utils.assetsPath('img/[name].[hash:7].[ext]')
50 | }
51 | },
52 | {
53 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
54 | loader: 'url-loader',
55 | options: {
56 | limit: 10000,
57 | name: utils.assetsPath('media/[name].[hash:7].[ext]')
58 | }
59 | },
60 | {
61 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
62 | loader: 'url-loader',
63 | options: {
64 | limit: 10000,
65 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
66 | }
67 | }
68 | ]
69 | },
70 | node: {
71 | // prevent webpack from injecting useless setImmediate polyfill because Vue
72 | // source contains it (although only uses it if it's native).
73 | setImmediate: false,
74 | // prevent webpack from injecting mocks to Node native modules
75 | // that does not make sense for the client
76 | dgram: 'empty',
77 | fs: 'empty',
78 | net: 'empty',
79 | tls: 'empty',
80 | child_process: 'empty'
81 | }
82 | }
83 |
--------------------------------------------------------------------------------
/fragments/dashboard/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dashboard",
3 | "version": "1.0.0",
4 | "description": "A Vue.js project",
5 | "author": "shershen08 ",
6 | "private": true,
7 | "scripts": {
8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
9 | "start": "node fragment.js",
10 | "lint": "eslint --ext .js,.vue src",
11 | "build": "node build/build.js"
12 | },
13 | "dependencies": {
14 | "vue": "^2.5.2",
15 | "vue-router": "^3.0.1"
16 | },
17 | "devDependencies": {
18 | "autoprefixer": "^7.1.2",
19 | "babel-core": "^6.22.1",
20 | "babel-eslint": "^8.2.1",
21 | "babel-helper-vue-jsx-merge-props": "^2.0.3",
22 | "babel-loader": "^7.1.1",
23 | "babel-plugin-syntax-jsx": "^6.18.0",
24 | "babel-plugin-transform-runtime": "^6.22.0",
25 | "babel-plugin-transform-vue-jsx": "^3.5.0",
26 | "babel-preset-env": "^1.3.2",
27 | "babel-preset-stage-2": "^6.22.0",
28 | "chalk": "^2.0.1",
29 | "copy-webpack-plugin": "^4.0.1",
30 | "css-loader": "^0.28.0",
31 | "eslint": "^4.15.0",
32 | "eslint-config-standard": "^10.2.1",
33 | "eslint-friendly-formatter": "^3.0.0",
34 | "eslint-loader": "^1.7.1",
35 | "eslint-plugin-import": "^2.7.0",
36 | "eslint-plugin-node": "^5.2.0",
37 | "eslint-plugin-promise": "^3.4.0",
38 | "eslint-plugin-standard": "^3.0.1",
39 | "eslint-plugin-vue": "^4.0.0",
40 | "extract-text-webpack-plugin": "^3.0.0",
41 | "file-loader": "^1.1.4",
42 | "friendly-errors-webpack-plugin": "^1.6.1",
43 | "html-webpack-plugin": "^2.30.1",
44 | "node-notifier": "^5.1.2",
45 | "optimize-css-assets-webpack-plugin": "^3.2.0",
46 | "ora": "^1.2.0",
47 | "portfinder": "^1.0.13",
48 | "postcss-import": "^11.0.0",
49 | "postcss-loader": "^2.0.8",
50 | "postcss-url": "^7.2.1",
51 | "rimraf": "^2.6.0",
52 | "semver": "^5.3.0",
53 | "shelljs": "^0.7.6",
54 | "uglifyjs-webpack-plugin": "^1.1.1",
55 | "url-loader": "^0.5.8",
56 | "vue-loader": "^13.3.0",
57 | "vue-style-loader": "^3.0.1",
58 | "vue-template-compiler": "^2.5.2",
59 | "webpack": "^3.6.0",
60 | "webpack-bundle-analyzer": "^2.9.0",
61 | "webpack-dev-server": "^2.9.1",
62 | "webpack-merge": "^4.1.0"
63 | },
64 | "engines": {
65 | "node": ">= 6.0.0",
66 | "npm": ">= 3.0.0"
67 | },
68 | "browserslist": [
69 | "> 1%",
70 | "last 2 versions",
71 | "not ie <= 8"
72 | ]
73 | }
74 |
--------------------------------------------------------------------------------
/fragments/dashboard/config/index.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | // Template version: 1.3.1
3 | // see http://vuejs-templates.github.io/webpack for documentation.
4 |
5 | const path = require('path')
6 |
7 | module.exports = {
8 | dev: {
9 | // Paths
10 | assetsSubDirectory: 'static',
11 | assetsPublicPath: '/',
12 | proxyTable: {},
13 |
14 | // Various Dev Server settings
15 | host: 'localhost', // can be overwritten by process.env.HOST
16 | port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
17 | autoOpenBrowser: false,
18 | errorOverlay: true,
19 | notifyOnErrors: true,
20 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
21 |
22 | // Use Eslint Loader?
23 | // If true, your code will be linted during bundling and
24 | // linting errors and warnings will be shown in the console.
25 | useEslint: true,
26 | // If true, eslint errors and warnings will also be shown in the error overlay
27 | // in the browser.
28 | showEslintErrorsInOverlay: false,
29 |
30 | /**
31 | * Source Maps
32 | */
33 |
34 | // https://webpack.js.org/configuration/devtool/#development
35 | devtool: 'cheap-module-eval-source-map',
36 |
37 | // If you have problems debugging vue-files in devtools,
38 | // set this to false - it *may* help
39 | // https://vue-loader.vuejs.org/en/options.html#cachebusting
40 | cacheBusting: true,
41 |
42 | cssSourceMap: true
43 | },
44 |
45 | build: {
46 | // Template for index.html
47 | index: path.resolve(__dirname, '../public/index.html'),
48 |
49 | // Paths
50 | assetsRoot: path.resolve(__dirname, '../public'),
51 | assetsSubDirectory: 'static',
52 | assetsPublicPath: '/',
53 |
54 | /**
55 | * Source Maps
56 | */
57 |
58 | productionSourceMap: true,
59 | // https://webpack.js.org/configuration/devtool/#production
60 | devtool: '#source-map',
61 |
62 | // Gzip off by default as many popular static hosts such as
63 | // Surge or Netlify already gzip all static assets for you.
64 | // Before setting to `true`, make sure to:
65 | // npm install --save-dev compression-webpack-plugin
66 | productionGzip: false,
67 | productionGzipExtensions: ['js', 'css'],
68 |
69 | // Run the build command with an extra argument to
70 | // View the bundle analyzer report after build finishes:
71 | // `npm run build --report`
72 | // Set to `true` or `false` to always turn it on or off
73 | bundleAnalyzerReport: process.env.npm_config_report
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/fragments/dashboard/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const utils = require('./utils')
4 | const config = require('../config')
5 | const vueLoaderConfig = require('./vue-loader.conf')
6 |
7 | function resolve (dir) {
8 | return path.join(__dirname, '..', dir)
9 | }
10 |
11 | const createLintingRule = () => ({
12 | test: /\.(js|vue)$/,
13 | loader: 'eslint-loader',
14 | enforce: 'pre',
15 | include: [resolve('src'), resolve('test')],
16 | options: {
17 | formatter: require('eslint-friendly-formatter'),
18 | emitWarning: !config.dev.showEslintErrorsInOverlay
19 | }
20 | })
21 |
22 | module.exports = {
23 | context: path.resolve(__dirname, '../'),
24 | entry: {
25 | app: './src/main.js'
26 | },
27 | output: {
28 | path: config.build.assetsRoot,
29 | filename: '[name].js',
30 | publicPath: process.env.NODE_ENV === 'production'
31 | ? config.build.assetsPublicPath
32 | : config.dev.assetsPublicPath
33 | },
34 | resolve: {
35 | extensions: ['.js', '.vue', '.json'],
36 | alias: {
37 | 'vue$': 'vue/dist/vue.esm.js',
38 | '@': resolve('src'),
39 | }
40 | },
41 | module: {
42 | rules: [
43 | ...(config.dev.useEslint ? [createLintingRule()] : []),
44 | {
45 | test: /\.vue$/,
46 | loader: 'vue-loader',
47 | options: vueLoaderConfig
48 | },
49 | {
50 | test: /\.js$/,
51 | loader: 'babel-loader',
52 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
53 | },
54 | {
55 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
56 | loader: 'url-loader',
57 | options: {
58 | limit: 10000,
59 | name: utils.assetsPath('img/[name].[hash:7].[ext]')
60 | }
61 | },
62 | {
63 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
64 | loader: 'url-loader',
65 | options: {
66 | limit: 10000,
67 | name: utils.assetsPath('media/[name].[hash:7].[ext]')
68 | }
69 | },
70 | {
71 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
72 | loader: 'url-loader',
73 | options: {
74 | limit: 10000,
75 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
76 | }
77 | }
78 | ]
79 | },
80 | node: {
81 | // prevent webpack from injecting useless setImmediate polyfill because Vue
82 | // source contains it (although only uses it if it's native).
83 | setImmediate: false,
84 | // prevent webpack from injecting mocks to Node native modules
85 | // that does not make sense for the client
86 | dgram: 'empty',
87 | fs: 'empty',
88 | net: 'empty',
89 | tls: 'empty',
90 | child_process: 'empty'
91 | }
92 | }
93 |
--------------------------------------------------------------------------------
/fragments/header/build/utils.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const config = require('../config')
4 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
5 | const packageConfig = require('../package.json')
6 |
7 | exports.assetsPath = function (_path) {
8 | const assetsSubDirectory = process.env.NODE_ENV === 'production'
9 | ? config.build.assetsSubDirectory
10 | : config.dev.assetsSubDirectory
11 |
12 | return path.posix.join(assetsSubDirectory, _path)
13 | }
14 |
15 | exports.cssLoaders = function (options) {
16 | options = options || {}
17 |
18 | const cssLoader = {
19 | loader: 'css-loader',
20 | options: {
21 | sourceMap: options.sourceMap
22 | }
23 | }
24 |
25 | const postcssLoader = {
26 | loader: 'postcss-loader',
27 | options: {
28 | sourceMap: options.sourceMap
29 | }
30 | }
31 |
32 | // generate loader string to be used with extract text plugin
33 | function generateLoaders (loader, loaderOptions) {
34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
35 |
36 | if (loader) {
37 | loaders.push({
38 | loader: loader + '-loader',
39 | options: Object.assign({}, loaderOptions, {
40 | sourceMap: options.sourceMap
41 | })
42 | })
43 | }
44 |
45 | // Extract CSS when that option is specified
46 | // (which is the case during production build)
47 | if (options.extract) {
48 | return ExtractTextPlugin.extract({
49 | use: loaders,
50 | fallback: 'vue-style-loader'
51 | })
52 | } else {
53 | return ['vue-style-loader'].concat(loaders)
54 | }
55 | }
56 |
57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html
58 | return {
59 | css: generateLoaders(),
60 | postcss: generateLoaders(),
61 | less: generateLoaders('less'),
62 | sass: generateLoaders('sass', { indentedSyntax: true }),
63 | scss: generateLoaders('sass'),
64 | stylus: generateLoaders('stylus'),
65 | styl: generateLoaders('stylus')
66 | }
67 | }
68 |
69 | // Generate loaders for standalone style files (outside of .vue)
70 | exports.styleLoaders = function (options) {
71 | const output = []
72 | const loaders = exports.cssLoaders(options)
73 |
74 | for (const extension in loaders) {
75 | const loader = loaders[extension]
76 | output.push({
77 | test: new RegExp('\\.' + extension + '$'),
78 | use: loader
79 | })
80 | }
81 |
82 | return output
83 | }
84 |
85 | exports.createNotifierCallback = () => {
86 | const notifier = require('node-notifier')
87 |
88 | return (severity, errors) => {
89 | if (severity !== 'error') return
90 |
91 | const error = errors[0]
92 | const filename = error.file && error.file.split('!').pop()
93 |
94 | notifier.notify({
95 | title: packageConfig.name,
96 | message: severity + ': ' + error.name,
97 | subtitle: filename || '',
98 | icon: path.join(__dirname, 'logo.png')
99 | })
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/fragments/dashboard/build/utils.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const config = require('../config')
4 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
5 | const packageConfig = require('../package.json')
6 |
7 | exports.assetsPath = function (_path) {
8 | const assetsSubDirectory = process.env.NODE_ENV === 'production'
9 | ? config.build.assetsSubDirectory
10 | : config.dev.assetsSubDirectory
11 |
12 | return path.posix.join(assetsSubDirectory, _path)
13 | }
14 |
15 | exports.cssLoaders = function (options) {
16 | options = options || {}
17 |
18 | const cssLoader = {
19 | loader: 'css-loader',
20 | options: {
21 | sourceMap: options.sourceMap
22 | }
23 | }
24 |
25 | const postcssLoader = {
26 | loader: 'postcss-loader',
27 | options: {
28 | sourceMap: options.sourceMap
29 | }
30 | }
31 |
32 | // generate loader string to be used with extract text plugin
33 | function generateLoaders (loader, loaderOptions) {
34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
35 |
36 | if (loader) {
37 | loaders.push({
38 | loader: loader + '-loader',
39 | options: Object.assign({}, loaderOptions, {
40 | sourceMap: options.sourceMap
41 | })
42 | })
43 | }
44 |
45 | // Extract CSS when that option is specified
46 | // (which is the case during production build)
47 | if (options.extract) {
48 | return ExtractTextPlugin.extract({
49 | use: loaders,
50 | fallback: 'vue-style-loader'
51 | })
52 | } else {
53 | return ['vue-style-loader'].concat(loaders)
54 | }
55 | }
56 |
57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html
58 | return {
59 | css: generateLoaders(),
60 | postcss: generateLoaders(),
61 | less: generateLoaders('less'),
62 | sass: generateLoaders('sass', { indentedSyntax: true }),
63 | scss: generateLoaders('sass'),
64 | stylus: generateLoaders('stylus'),
65 | styl: generateLoaders('stylus')
66 | }
67 | }
68 |
69 | // Generate loaders for standalone style files (outside of .vue)
70 | exports.styleLoaders = function (options) {
71 | const output = []
72 | const loaders = exports.cssLoaders(options)
73 |
74 | for (const extension in loaders) {
75 | const loader = loaders[extension]
76 | output.push({
77 | test: new RegExp('\\.' + extension + '$'),
78 | use: loader
79 | })
80 | }
81 |
82 | return output
83 | }
84 |
85 | exports.createNotifierCallback = () => {
86 | const notifier = require('node-notifier')
87 |
88 | return (severity, errors) => {
89 | if (severity !== 'error') return
90 |
91 | const error = errors[0]
92 | const filename = error.file && error.file.split('!').pop()
93 |
94 | notifier.notify({
95 | title: packageConfig.name,
96 | message: severity + ': ' + error.name,
97 | subtitle: filename || '',
98 | icon: path.join(__dirname, 'logo.png')
99 | })
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Tailor + VueJS SPA demo
2 |
3 | 
4 |
5 | Inspired by [React implementation](https://github.com/tsnolan23/tailor-react-spa).
6 |
7 | This repository is an example application using the [Mosaic frontend microservices architecture](https://mosaic9.org).
8 |
9 | It makes use of [Tailor](https://github.com/zalando/tailor) only, so it is a pretty basic example.
10 |
11 | Since the idea is that a separate team would be in charge of each of the fragments, there is some duplicate code within each of the fragments such as the Webpack configuration.
12 |
13 | ## How it works
14 |
15 | Tailor is a layout service. It is able to parse HTML templates and replace `` tags for their respective bundles.
16 |
17 | Tailor also injects a RequireJS bundle into your template so you're able to use Webpack Externals to share dependencies across fragments (such as `vue`).
18 |
19 | ## Fragments
20 |
21 | Fragments are small VueJS applications.
22 |
23 | They might be VueJS applications, or any other implementation.
24 |
25 | Fragments do not need to necessarily render something.
26 |
27 | This app consists basically in a couple of fragments:
28 |
29 | - fragments/dashboard
30 | - fragments/header
31 |
32 | Each fragment contains it's own `webpack.config.js` that specifies how to build it.
33 |
34 | ## `fragments/*`
35 |
36 | All the other fragments are parts of this application.
37 |
38 | Those shared dependencies are listed as externals in their respective webpack configurations.
39 |
40 | All of them are built using `amd` as a `libraryTarget` in their Webpack configuration files.
41 |
42 | The dependency management is handled with RequireJS on runtime.
43 |
44 | ## How to
45 |
46 | ### Setting up
47 |
48 | 1. Clone this repository
49 | 1. Install all of the base dependencies with `npm install`
50 | 1. Install all of the fragment dependencies with `npm run install-fragment-dependencies`
51 | 1. Build the fragments with `npm run build-fragments`
52 |
53 | ### Running
54 |
55 | 1. In one terminal, start the fragments servers with `npm run start-fragments` - then you'll have header anf dashboard running on 8090 and 8091 localhost ports respectively.
56 | 1. In another terminal, start the Tailor service with `npm start`
57 | 1. Navigate to `http://localhost:8089`
58 |
59 | ### Running in development mode
60 |
61 | 1. In one terminal, start the fragments watchers with `npm run watch-fragments`
62 | 1. In another terminal, start the fragments servers with `npm run start-fragments`
63 | 1. In another terminal, start the Tailor service with `npm start`
64 | 1. Navigate to `http://localhost:8089`
65 |
66 | ## Needed features
67 |
68 | ### Sharing dependencies with `fragment-common`
69 |
70 | TODO
71 |
72 | ### Sharing styles
73 |
74 | TODO
75 |
76 | ### Some way to exchange data: state or message bus
77 |
78 | TODO
79 |
80 | ## Ideas and contributions
81 |
82 | It's ongoing experiment. I believe that it could be a usefull POC for teams and individual developers who are using VueJs for their frontend and want to achieve more flexbility that microservices phiosophy gives.
83 |
84 | Ping me on twiter [@shershen08](https://twitter.com/shershen08) or create a PR.
85 |
--------------------------------------------------------------------------------
/fragments/header/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const utils = require('./utils')
3 | const webpack = require('webpack')
4 | const config = require('../config')
5 | const merge = require('webpack-merge')
6 | const path = require('path')
7 | const baseWebpackConfig = require('./webpack.base.conf')
8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
11 | const portfinder = require('portfinder')
12 |
13 | const HOST = process.env.HOST
14 | const PORT = process.env.PORT && Number(process.env.PORT)
15 |
16 | const devWebpackConfig = merge(baseWebpackConfig, {
17 | module: {
18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
19 | },
20 | // cheap-module-eval-source-map is faster for development
21 | devtool: config.dev.devtool,
22 |
23 | // these devServer options should be customized in /config/index.js
24 | devServer: {
25 | clientLogLevel: 'warning',
26 | historyApiFallback: {
27 | rewrites: [
28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
29 | ],
30 | },
31 | hot: true,
32 | contentBase: false, // since we use CopyWebpackPlugin.
33 | compress: true,
34 | host: HOST || config.dev.host,
35 | port: PORT || config.dev.port,
36 | open: config.dev.autoOpenBrowser,
37 | overlay: config.dev.errorOverlay
38 | ? { warnings: false, errors: true }
39 | : false,
40 | publicPath: config.dev.assetsPublicPath,
41 | proxy: config.dev.proxyTable,
42 | quiet: true, // necessary for FriendlyErrorsPlugin
43 | watchOptions: {
44 | poll: config.dev.poll,
45 | }
46 | },
47 | plugins: [
48 | new webpack.DefinePlugin({
49 | 'process.env': require('../config/dev.env')
50 | }),
51 | new webpack.HotModuleReplacementPlugin(),
52 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
53 | new webpack.NoEmitOnErrorsPlugin(),
54 | // https://github.com/ampedandwired/html-webpack-plugin
55 | new HtmlWebpackPlugin({
56 | filename: 'index.html',
57 | template: 'index.html',
58 | inject: true
59 | }),
60 | // copy custom static assets
61 | new CopyWebpackPlugin([
62 | {
63 | from: path.resolve(__dirname, '../static'),
64 | to: config.dev.assetsSubDirectory,
65 | ignore: ['.*']
66 | }
67 | ])
68 | ]
69 | })
70 |
71 | module.exports = new Promise((resolve, reject) => {
72 | portfinder.basePort = process.env.PORT || config.dev.port
73 | portfinder.getPort((err, port) => {
74 | if (err) {
75 | reject(err)
76 | } else {
77 | // publish the new Port, necessary for e2e tests
78 | process.env.PORT = port
79 | // add port to devServer config
80 | devWebpackConfig.devServer.port = port
81 |
82 | // Add FriendlyErrorsPlugin
83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84 | compilationSuccessInfo: {
85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
86 | },
87 | onErrors: config.dev.notifyOnErrors
88 | ? utils.createNotifierCallback()
89 | : undefined
90 | }))
91 |
92 | resolve(devWebpackConfig)
93 | }
94 | })
95 | })
96 |
--------------------------------------------------------------------------------
/fragments/dashboard/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const utils = require('./utils')
3 | const webpack = require('webpack')
4 | const config = require('../config')
5 | const merge = require('webpack-merge')
6 | const path = require('path')
7 | const baseWebpackConfig = require('./webpack.base.conf')
8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
11 | const portfinder = require('portfinder')
12 |
13 | const HOST = process.env.HOST
14 | const PORT = process.env.PORT && Number(process.env.PORT)
15 |
16 | const devWebpackConfig = merge(baseWebpackConfig, {
17 | module: {
18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
19 | },
20 | // cheap-module-eval-source-map is faster for development
21 | devtool: config.dev.devtool,
22 |
23 | // these devServer options should be customized in /config/index.js
24 | devServer: {
25 | clientLogLevel: 'warning',
26 | historyApiFallback: {
27 | rewrites: [
28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
29 | ],
30 | },
31 | hot: true,
32 | contentBase: false, // since we use CopyWebpackPlugin.
33 | compress: true,
34 | host: HOST || config.dev.host,
35 | port: PORT || config.dev.port,
36 | open: config.dev.autoOpenBrowser,
37 | overlay: config.dev.errorOverlay
38 | ? { warnings: false, errors: true }
39 | : false,
40 | publicPath: config.dev.assetsPublicPath,
41 | proxy: config.dev.proxyTable,
42 | quiet: true, // necessary for FriendlyErrorsPlugin
43 | watchOptions: {
44 | poll: config.dev.poll,
45 | }
46 | },
47 | plugins: [
48 | new webpack.DefinePlugin({
49 | 'process.env': require('../config/dev.env')
50 | }),
51 | new webpack.HotModuleReplacementPlugin(),
52 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
53 | new webpack.NoEmitOnErrorsPlugin(),
54 | // https://github.com/ampedandwired/html-webpack-plugin
55 | new HtmlWebpackPlugin({
56 | filename: 'index.html',
57 | template: 'index.html',
58 | inject: true
59 | }),
60 | // copy custom static assets
61 | new CopyWebpackPlugin([
62 | {
63 | from: path.resolve(__dirname, '../static'),
64 | to: config.dev.assetsSubDirectory,
65 | ignore: ['.*']
66 | }
67 | ])
68 | ]
69 | })
70 |
71 | module.exports = new Promise((resolve, reject) => {
72 | portfinder.basePort = process.env.PORT || config.dev.port
73 | portfinder.getPort((err, port) => {
74 | if (err) {
75 | reject(err)
76 | } else {
77 | // publish the new Port, necessary for e2e tests
78 | process.env.PORT = port
79 | // add port to devServer config
80 | devWebpackConfig.devServer.port = port
81 |
82 | // Add FriendlyErrorsPlugin
83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84 | compilationSuccessInfo: {
85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
86 | },
87 | onErrors: config.dev.notifyOnErrors
88 | ? utils.createNotifierCallback()
89 | : undefined
90 | }))
91 |
92 | resolve(devWebpackConfig)
93 | }
94 | })
95 | })
96 |
--------------------------------------------------------------------------------
/fragments/dashboard/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const utils = require('./utils')
4 | const webpack = require('webpack')
5 | const config = require('../config')
6 | const merge = require('webpack-merge')
7 | const baseWebpackConfig = require('./webpack.base.conf')
8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
13 |
14 | const env = require('../config/prod.env')
15 |
16 | const webpackConfig = merge(baseWebpackConfig, {
17 | module: {
18 | rules: utils.styleLoaders({
19 | sourceMap: config.build.productionSourceMap,
20 | extract: false,
21 | usePostCSS: true
22 | })
23 | },
24 | devtool: config.build.productionSourceMap ? config.build.devtool : false,
25 | // output: {
26 | // path: config.build.assetsRoot,
27 | // filename: utils.assetsPath('js/[name].[chunkhash].js'),
28 | // chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
29 | // },
30 |
31 | output: {
32 | path: path.resolve(__dirname, '..', 'public'),
33 | publicPath: 'http://localhost:8090/public/',
34 | filename: 'bundle.js'
35 | },
36 |
37 | plugins: [
38 | // http://vuejs.github.io/vue-loader/en/workflow/production.html
39 | new webpack.DefinePlugin({
40 | 'process.env': env
41 | }),
42 | new UglifyJsPlugin({
43 | uglifyOptions: {
44 | compress: {
45 | warnings: false
46 | }
47 | },
48 | sourceMap: config.build.productionSourceMap,
49 | parallel: true
50 | }),
51 | // extract css into its own file
52 | // new ExtractTextPlugin({
53 | // filename: utils.assetsPath('css/[name].[contenthash].css'),
54 | // // Setting the following option to `false` will not extract CSS from codesplit chunks.
55 | // // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
56 | // // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
57 | // // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
58 | // allChunks: true,
59 | // }),
60 | // Compress extracted CSS. We are using this plugin so that possible
61 | // duplicated CSS from different components can be deduped.
62 | new OptimizeCSSPlugin({
63 | cssProcessorOptions: config.build.productionSourceMap
64 | ? { safe: true, map: { inline: false } }
65 | : { safe: true }
66 | }),
67 | // generate dist index.html with correct asset hash for caching.
68 | // you can customize output by editing /index.html
69 | // see https://github.com/ampedandwired/html-webpack-plugin
70 | new HtmlWebpackPlugin({
71 | filename: config.build.index,
72 | template: 'index.html',
73 | inject: true,
74 | minify: {
75 | removeComments: true,
76 | collapseWhitespace: true,
77 | removeAttributeQuotes: true
78 | // more options:
79 | // https://github.com/kangax/html-minifier#options-quick-reference
80 | },
81 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin
82 | chunksSortMode: 'dependency'
83 | }),
84 | // keep module.id stable when vendor modules does not change
85 | new webpack.HashedModuleIdsPlugin(),
86 | // enable scope hoisting
87 | new webpack.optimize.ModuleConcatenationPlugin(),
88 | // split vendor js into its own file
89 | /*new webpack.optimize.CommonsChunkPlugin({
90 | name: 'vendor',
91 | minChunks (module) {
92 | // any required modules inside node_modules are extracted to vendor
93 | return (
94 | module.resource &&
95 | /\.js$/.test(module.resource) &&
96 | module.resource.indexOf(
97 | path.join(__dirname, '../node_modules')
98 | ) === 0
99 | )
100 | }
101 | }),
102 | */
103 | // extract webpack runtime and module manifest to its own file in order to
104 | // prevent vendor hash from being updated whenever app bundle is updated
105 | // new webpack.optimize.CommonsChunkPlugin({
106 | // name: 'manifest',
107 | // minChunks: Infinity
108 | // }),
109 | // This instance extracts shared chunks from code splitted chunks and bundles them
110 | // in a separate chunk, similar to the vendor chunk
111 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
112 | // new webpack.optimize.CommonsChunkPlugin({
113 | // name: 'app',
114 | // async: 'vendor-async',
115 | // children: true,
116 | // minChunks: 3
117 | // }),
118 |
119 | // copy custom static assets
120 | new CopyWebpackPlugin([
121 | {
122 | from: path.resolve(__dirname, '../static'),
123 | to: config.build.assetsSubDirectory,
124 | ignore: ['.*']
125 | }
126 | ])
127 | ]
128 | })
129 |
130 | if (config.build.productionGzip) {
131 | const CompressionWebpackPlugin = require('compression-webpack-plugin')
132 |
133 | webpackConfig.plugins.push(
134 | new CompressionWebpackPlugin({
135 | asset: '[path].gz[query]',
136 | algorithm: 'gzip',
137 | test: new RegExp(
138 | '\\.(' +
139 | config.build.productionGzipExtensions.join('|') +
140 | ')$'
141 | ),
142 | threshold: 10240,
143 | minRatio: 0.8
144 | })
145 | )
146 | }
147 |
148 | if (config.build.bundleAnalyzerReport) {
149 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
150 | webpackConfig.plugins.push(new BundleAnalyzerPlugin())
151 | }
152 |
153 | module.exports = webpackConfig
154 |
--------------------------------------------------------------------------------
/fragments/header/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const path = require('path')
3 | const utils = require('./utils')
4 | const webpack = require('webpack')
5 | const config = require('../config')
6 | const merge = require('webpack-merge')
7 | const baseWebpackConfig = require('./webpack.base.conf')
8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
13 |
14 | const env = require('../config/prod.env')
15 |
16 | const webpackConfig = merge(baseWebpackConfig, {
17 | module: {
18 | rules: utils.styleLoaders({
19 | sourceMap: config.build.productionSourceMap,
20 | //extract: true,
21 | usePostCSS: true
22 | })
23 | },
24 | devtool: config.build.productionSourceMap ? config.build.devtool : false,
25 | // output: {
26 | // path: config.build.assetsRoot,
27 | // filename: utils.assetsPath('js/[name].[chunkhash].js'),
28 | // chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
29 | // },
30 | output: {
31 | path: path.resolve(__dirname, '..', 'public'),
32 | publicPath: 'http://localhost:8091/public/',
33 | filename: 'bundle.js'
34 | },
35 | plugins: [
36 | // http://vuejs.github.io/vue-loader/en/workflow/production.html
37 | new webpack.DefinePlugin({
38 | 'process.env': env
39 | }),
40 | new UglifyJsPlugin({
41 | uglifyOptions: {
42 | compress: {
43 | warnings: false
44 | }
45 | },
46 | sourceMap: config.build.productionSourceMap,
47 | parallel: true
48 | }),
49 | // extract css into its own file
50 | // new ExtractTextPlugin({
51 | // filename: utils.assetsPath('css/[name].[contenthash].css'),
52 | // // Setting the following option to `false` will not extract CSS from codesplit chunks.
53 | // // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
54 | // // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
55 | // // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
56 | // allChunks: true,
57 | // }),
58 | // Compress extracted CSS. We are using this plugin so that possible
59 | // duplicated CSS from different components can be deduped.
60 | new OptimizeCSSPlugin({
61 | cssProcessorOptions: config.build.productionSourceMap
62 | ? { safe: true, map: { inline: false } }
63 | : { safe: true }
64 | }),
65 | // generate dist index.html with correct asset hash for caching.
66 | // you can customize output by editing /index.html
67 | // see https://github.com/ampedandwired/html-webpack-plugin
68 | new HtmlWebpackPlugin({
69 | filename: config.build.index,
70 | template: 'index.html',
71 | inject: true,
72 | minify: {
73 | removeComments: true,
74 | collapseWhitespace: true,
75 | removeAttributeQuotes: true
76 | // more options:
77 | // https://github.com/kangax/html-minifier#options-quick-reference
78 | },
79 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin
80 | chunksSortMode: 'dependency'
81 | }),
82 | // keep module.id stable when vendor modules does not change
83 | new webpack.HashedModuleIdsPlugin(),
84 | // enable scope hoisting
85 | new webpack.optimize.ModuleConcatenationPlugin(),
86 | // split vendor js into its own file
87 | // new webpack.optimize.CommonsChunkPlugin({
88 | // name: 'vendor',
89 | // minChunks (module) {
90 | // // any required modules inside node_modules are extracted to vendor
91 | // return (
92 | // module.resource &&
93 | // /\.js$/.test(module.resource) &&
94 | // module.resource.indexOf(
95 | // path.join(__dirname, '../node_modules')
96 | // ) === 0
97 | // )
98 | // }
99 | // }),
100 | // extract webpack runtime and module manifest to its own file in order to
101 | // prevent vendor hash from being updated whenever app bundle is updated
102 | // new webpack.optimize.CommonsChunkPlugin({
103 | // name: 'manifest',
104 | // minChunks: Infinity
105 | // }),
106 | // This instance extracts shared chunks from code splitted chunks and bundles them
107 | // in a separate chunk, similar to the vendor chunk
108 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
109 | // new webpack.optimize.CommonsChunkPlugin({
110 | // name: 'app',
111 | // async: 'vendor-async',
112 | // children: true,
113 | // minChunks: 3
114 | // }),
115 |
116 | // copy custom static assets
117 | new CopyWebpackPlugin([
118 | {
119 | from: path.resolve(__dirname, '../static'),
120 | to: config.build.assetsSubDirectory,
121 | ignore: ['.*']
122 | }
123 | ])
124 | ]
125 | })
126 |
127 | if (config.build.productionGzip) {
128 | const CompressionWebpackPlugin = require('compression-webpack-plugin')
129 |
130 | webpackConfig.plugins.push(
131 | new CompressionWebpackPlugin({
132 | asset: '[path].gz[query]',
133 | algorithm: 'gzip',
134 | test: new RegExp(
135 | '\\.(' +
136 | config.build.productionGzipExtensions.join('|') +
137 | ')$'
138 | ),
139 | threshold: 10240,
140 | minRatio: 0.8
141 | })
142 | )
143 | }
144 |
145 | if (config.build.bundleAnalyzerReport) {
146 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
147 | webpackConfig.plugins.push(new BundleAnalyzerPlugin())
148 | }
149 |
150 | module.exports = webpackConfig
151 |
--------------------------------------------------------------------------------
/.csscomb.json:
--------------------------------------------------------------------------------
1 | {
2 | "exclude": [
3 | ".git/**",
4 | "node_modules/**",
5 | "bower_components/**"
6 | ],
7 | "always-semicolon": true,
8 | "block-indent": " ",
9 | "color-case": "lower",
10 | "color-shorthand": true,
11 | "element-case": "lower",
12 | "eof-newline": true,
13 | "leading-zero": false,
14 | "quotes": "single",
15 | "remove-empty-rulesets": true,
16 | "space-after-colon": " ",
17 | "space-after-combinator": " ",
18 | "space-after-opening-brace": "\n",
19 | "space-after-selector-delimiter": " ",
20 | "space-before-closing-brace": "\n",
21 | "space-before-colon": "",
22 | "space-before-combinator": " ",
23 | "space-before-opening-brace": " ",
24 | "space-before-selector-delimiter": "",
25 | "strip-spaces": true,
26 | "unitless-zero": true,
27 | "vendor-prefix-align": true,
28 | "sort-order": [
29 | [
30 | "font",
31 | "font-family",
32 | "font-size",
33 | "font-weight",
34 | "font-style",
35 | "font-variant",
36 | "font-size-adjust",
37 | "font-stretch",
38 | "font-effect",
39 | "font-emphasize",
40 | "font-emphasize-position",
41 | "font-emphasize-style",
42 | "font-smooth",
43 | "src",
44 | "line-height",
45 | "position",
46 | "z-index",
47 | "top",
48 | "right",
49 | "bottom",
50 | "left",
51 | "display",
52 | "visibility",
53 | "float",
54 | "clear",
55 | "overflow",
56 | "overflow-x",
57 | "overflow-y",
58 | "-ms-overflow-x",
59 | "-ms-overflow-y",
60 | "clip",
61 | "zoom",
62 | "flex",
63 | "flex-direction",
64 | "flex-order",
65 | "flex-pack",
66 | "flex-align",
67 | "flex-wrap",
68 | "flex-grow",
69 | "flex-shrink",
70 | "align-items",
71 | "justify-content",
72 | "-webkit-box-sizing",
73 | "-moz-box-sizing",
74 | "box-sizing",
75 | "width",
76 | "min-width",
77 | "max-width",
78 | "height",
79 | "min-height",
80 | "max-height",
81 | "margin",
82 | "margin-top",
83 | "margin-right",
84 | "margin-bottom",
85 | "margin-left",
86 | "padding",
87 | "padding-top",
88 | "padding-right",
89 | "padding-bottom",
90 | "padding-left",
91 | "table-layout",
92 | "empty-cells",
93 | "caption-side",
94 | "border-spacing",
95 | "border-collapse",
96 | "list-style",
97 | "list-style-position",
98 | "list-style-type",
99 | "list-style-image",
100 | "content",
101 | "quotes",
102 | "counter-reset",
103 | "counter-increment",
104 | "resize",
105 | "cursor",
106 | "-webkit-user-select",
107 | "-moz-user-select",
108 | "-ms-user-select",
109 | "user-select",
110 | "nav-index",
111 | "nav-up",
112 | "nav-right",
113 | "nav-down",
114 | "nav-left",
115 | "-webkit-transition",
116 | "-moz-transition",
117 | "-ms-transition",
118 | "-o-transition",
119 | "transition",
120 | "-webkit-transition-delay",
121 | "-moz-transition-delay",
122 | "-ms-transition-delay",
123 | "-o-transition-delay",
124 | "transition-delay",
125 | "-webkit-transition-timing-function",
126 | "-moz-transition-timing-function",
127 | "-ms-transition-timing-function",
128 | "-o-transition-timing-function",
129 | "transition-timing-function",
130 | "-webkit-transition-duration",
131 | "-moz-transition-duration",
132 | "-ms-transition-duration",
133 | "-o-transition-duration",
134 | "transition-duration",
135 | "-webkit-transition-property",
136 | "-moz-transition-property",
137 | "-ms-transition-property",
138 | "-o-transition-property",
139 | "transition-property",
140 | "-webkit-transform",
141 | "-moz-transform",
142 | "-ms-transform",
143 | "-o-transform",
144 | "transform",
145 | "-webkit-transform-origin",
146 | "-moz-transform-origin",
147 | "-ms-transform-origin",
148 | "-o-transform-origin",
149 | "transform-origin",
150 | "-webkit-animation",
151 | "-moz-animation",
152 | "-ms-animation",
153 | "-o-animation",
154 | "animation",
155 | "-webkit-animation-name",
156 | "-moz-animation-name",
157 | "-ms-animation-name",
158 | "-o-animation-name",
159 | "animation-name",
160 | "-webkit-animation-duration",
161 | "-moz-animation-duration",
162 | "-ms-animation-duration",
163 | "-o-animation-duration",
164 | "animation-duration",
165 | "-webkit-animation-play-state",
166 | "-moz-animation-play-state",
167 | "-ms-animation-play-state",
168 | "-o-animation-play-state",
169 | "animation-play-state",
170 | "-webkit-animation-timing-function",
171 | "-moz-animation-timing-function",
172 | "-ms-animation-timing-function",
173 | "-o-animation-timing-function",
174 | "animation-timing-function",
175 | "-webkit-animation-delay",
176 | "-moz-animation-delay",
177 | "-ms-animation-delay",
178 | "-o-animation-delay",
179 | "animation-delay",
180 | "-webkit-animation-iteration-count",
181 | "-moz-animation-iteration-count",
182 | "-ms-animation-iteration-count",
183 | "-o-animation-iteration-count",
184 | "animation-iteration-count",
185 | "-webkit-animation-direction",
186 | "-moz-animation-direction",
187 | "-ms-animation-direction",
188 | "-o-animation-direction",
189 | "animation-direction",
190 | "text-align",
191 | "-webkit-text-align-last",
192 | "-moz-text-align-last",
193 | "-ms-text-align-last",
194 | "text-align-last",
195 | "vertical-align",
196 | "white-space",
197 | "text-decoration",
198 | "text-emphasis",
199 | "text-emphasis-color",
200 | "text-emphasis-style",
201 | "text-emphasis-position",
202 | "text-indent",
203 | "-ms-text-justify",
204 | "text-justify",
205 | "letter-spacing",
206 | "word-spacing",
207 | "-ms-writing-mode",
208 | "text-outline",
209 | "text-transform",
210 | "text-wrap",
211 | "text-overflow",
212 | "-ms-text-overflow",
213 | "text-overflow-ellipsis",
214 | "text-overflow-mode",
215 | "-ms-word-wrap",
216 | "word-wrap",
217 | "word-break",
218 | "-ms-word-break",
219 | "-moz-tab-size",
220 | "-o-tab-size",
221 | "tab-size",
222 | "-webkit-hyphens",
223 | "-moz-hyphens",
224 | "hyphens",
225 | "pointer-events",
226 | "opacity",
227 | "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
228 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
229 | "-ms-interpolation-mode",
230 | "color",
231 | "border",
232 | "border-width",
233 | "border-style",
234 | "border-color",
235 | "border-top",
236 | "border-top-width",
237 | "border-top-style",
238 | "border-top-color",
239 | "border-right",
240 | "border-right-width",
241 | "border-right-style",
242 | "border-right-color",
243 | "border-bottom",
244 | "border-bottom-width",
245 | "border-bottom-style",
246 | "border-bottom-color",
247 | "border-left",
248 | "border-left-width",
249 | "border-left-style",
250 | "border-left-color",
251 | "-webkit-border-radius",
252 | "-moz-border-radius",
253 | "border-radius",
254 | "-webkit-border-top-left-radius",
255 | "-moz-border-radius-topleft",
256 | "border-top-left-radius",
257 | "-webkit-border-top-right-radius",
258 | "-moz-border-radius-topright",
259 | "border-top-right-radius",
260 | "-webkit-border-bottom-right-radius",
261 | "-moz-border-radius-bottomright",
262 | "border-bottom-right-radius",
263 | "-webkit-border-bottom-left-radius",
264 | "-moz-border-radius-bottomleft",
265 | "border-bottom-left-radius",
266 | "-webkit-border-image",
267 | "-moz-border-image",
268 | "-o-border-image",
269 | "border-image",
270 | "-webkit-border-image-source",
271 | "-moz-border-image-source",
272 | "-o-border-image-source",
273 | "border-image-source",
274 | "-webkit-border-image-slice",
275 | "-moz-border-image-slice",
276 | "-o-border-image-slice",
277 | "border-image-slice",
278 | "-webkit-border-image-width",
279 | "-moz-border-image-width",
280 | "-o-border-image-width",
281 | "border-image-width",
282 | "-webkit-border-image-outset",
283 | "-moz-border-image-outset",
284 | "-o-border-image-outset",
285 | "border-image-outset",
286 | "-webkit-border-image-repeat",
287 | "-moz-border-image-repeat",
288 | "-o-border-image-repeat",
289 | "border-image-repeat",
290 | "outline",
291 | "outline-width",
292 | "outline-style",
293 | "outline-color",
294 | "outline-offset",
295 | "background",
296 | "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
297 | "background-color",
298 | "background-image",
299 | "background-repeat",
300 | "background-attachment",
301 | "background-position",
302 | "background-position-x",
303 | "-ms-background-position-x",
304 | "background-position-y",
305 | "-ms-background-position-y",
306 | "-webkit-background-clip",
307 | "-moz-background-clip",
308 | "background-clip",
309 | "background-origin",
310 | "-webkit-background-size",
311 | "-moz-background-size",
312 | "-o-background-size",
313 | "background-size",
314 | "box-decoration-break",
315 | "-webkit-box-shadow",
316 | "-moz-box-shadow",
317 | "box-shadow",
318 | "filter:progid:DXImageTransform.Microsoft.gradient",
319 | "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
320 | "text-shadow"
321 | ]
322 | ]
323 | }
324 |
--------------------------------------------------------------------------------
4 |