3 |
24 |
25 |
--------------------------------------------------------------------------------
/webpack/test/compiler.js:
--------------------------------------------------------------------------------
1 | import 'babel-polyfill'
2 | import path from 'path'
3 | import webpack from 'webpack'
4 | import memoryfs from 'memory-fs'
5 |
6 | function resolve(dir) {
7 | return path.resolve(process.cwd(), dir)
8 | }
9 |
10 | export default (fixture, options = {}) => {
11 | const compiler = webpack({
12 | context: __dirname,
13 | entry: `./${fixture}`,
14 | output: {
15 | path: path.resolve(__dirname),
16 | filename: 'bundle.js',
17 | },
18 | module: {
19 | rules: [{
20 | test: /\.txt$/,
21 | use: {
22 | loader: resolve('loaders/ml-loader.js'),
23 | options: {
24 | name: 'Alice'
25 | }
26 | }
27 | }]
28 | }
29 | })
30 | compiler.outputFileSystem = new memoryfs()
31 | return new Promise((resolve, reject) => {
32 | compiler.run((err, stats) => {
33 | if (err) reject(err)
34 | resolve(stats)
35 | })
36 | })
37 | }
38 |
--------------------------------------------------------------------------------
/koa-app/README.md:
--------------------------------------------------------------------------------
1 | # Koa服务
2 |
3 | ## Package 说明
4 | * koa # 主程
5 | * koa-router # 路由
6 | * koa-compress # 压缩响应
7 | * koa-logger # 日志
8 | * koa-session # session
9 | * koa-static # 静态资源服务
10 | * keygrip # 加密
11 | * @babel/core # 支持es6语法
12 | * @babel/preset-env # 支持es6语法
13 | * @babel/register # 支持es6语法
14 | * axios # http请求
15 | * mongoose # Mongoose是设计用于异步环境的MongoDB对象建模工具
16 | * nodemon # nodemon是一种工具，可在检测到目录中的文件更改时通过自动重新启动节点应用程序来帮助开发基于node.js的应用程序
17 |
18 | ## 目录
19 | ``` bash
20 | ├── app # Node代码目录
21 | │ ├── db # mangodb数据库操作
22 | │ │ ├── #
23 | │ │ └── #
24 | │ ├── middleWares # koa中间件
25 | │ ├── middle # koa2中间件目录
26 | │ └── router # koa路由封装
27 | ├── log # pm2日志输出目录
28 | ├── node_modules # node包
29 | ├── .gitignore # git配置
30 | ├── app.config.js # app配置文件
31 | ├── package.json #
32 | ├── package-lock.json #
33 | ├── pm2.config.js # 项目pm2配置
34 | ├── pm2.md # pm2的api文档
35 | ├── postcss.config.js # postcss配置文件
36 | └── README.md # 文档
37 | ```
38 |
--------------------------------------------------------------------------------
/react-base-webpack/index.template.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
4 |
13 |
5 |
8 | 活动名称
6 | {{coupon.name}}
7 |
9 |
12 | 活动时间
10 | {{coupon.startDate}} - {{coupon.endDate}}
11 |
14 |
23 |
15 |
18 | 活动名称
16 | {{coupon.name}}
17 |
19 |
22 | 活动时间
20 | {{coupon.startDate}} - {{coupon.endDate}}
21 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
30 |
31 |
32 |
33 | )
34 | }
35 | }
36 |
37 | export default Index
--------------------------------------------------------------------------------
/webpack4-basic-config/src/index.js:
--------------------------------------------------------------------------------
1 | import '@babel/polyfill'
2 | import Vue from 'vue'
3 | import './config'
4 | import router from './router'
5 | import App from './app.vue'
6 | import vueStorage from './utils/storage'
7 |
8 | /**
9 | * @param {Object} Vue Vue
10 | * @param {router} [router=undefined] VueRouter 实例化对象
11 | * @param [] 路由白名单
12 | * @param (storage) => {} 回调函数
13 | */
14 | const store = vueStorage(Vue, router, [], (storage, to, from) => {
15 | return new Promise((resolve) => {
16 | // const { whether } = storage.getItem('userObject', false) || JSON.parse(localStorage.getItem('userObject')) || {}
17 | // if (!whether && to.path !== '/login') {
18 | // global.location.href = '/login'
19 | // } else {
20 | // storage.setItem('userObject', JSON.parse(localStorage.getItem('userObject')), false)
21 | resolve(storage, to, from)
22 | // }
23 | })
24 | })
25 |
26 | /*eslint-disable*/
27 | new Vue({
28 | el: '#app',
29 | router,
30 | store,
31 | render: h => h(App)
32 | })
33 |
--------------------------------------------------------------------------------
/webpack4-basic-config/index.template.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
3 |
4 |
5 |
6 |
10 |
11 |
35 |
--------------------------------------------------------------------------------
/webpack4-ssr-config/client/views/test/ajax.vue:
--------------------------------------------------------------------------------
1 |
2 | Count is : {{count}}
7 |count延迟了1秒赋值
8 |ajax接口返回{{testResult}}
9 |
3 |
8 |
9 |
34 |
--------------------------------------------------------------------------------
/webpack4-ssr-config/client/config.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | // 引入http请求插件
3 | import http from './../config/http'
4 | // 引入log日志插件
5 | import { addRequestInterceptor, addResponseInterceptor } from './../config/http/http'
6 | import titleMixin from './utils/title'
7 | // 引入log日志插件
8 | import vueLogger from './../config/logger/vue-logger'
9 |
10 | // 注册插件
11 | Vue.use(http)
12 | Vue.use(vueLogger)
13 | Vue.mixin(titleMixin)
14 |
15 | // request前自动添加api配置
16 | addRequestInterceptor(
17 | (config) => {
18 | /*统一加/api前缀*/
19 | config.url = `/api${config.url}`
20 | return config
21 | },
22 | (error) => {
23 | return Promise.reject(error)
24 | }
25 | )
26 |
27 | // http 返回response前处理
28 | addResponseInterceptor(
29 | (response) => {
30 | /*todo 在这里统一前置处理请求响应 */
31 | return Promise.resolve(response.data)
32 | },
33 | (error) => {
34 | /*
35 | * todo 统一处理500、400等错误状态
36 | * 这里reject下，交给entry-server.js的处理
37 | */
38 | const { response, request } = error
39 | return Promise.reject({ code: response.status, data: response.data, method: request.method, path: request.path })
40 | }
41 | )
--------------------------------------------------------------------------------
/webpack3-basic-config/client/router.js:
--------------------------------------------------------------------------------
1 | /* loading */
2 | import VueRouter from 'vue-router'
3 | import routes from './routes'
4 | const ProgressBar = require('progressbar.js')
5 |
6 | const router = new VueRouter({
7 | mode: 'history',
8 | // base: '/book',
9 | routes
10 | })
11 |
12 | const doc = global.document
13 |
14 | // 响应式 SVG 进度条
15 | let line = null
16 |
17 | router.beforeEach((to, from, next) => {
18 | // 进度条开始
19 | if (line) line.destroy()
20 | line = new ProgressBar.Line('body', {
21 | color: '#009ce5',
22 | strokeWidth: 0.2,
23 | svgStyle: {
24 | position: 'fixed',
25 | zIndex: '10001',
26 | top: 0,
27 | left: 0,
28 | right: 0,
29 | maxHeight: '2px'
30 | }
31 | })
32 | line.animate(0.8, {
33 | duration: 500
34 | })
35 | next()
36 | })
37 |
38 | router.afterEach((route) => {
39 | // 设置标题
40 | doc.title = route.meta.title || '首页'
41 | // 进度条结束
42 | if (line) {
43 | line.animate(1, {
44 | duration: 1000
45 | }, () => {
46 | line.destroy()
47 | line = null
48 | })
49 | }
50 | })
51 |
52 | export default router
53 |
--------------------------------------------------------------------------------
/webpack4-ssr-config/client/assets/css/reset.css:
--------------------------------------------------------------------------------
1 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
2 | margin: 0;
3 | padding: 0;
4 | }
5 |
6 | body, button, input, select, textarea {
7 | font: 12PX/1.5 tahoma, arial, 'microsoft yahei', sans-serif
8 | }
9 |
10 | h1, h2, h3, h4, h5, h6 {
11 | font-size: 100%;
12 | }
13 |
14 | address, cite, dfn, em, var {
15 | font-style: normal;
16 | }
17 |
18 | code, kbd, pre, samp {
19 | font-family: couriernew, courier, monospace;
20 | }
21 |
22 | small {
23 | font-size: 12PX;
24 | }
25 |
26 | ul, ol {
27 | list-style: none;
28 | }
29 |
30 | a {
31 | text-decoration: none;
32 | }
33 |
34 | a:hover {
35 | text-decoration: underline;
36 | }
37 |
38 | sup {
39 | vertical-align: text-top;
40 | }
41 |
42 | sub {
43 | vertical-align: text-bottom;
44 | }
45 |
46 | legend {
47 | color: #000;
48 | }
49 |
50 | fieldset, img {
51 | border: 0;
52 | }
53 |
54 | button, input, select, textarea {
55 | font-size: 100%;
56 | }
57 |
58 | table {
59 | border-collapse: collapse;
60 | border-spacing: 0;
61 | }
--------------------------------------------------------------------------------
/webpack3-basic-config/client/assets/css/common.css:
--------------------------------------------------------------------------------
1 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
2 | margin: 0;
3 | padding: 0;
4 | }
5 |
6 | body, button, input, select, textarea {
7 | font: 12PX/1.5 tahoma, arial, 'microsoft yahei', sans-serif
8 | }
9 |
10 | h1, h2, h3, h4, h5, h6 {
11 | font-size: 100%;
12 | }
13 |
14 | address, cite, dfn, em, var {
15 | font-style: normal;
16 | }
17 |
18 | code, kbd, pre, samp {
19 | font-family: couriernew, courier, monospace;
20 | }
21 |
22 | small {
23 | font-size: 12PX;
24 | }
25 |
26 | ul, ol {
27 | list-style: none;
28 | }
29 |
30 | a {
31 | text-decoration: none;
32 | }
33 |
34 | a:hover {
35 | text-decoration: underline;
36 | }
37 |
38 | sup {
39 | vertical-align: text-top;
40 | }
41 |
42 | sub {
43 | vertical-align: text-bottom;
44 | }
45 |
46 | legend {
47 | color: #000;
48 | }
49 |
50 | fieldset, img {
51 | border: 0;
52 | }
53 |
54 | button, input, select, textarea {
55 | font-size: 100%;
56 | }
57 |
58 | table {
59 | border-collapse: collapse;
60 | border-spacing: 0;
61 | }
--------------------------------------------------------------------------------
/webpack3-basic-config/config/vue-loader.conf.js:
--------------------------------------------------------------------------------
1 | const postcss = require('./postcss.conf')()
2 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
3 |
4 | /**
5 | * 组装vue-loader配置
6 | * @param {string} env 环境，可能的值prod|dev
7 | * @return {object} 配置
8 | **/
9 | module.exports = function (env) {
10 | const config = {
11 | loader: 'vue-loader',
12 | options: {
13 | // 去除模板中的空格
14 | preserveWhitespace: false,
15 | // postcss配置,把vue文件中的样式部分,做后续处理
16 | postcss,
17 | },
18 | }
19 | // webpack打包时，提取css
20 | if (env === 'prod') {
21 | // 生产环境
22 | config.options.loaders = {
23 | css: ExtractTextPlugin.extract({
24 | use: ['css-loader'],
25 | fallback: 'vue-style-loader',
26 | }),
27 | stylus: ExtractTextPlugin.extract({
28 | use: ['css-loader', 'stylus-loader'],
29 | fallback: 'vue-style-loader',
30 | }),
31 | }
32 | } else {
33 | // 开发环境
34 | config.options.loaders = {
35 | css: ['vue-style-loader', 'css-loader'],
36 | stylus: ['vue-style-loader', 'css-loader', 'stylus-loader',],
37 | }
38 | }
39 | return config
40 | }
41 |
--------------------------------------------------------------------------------
/react-base-webpack/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | /**
2 | * webpack dev配置
3 | * Created by zdliuccit on 2018/11/1.
4 | */
5 | const webpack = require('webpack')
6 | const merge = require('webpack-merge')
7 | const base = require('./webpack.config.base')()
8 | const appWebpack = require('./../app.config').webpack
9 |
10 | Object.keys(appWebpack.entry).forEach(function (name) {
11 | appWebpack.entry[name] = ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true'].concat(appWebpack.entry[name])
12 | })
13 | const config = merge(base, {
14 | mode: 'development',
15 | devtool: '#cheap-module-source-map',
16 | module: {
17 | rules: [
18 | {
19 | test: /\.css$/,
20 | use: ['style-loader', 'css-loader', 'postcss-loader']
21 | },
22 | {
23 | test: /\.scss$/,
24 | use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
25 | },
26 | ]
27 | },
28 | plugins: [
29 | new webpack.DefinePlugin({
30 | 'process.env': {
31 | NODE_ENV: '"development"',
32 | REACT_ENV: '"client"',
33 | },
34 | }),
35 | new webpack.HotModuleReplacementPlugin(),
36 | ]
37 | }, appWebpack)
38 |
39 | module.exports = config
40 |
--------------------------------------------------------------------------------
/webpack4-basic-config/src/config.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueRouter from 'vue-router'
3 | import http from '@config/utils/http'
4 | import vueLogger from '@config/utils/logger/vue-logger'
5 | import {addRequestInterceptor, addResponseInterceptor} from '@config/utils/http/http'
6 | import elementUI from 'element-ui'
7 | import 'element-ui/lib/theme-chalk/index.css'
8 |
9 | // 引入自定义业务组件
10 | import components from './components'
11 | // 注册插件
12 | Vue.use(http)
13 | Vue.use(vueLogger)
14 | Vue.use(VueRouter)
15 | Vue.use(elementUI)
16 |
17 | components.forEach(comp => {
18 | Vue.component(`ml-${comp.name}`, comp)
19 | })
20 |
21 | // request前自动添加api配置
22 | addRequestInterceptor(
23 | (config) => {
24 | config.url = `/api${config.url}`
25 | return config
26 | },
27 | (error) => {
28 | return Promise.reject(error)
29 | }
30 | )
31 |
32 | // 返回response前处理
33 | addResponseInterceptor(
34 | (response) => {
35 | // 在这里统一前置处理请求响应
36 | if (Number(response.status) !== 200) {
37 | // 全局notify有问题，还是自己处理吧
38 | return Promise.reject(response.data)
39 | }
40 | return Promise.resolve(response.data)
41 | },
42 | (error) => {
43 | return Promise.reject(error || '出错了')
44 | }
45 | )
46 |
--------------------------------------------------------------------------------
/koa-app/app/model/UserModel.js:
--------------------------------------------------------------------------------
1 | /**
2 | * User model
3 | */
4 |
5 | import mongoose, { Schema } from 'mongoose'
6 |
7 | const UserSchema = Schema({
8 | account: {
9 | type: String,
10 | required: true,
11 | trim: true
12 | },
13 | password: {
14 | type: String,
15 | required: true,
16 | trim: true
17 | },
18 | nickName: {
19 | type: String,
20 | required: true,
21 | trim: true
22 | },
23 | phone: {
24 | type: Number,
25 | min: 10,
26 | max: 20,
27 | required: true,
28 | },
29 | createTime: {
30 | type: Date,
31 | default: Date.now
32 | }
33 | });
34 |
35 | UserSchema.statics = {
36 | /**
37 | * 查找
38 | * @param data
39 | */
40 | async findUser(data = {}) {
41 | return await this.findOne(data);
42 | },
43 | /**
44 | * 创建用户
45 | * @param data
46 | */
47 | async register(data = {}) {
48 | const result = await this.create(data);
49 | return result
50 | },
51 | /**
52 | * 删除
53 | * @param data
54 | */
55 | async delete(data) {
56 | const result = await this.remove(data);
57 | return result
58 | },
59 | }
60 |
61 | const UserModel = mongoose.model('User', UserSchema);
62 |
63 | export default UserModel
64 |
--------------------------------------------------------------------------------
/webpack4-ssr-config/config/koa.server.js:
--------------------------------------------------------------------------------
1 | /**
2 | * koa2 server 入口
3 | * Created by zdliuccit on 2018/7/6.
4 | */
5 | const Koa = require('koa')
6 | const koaCompress = require('koa-compress')()
7 |
8 | const loggerMiddleware = require('koa-logger')()
9 | const staticMiddleWare = require('./middle/staticMiddleWare')
10 | const errorMiddleware = require('./middle/errorMiddleWare')
11 | const proxyMiddleWare = require('./middle/proxyMiddleWare')
12 | const vueKoaSSR = require('./vue.koa.ssr')
13 | const currentIP = require('ip').address()
14 |
15 | const appConfig = require('./../app.config')
16 | const uri = `http://${currentIP}:${appConfig.appPort}`
17 |
18 | // koa server
19 | const app = new Koa()
20 |
21 | // 中间件,
22 | const middleWares = [
23 | // 打印请求与响应 日志
24 | loggerMiddleware,
25 | // 压缩响应
26 | koaCompress,
27 | // 错误处理
28 | errorMiddleware,
29 | // 静态资源中间件
30 | staticMiddleWare(),
31 | ]
32 | middleWares.forEach((middleware) => {
33 | if (!middleware) {
34 | return
35 | }
36 | app.use(middleware)
37 | })
38 |
39 | // vue ssr处理
40 | vueKoaSSR(app, uri)
41 |
42 | // http代理中间件
43 | app.use(proxyMiddleWare())
44 |
45 | console.log(`\n> Starting server... ${uri} \n`)
46 |
47 | // 错误处理
48 | app.on('error', (err) => {
49 | // console.error('Server error: \n%s\n%s ', err.stack || '')
50 | })
51 |
52 | app.listen(appConfig.appPort)
53 |
--------------------------------------------------------------------------------
/webpack4-ssr-config/client/store/modules/test.js:
--------------------------------------------------------------------------------
1 | const state = {
2 | count: 0,
3 | testResult: null
4 | }
5 |
6 | const getters = {
7 | getCount: state => state.count,
8 | getTestResult: state => state.testResult
9 | }
10 |
11 | const mutations = {
12 | INCREMENT: (state) => {
13 | state.count++
14 | },
15 | DECREMENT: (state) => {
16 | state.count--
17 | },
18 | INITCOUNT: (state, COUNT) => {
19 | state.count = COUNT
20 | },
21 | TESTRESULT: (state, data) => {
22 | state.testResult = data
23 | }
24 | }
25 |
26 | const actions = {
27 | increment({ state, commit }) {
28 | commit('INCREMENT')
29 | },
30 | decrement({ state, commit }) {
31 | commit('DECREMENT')
32 | },
33 | loading({ commit, rootState: { $http } }) {
34 | // return new Promise(resolve => {
35 | // setTimeout(() => {
36 | // resolve()
37 | // }, 1000)
38 | // }).then(() => {
39 | // commit('INITCOUNT', 67)
40 | // commit('INITCOUNT', 67)
41 | // })
42 | return $http.get('/v3/assistant/coordinate/convert?key=ff0bcf778c5eeb93bd8b068b6e3f7781&locations=116.481499,39.990475|116.481499,39.990375')
43 | .then(res => {
44 | commit('INITCOUNT', 269)
45 | commit('TESTRESULT', res)
46 | })
47 | },
48 | resetCount({ commit }) {
49 | commit('INITCOUNT', 67)
50 | }
51 | }
52 |
53 | export default {
54 | state,
55 | getters,
56 | mutations,
57 | actions
58 | }
59 |
--------------------------------------------------------------------------------
/koa-app/app/plugins/http.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by zdliuccit on 2019/1/14.
3 | * @file axios封装
4 | * export default http 接口请求
5 | * export addRequestInterceptor 请求前拦截器
6 | * export addResponseInterceptor 请求后拦截器
7 | * export setCookies 同步cookie
8 | */
9 | import axios from 'axios'
10 |
11 | const currentIP = require('ip').address()
12 | const appConfig = require('./../../app.config')
13 |
14 | const defaultHeaders = {
15 | Accept: 'application/json, text/plain, */*; charset=utf-8',
16 | 'Content-Type': 'application/json; charset=utf-8',
17 | Pragma: 'no-cache',
18 | 'Cache-Control': 'no-cache',
19 | }
20 | Object.assign(axios.defaults.headers.common, defaultHeaders)
21 |
22 | if (!process.browser) {
23 | axios.defaults.baseURL = `http://${currentIP}:${appConfig.appPort}`
24 | }
25 | const methods = ['get', 'post', 'put', 'delete', 'patch', 'options', 'request', 'head']
26 |
27 | const $http = {}
28 | methods.forEach(method => {
29 | $http[method] = axios[method].bind(axios)
30 | })
31 |
32 | export const addRequestInterceptor = (resolve, reject) => {
33 | if (axios.interceptors.request.handlers.length === 0) axios.interceptors.request.use(resolve, reject)
34 | }
35 | export const addResponseInterceptor = (resolve, reject) => {
36 | if (axios.interceptors.response.handlers.length === 0) axios.interceptors.response.use(resolve, reject)
37 | }
38 | export const setCookies = Cookies => axios.defaults.headers.cookie = Cookies
39 |
40 | export default $http
41 |
--------------------------------------------------------------------------------
/webpack4-ssr-config/config/webpack.server.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * webpack server配置
3 | * Created by zdliuccit on 2018/7/6.
4 | */
5 | const webpack = require('webpack')
6 | const path = require('path')
7 | const merge = require('webpack-merge')
8 | const nodeExternals = require('webpack-node-externals')
9 | const baseConfig = require('./webpack.base.config')()
10 | const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
11 | const isProd = process.env.NODE_ENV === 'production'
12 |
13 | module.exports = merge(baseConfig, {
14 | // 指定生成后的运行环境在node
15 | target: 'node',
16 | mode: isProd ? 'production' : 'development',
17 | // 配置编译的入口文件
18 | entry: path.join(process.cwd(), 'client/entry-server.js'),
19 | // 设置输出文件名，并设置模块导出为commonjs2类型
20 | output: {
21 | filename: 'server-bundle.js',
22 | libraryTarget: 'commonjs2'
23 | },
24 | // 外置化应用程序依赖模块。可以使服务器构建速度更快，
25 | // 并生成较小的 bundle 文件。
26 | externals: nodeExternals({
27 | // 不要外置化 webpack 需要处理的依赖模块。
28 | // 你可以在这里添加更多的文件类型。例如，未处理 *.vue 原始文件，
29 | // 你还应该将修改 `global`（例如 polyfill）的依赖模块列入白名单
30 | whitelist: [/\.vue$/, /\.css$/]
31 | }),
32 | // 这是将服务器的整个输出
33 | // 构建为单个 JSON 文件的插件。
34 | // 默认文件名为 `vue-ssr-server-bundle.json`
35 | plugins: [
36 | new webpack.DefinePlugin({
37 | 'process.env.NODE_ENV': JSON.stringify(isProd ? 'production' : 'development'),
38 | 'process.env.VUE_ENV': '"server"'
39 | }),
40 | new VueSSRServerPlugin()
41 | ]
42 | })
43 |
--------------------------------------------------------------------------------
/webpack/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path')
2 | const ExtractCssChunks = require("extract-css-chunks-webpack-plugin")
3 |
4 | const mlPlugin = require('./loaders/ms-plugin');
5 |
6 | function resolve(dir) {
7 | return path.resolve(process.cwd(), dir)
8 | }
9 |
10 | module.exports = {
11 | mode: 'development',
12 | devtool: '#cheap-module-source-map',
13 | // 入口模块配置
14 | entry: resolve('src/index.js'),
15 | // 输出模块配置
16 | output: {
17 | // 输出到这个目录下
18 | path: resolve('dist'),
19 | // 生成的文件名, [name] 即为entry配置中的key
20 | filename: '[name].js',
21 | // 异步模块文件名
22 | chunkFilename: '[id].js',
23 | publicPath: '/'
24 | },
25 | // 寻找模块时的一些缺省设置
26 | resolveLoader: {
27 | modules: ['node_modules', resolve('loaders')],
28 | },
29 | resolve: {
30 | // 补充扩展名
31 | extensions: ['.js'],
32 | },
33 | module: {
34 | rules: [
35 | {
36 | test: /\.js$/,
37 | use: [{
38 | loader: 'ml-loader',
39 | options: {
40 | name: 'ml',
41 | test: '123213',
42 | }
43 | }],
44 | },
45 | {
46 | test: /\.css$/,
47 | use: [ExtractCssChunks.loader, 'css-loader'],
48 | },
49 | ]
50 | },
51 | plugins: [
52 | new ExtractCssChunks({
53 | filename: 'assets/css/[name].[chunkhash:8].css',
54 | chunkFilename: 'assets/css/[id].[chunkhash:8].css',
55 | }),
56 | new mlPlugin({ tip: '参数' })
57 | ]
58 | }
59 |
--------------------------------------------------------------------------------
/webpack4-ssr-config/config/http/http.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by zdliuccit on 2019/1/14.
3 | * @file axios封装
4 | * export default http 接口请求
5 | * export addRequestInterceptor 请求前拦截器
6 | * export addResponseInterceptor 请求后拦截器
7 | * export setCookies 同步cookie
8 | */
9 | import axios from 'axios'
10 |
11 | const currentIP = require('ip').address()
12 | const appConfig = require('./../../app.config')
13 |
14 | const defaultHeaders = {
15 | Accept: 'application/json, text/plain, */*; charset=utf-8',
16 | 'Content-Type': 'application/json; charset=utf-8',
17 | Pragma: 'no-cache',
18 | 'Cache-Control': 'no-cache',
19 | }
20 | Object.assign(axios.defaults.headers.common, defaultHeaders)
21 |
22 | if (!process.browser) {
23 | axios.defaults.baseURL = `http://${currentIP}:${appConfig.appPort}`
24 | }
25 | const methods = ['get', 'post', 'put', 'delete', 'patch', 'options', 'request', 'head']
26 |
27 | const http = {}
28 | methods.forEach(method => {
29 | http[method] = axios[method].bind(axios)
30 | })
31 |
32 | export const addRequestInterceptor = (resolve, reject) => {
33 | if (axios.interceptors.request.handlers.length === 0) axios.interceptors.request.use(resolve, reject)
34 | }
35 | export const addResponseInterceptor = (resolve, reject) => {
36 | if (axios.interceptors.response.handlers.length === 0) axios.interceptors.response.use(resolve, reject)
37 | }
38 | export const setCookies = Cookies => axios.defaults.headers.cookie = Cookies
39 |
40 | export default http
41 |
--------------------------------------------------------------------------------
/react-base-webpack/config/middle/proxyToken.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by zdliuccit on 2018/11/1.
3 | * proxyMiddleWare中间件token处理
4 | * @type {string}
5 | */
6 | const logger = require('../logger/koa-logger')('proxyToken')
7 | // 带token http头
8 | const accessTokenHeaderName = 'x-access-token'
9 | // 请求来源 http头
10 | const accessOriginHeaderName = 'x-access-origin'
11 |
12 | // 默认cookie配置
13 | const defaultCookieConfig = {
14 | name: '_atk',
15 | httpOnly: true,
16 | overwrite: true,
17 | // 长期有效(20年)
18 | maxAge: 1000 * 60 * 60 * 24 * 365 * 20,
19 | }
20 |
21 | module.exports = function createRedis() {
22 | const cookieConfig = Object.assign({}, defaultCookieConfig)
23 | return {
24 | // 处理请求时的token操作
25 | async handleRequest(ctx) {
26 | return {
27 | [accessOriginHeaderName]: ctx.query.accessOrigin || 'WAP',
28 | }
29 | },
30 |
31 | // 处理响应时的token操作
32 | async handleResponse(ctx) {
33 | logger.info('HandleResponse headers:', ctx.response.headers)
34 | const responseToken = ctx.response.headers[accessTokenHeaderName]
35 |
36 | // 如果后端响应头里没有token，则不设置cookie
37 | if (!responseToken) return
38 | logger.info(`Token found: ${responseToken}', it will be set to cookie.`)
39 |
40 | // 这里koa-better-http-proxy已经把代理响应头复制到原始响应头了
41 | ctx.cookies.set(cookieConfig.name, responseToken, cookieConfig)
42 |
43 | // 删除代理响应的"X-Access-Token"http头
44 | delete ctx.response.headers[accessTokenHeaderName]
45 | delete ctx.response.headers[accessOriginHeaderName]
46 | },
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/webpack3-basic-config/config/utils/token.js:
--------------------------------------------------------------------------------
1 | /**
2 | * token处理
3 | * @type {string}
4 | */
5 | const logger = require('./logger/koa-logger')('proxyMiddleWare')
6 | // 带token http头
7 | const accessTokenHeaderName = 'x-access-token'
8 | // 请求来源 http头
9 | const accessOriginHeaderName = 'x-access-origin'
10 |
11 | // 默认cookie配置
12 | const defaultCookieConfig = {
13 | name: '_atk',
14 | httpOnly: true,
15 | overwrite: true,
16 | // 长期有效(20年)
17 | maxAge: 1000 * 60 * 60 * 24 * 365 * 20,
18 | }
19 |
20 | module.exports = function createRedis () {
21 | const cookieConfig = Object.assign({}, defaultCookieConfig)
22 |
23 | return {
24 | /**
25 | * 处理请求时的token操作
26 | * @param {ctx} ctx - koa ctx
27 | * @return {Object} - 需要添加的header头
28 | */
29 | async handleRequest(ctx) {
30 | return {
31 | [accessOriginHeaderName]: ctx.query.accessOrigin || 'WAP',
32 | }
33 | },
34 | /**
35 | * 处理响应时的token操作
36 | * @param {ctx} ctx - koa ctx
37 | */
38 | async handleResponse(ctx) {
39 | logger.info('HandleResponse headers:', ctx.response.headers)
40 | const responseToken = ctx.response.headers[accessTokenHeaderName]
41 | // 如果后端响应头里没有token，则不设置cookie
42 | if (!responseToken) {
43 | return
44 | }
45 | logger.info(`Token found: ${responseToken}', it will be set to cookie.`)
46 | // 这里koa-better-http-proxy已经把代理响应头复制到原始响应头了
47 | ctx.cookies.set(cookieConfig.name, responseToken, cookieConfig)
48 |
49 | // 删除代理响应的"X-Access-Token"http头
50 | delete ctx.response.headers[accessTokenHeaderName]
51 | delete ctx.response.headers[accessOriginHeaderName]
52 | },
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/webpack4-basic-config/config/utils/token.js:
--------------------------------------------------------------------------------
1 | /**
2 | * token处理
3 | * @type {string}
4 | */
5 | const logger = require('./logger/koa-logger')('proxyMiddleWare')
6 | // 带token http头
7 | const accessTokenHeaderName = 'x-access-token'
8 | // 请求来源 http头
9 | const accessOriginHeaderName = 'x-access-origin'
10 |
11 | // 默认cookie配置
12 | const defaultCookieConfig = {
13 | name: '_atk',
14 | httpOnly: true,
15 | overwrite: true,
16 | // 长期有效(20年)
17 | maxAge: 1000 * 60 * 60 * 24 * 365 * 20,
18 | }
19 |
20 | module.exports = function createRedis () {
21 | const cookieConfig = Object.assign({}, defaultCookieConfig)
22 |
23 | return {
24 | /**
25 | * 处理请求时的token操作
26 | * @param {ctx} ctx - koa ctx
27 | * @return {Object} - 需要添加的header头
28 | */
29 | async handleRequest(ctx) {
30 | return {
31 | [accessOriginHeaderName]: ctx.query.accessOrigin || 'WAP',
32 | }
33 | },
34 | /**
35 | * 处理响应时的token操作
36 | * @param {ctx} ctx - koa ctx
37 | */
38 | async handleResponse(ctx) {
39 | logger.info('HandleResponse headers:', ctx.response.headers)
40 | const responseToken = ctx.response.headers[accessTokenHeaderName]
41 | // 如果后端响应头里没有token，则不设置cookie
42 | if (!responseToken) {
43 | return
44 | }
45 | logger.info(`Token found: ${responseToken}', it will be set to cookie.`)
46 | // 这里koa-better-http-proxy已经把代理响应头复制到原始响应头了
47 | ctx.cookies.set(cookieConfig.name, responseToken, cookieConfig)
48 |
49 | // 删除代理响应的"X-Access-Token"http头
50 | delete ctx.response.headers[accessTokenHeaderName]
51 | delete ctx.response.headers[accessOriginHeaderName]
52 | },
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/webpack3-basic-config/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by liuzhengdong on 2017/7/6.
3 | */
4 | const webpack = require('webpack')
5 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
6 |
7 | const config = require('./webpack.config.base')('dev')
8 | const postcss = require('./postcss.conf')()
9 |
10 | // cheap-module-eval-source-map is faster for development
11 | config.devtool = '#cheap-module-source-map'
12 |
13 | // add hot-reload related code to entry chunks
14 | Object.keys(config.entry).forEach(function (name) {
15 | config.entry[name] = ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true'].concat(config.entry[name])
16 | })
17 |
18 | config.module.rules.push(
19 | {
20 | test: /\.css$/,
21 | use: ['style-loader', 'css-loader', {
22 | loader: 'postcss-loader',
23 | options: { plugins: postcss, sourceMap: 'inline' }
24 | }],
25 | },
26 | {
27 | test: /\.(styl|stylus)$/,
28 | use: ['style-loader', 'css-loader', {
29 | loader: 'postcss-loader',
30 | options: { plugins: postcss, sourceMap: 'inline' }
31 | },
32 | 'stylus-loader'
33 | ],
34 | }
35 | )
36 | config.plugins = (config.plugins || []).concat([
37 | //你可以理解为，通过配置了DefinePlugin，那么这里面的标识就相当于全局变量，你的业务代码可以直接使用配置的标识。
38 | new webpack.DefinePlugin({
39 | 'process.env': {
40 | NODE_ENV: '"development"',
41 | VUE_ENV: '"client"',
42 | },
43 | }),
44 | // new webpack.optimize.MinChunkSizePlugin({
45 | // minChunkSize: 100000 // Minimum number of characters
46 | // }),
47 | // 全局开启代码热替换
48 | new webpack.HotModuleReplacementPlugin(),
49 | new webpack.NoEmitOnErrorsPlugin(),
50 | new FriendlyErrorsPlugin(),
51 | ])
52 |
53 | module.exports = config
54 |
--------------------------------------------------------------------------------
/webpack4-basic-config/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
1 | /**
2 | * webpack server配置
3 | * Created by zdliuccit on 2018/7/6.
4 | */
5 | const webpack = require('webpack')
6 | const merge = require('webpack-merge')
7 | const config = require('./webpack.config.base')()
8 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
9 | const ExtractCssChunks = require("extract-css-chunks-webpack-plugin")
10 |
11 | module.exports = merge(config, {
12 | // 设置代码调试map
13 | devtool: false,
14 | mode: 'production',
15 | optimization: {
16 | runtimeChunk: {
17 | name: 'ml-node'
18 | },
19 | splitChunks: {
20 | cacheGroups: {
21 | commons: {
22 | chunks: 'initial',
23 | minChunks: 5,
24 | },
25 | vendor: {
26 | chunks: 'all',
27 | name: 'vendor',
28 | test: /node_modules/,
29 | priority: -10,
30 | reuseExistingChunk: false,
31 | },
32 | },
33 | },
34 | },
35 | plugins: [
36 | new webpack.DefinePlugin({
37 | 'process.env': {
38 | NODE_ENV: JSON.stringify("production"),
39 | },
40 | }),
41 | new ExtractCssChunks({
42 | filename: 'assets/css/[name].[chunkhash:8].css',
43 | chunkFilename: 'assets/css/[id].[chunkhash:8].css',
44 | }),
45 | // 限制文件最小KB
46 | new webpack.optimize.MinChunkSizePlugin({
47 | minChunkSize: 20000
48 | }),
49 | new OptimizeCssAssetsPlugin(
50 | {
51 | cssProcessor: require('cssnano'),
52 | cssProcessorOptions: {
53 | // postcss那边已经处理过autoprefixer了，这里把它关掉，否则会导致浏览器前缀兼容范围问题
54 | autoprefixer: false,
55 | discardComments: {removeAll: true}
56 | },
57 | }
58 | ),]
59 | })
60 |
--------------------------------------------------------------------------------
/webpack3-basic-config/config/utils/httpMiddleWare.js:
--------------------------------------------------------------------------------
1 | /**
2 | * http中间件
3 | * 为ctx添加http方法, 然后在后续的路由中, ctx.http.get(url: '/url') 即可
4 | */
5 | const axios = require('axios')
6 |
7 | const methods = ['get', 'post', 'put', 'delete']
8 |
9 | /**
10 | * 默认请求头
11 | */
12 | const defaultHeaders = {
13 | Accept: 'application/json, text/plain, */*; charset=utf-8',
14 | 'Content-Type': 'application/json; charset=utf-8',
15 | Pragma: 'no-cache',
16 | 'Cache-Control': 'no-cache',
17 | }
18 |
19 | const axiosInstance = axios.create({
20 | timeout: 20 * 1000,
21 | headers: defaultHeaders,
22 | })
23 |
24 | // http request 拦截器
25 | axiosInstance.interceptors.request.use(
26 | (config) => {
27 | config._reqeustStartTimestamp = Date.now()
28 | return config
29 | },
30 | (error) => {
31 | return Promise.reject(error)
32 | }
33 | )
34 |
35 | // http response 拦截器
36 | axiosInstance.interceptors.response.use(
37 | (response) => {
38 | return response
39 | },
40 | (error) => {
41 | return Promise.reject(error)
42 | }
43 | )
44 |
45 | /**
46 | * @returns {Function} ctx function
47 | */
48 | module.exports = function () {
49 | return function httpMiddleware (ctx, next) {
50 | const http = {}
51 | methods.forEach(method => {
52 | http[method] = (...args) => {
53 | let config
54 | const emptyConfig = { headers: {} }
55 | // axios的get和delete方法木有body，只能接受两个参数
56 | if (method === 'get' || method === 'delete') {
57 | config = args[1] = args[1] || emptyConfig
58 | } else {
59 | config = args[2] = args[2] || emptyConfig
60 | }
61 | // 把浏览器的cookie的带上
62 | config.headers.cookie = ctx.req.headers.cookie || ''
63 | return axiosInstance[method](...args)
64 | }
65 | })
66 | ctx.http = http
67 | return next()
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/webpack3-basic-config/config/koa-prod-server.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by liuzhengdong on 2017/7/13.
3 | */
4 | const Koa = require('koa')
5 | const KoaRouter = require('koa-router')()
6 | const currentIP = require('ip').address()
7 |
8 | const appConfig = require('./../app.config')
9 |
10 | const loggerMiddleware = require('koa-logger')()
11 | const errorMiddleware = require('./utils/errorMiddleWare')
12 | const staticMiddleWare = require('./utils/staticMiddleWare')
13 | const setCookieMiddleware = require('./utils/setCookieMiddleWare')
14 | const httpMiddleware = require('./utils/httpMiddleWare')
15 | const spaMiddleWare = require('./utils/spaMiddleWare')
16 | const proxyMiddleware = require('./utils/proxyMiddleWare')
17 |
18 | const app = new Koa()
19 | const uri = 'http://' + currentIP + ':' + appConfig.appPort
20 |
21 | // 中间件,一组async函数，generator函数需要convert转换
22 | const middleWares = [
23 | // 打印请求与响应 日志
24 | loggerMiddleware,
25 | // 静态资源中间件
26 | staticMiddleWare(),
27 | // 压缩响应
28 | require('koa-compress')(),
29 | // 错误处理
30 | errorMiddleware,
31 | // 手动设置cookie方法
32 | setCookieMiddleware,
33 | // http中间件
34 | httpMiddleware(),
35 | // spa单页应用处理,非api后段请求返回index.html
36 | spaMiddleWare(),
37 | // 插入自定义中间件
38 | ...appConfig.middleWares,
39 | // 路由
40 | KoaRouter.middleware(),
41 | // 代理中间件
42 | proxyMiddleware(),
43 | ]
44 |
45 | middleWares.forEach((middleware) => {
46 | if (!middleware) {
47 | return
48 | }
49 | app.use(middleware)
50 | })
51 |
52 | console.log('> Starting production server address >>> ' + uri)
53 | // 错误处理
54 | app.on('error', (err) => {
55 | console.error('Server error: \n%s\n%s ', err.stack || '')
56 | })
57 |
58 | const server = app.listen(appConfig.appPort)
59 |
60 | process.on('SIGTERM', () => {
61 | console.log('Stopping dev server')
62 | devMiddleware.close()
63 | server.close(() => {
64 | process.exit(0)
65 | })
66 | })
--------------------------------------------------------------------------------
/webpack4-ssr-config/client/entry-client.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @file 运行于浏览器
3 | * Created by zdliuccit on 2018/7/6.
4 | * */
5 | import Vue from 'vue'
6 |
7 | import { createApp } from './index'
8 | import ProgressBar from './components/ProgressBar.vue'
9 | // 引入http请求
10 | import http from './../config/http/http'
11 | // global progress bar
12 | const bar = Vue.prototype.$bar = new Vue(ProgressBar).$mount()
13 | document.body.appendChild(bar.$el)
14 |
15 | // a global mixin that calls `asyncData` when a route component's params change
16 | Vue.mixin({
17 | beforeRouteUpdate(to, from, next) {
18 | const { asyncData } = this.$options
19 | if (asyncData) {
20 | asyncData({ store: this.$store, route: to })
21 | .then(next)
22 | .catch(next)
23 | } else {
24 | next()
25 | }
26 | }
27 | })
28 |
29 | const { app, router, store } = createApp()
30 |
31 | // prime the store with server-initialized state.
32 | // the state is determined during SSR and inlined in the page markup.
33 | if (window.__INITIAL_STATE__) {
34 | store.replaceState(window.__INITIAL_STATE__)
35 | // 客户端和服务端保持一致
36 | store.state.$http = http
37 | }
38 |
39 | router.onReady(() => {
40 | router.beforeResolve((to, from, next) => {
41 | const matched = router.getMatchedComponents(to)
42 | const prevMatched = router.getMatchedComponents(from)
43 | let diffed = false
44 | const activated = matched.filter((c, i) => {
45 | return diffed || (diffed = (prevMatched[i] !== c))
46 | })
47 | const asyncDataHooks = activated.map(c => c.asyncData).filter(_ => _)
48 | if (!asyncDataHooks.length) {
49 | return next()
50 | }
51 | bar.start()
52 | Promise.all(asyncDataHooks.map(hook => hook({ store, router, route: to })))
53 | .then(() => {
54 | bar.finish()
55 | next()
56 | })
57 | .catch(next)
58 | })
59 |
60 | app.$mount('#app')
61 | })
--------------------------------------------------------------------------------
/webpack4-ssr-config/client/entry-server.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 运行于服务器
3 | * Created by zdliuccit on 2018/7/6.
4 | * */
5 |
6 | import { createApp } from './index'
7 |
8 | // 引入http请求
9 | import http from './../config/http/http'
10 | // 处理ssr期间cookies穿透
11 | import { setCookies } from './../config/http/http'
12 |
13 | const { app } = createApp()
14 |
15 | // 这里假定 App.vue 模板中根元素具有 `id="app"`
16 | app.$mount('#app')
17 |
18 | export default context => {
19 | // 因为有可能会是异步路由钩子函数或组件，所以我们将返回一个 Promise，
20 | // 以便服务器能够等待所有的内容在渲染前，
21 | // 就已经准备就绪。
22 | return new Promise((resolve, reject) => {
23 | const { app, router, store } = createApp()
24 |
25 | const { url } = context
26 | const { fullPath } = router.resolve(url).route
27 |
28 | if (fullPath !== url) {
29 | return reject({ url: fullPath })
30 | }
31 |
32 | // 设置服务器端 router 的位置,路由配置里如果设置过base，url需要把url.replace(base,'')掉，不然会404
33 | router.push(url)
34 |
35 | // 等到 router 将可能的异步组件和钩子函数解析完
36 | router.onReady(() => {
37 | // 获取该url路由下的所有Component，这些组件定义在Vue Router中。
38 | const matchedComponents = router.getMatchedComponents()
39 | // 匹配不到的路由，执行 reject 函数，并返回 404
40 | if (!matchedComponents.length) {
41 | return reject({ code: 404 })
42 | }
43 | // SSR期间同步cookies
44 | setCookies(context.cookies || {})
45 | // http注入到rootState上，方便store里调用
46 | store.state.$http = http
47 | // 使用Promise.all执行匹配到的Component的asyncData方法，即预取数据
48 | Promise.all(matchedComponents.map(({ asyncData }) => asyncData && asyncData({
49 | store,
50 | router,
51 | route: router.currentRoute,
52 | }))).then(() => {
53 | // 在所有预取钩子(preFetch hook) resolve 后，
54 | // 我们的 store 现在已经填充入渲染应用程序所需的状态。
55 | // 当我们将状态附加到上下文，
56 | // 并且 `template` 选项用于 renderer 时，
57 | // 状态将自动序列化为 `window.__INITIAL_STATE__`，并注入 HTML。
58 | context.state = store.state
59 | resolve(app)
60 | }).catch(reject)
61 | }, reject)
62 | })
63 | }
--------------------------------------------------------------------------------
/webpack4-ssr-config/client/views/home.vue:
--------------------------------------------------------------------------------
1 |
2 | proxy配置(项目目录constants.js文件中): { '/api': 'http://restapi.amap.com' }
4 |接口URL: {{requestUrl}}
5 | API接口测试 6 |result:{{result}}
7 |
3 |
17 |
18 |
23 |
--------------------------------------------------------------------------------
/webpack3-basic-config/client/view/index.vue:
--------------------------------------------------------------------------------
1 |
2 | Webpack4 + Vue2 + Koa2 构建SSR应用脚手架
4 |
5 |
6 |
11 |
16 | -
12 |
- Vuex数据处理 13 |
- Axios ajax数据接口请求 14 |
3 | 
4 |
15 |
16 |
47 |
71 |
78 |
--------------------------------------------------------------------------------
/webpack3-basic-config/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by liuzhengdong on 2017/7/6.
3 | */
4 | const path = require('path')
5 | const webpack = require('webpack')
6 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
7 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
8 | const config = require('./webpack.config.base')('prod')
9 | const postcss = require('./postcss.conf')()
10 |
11 | config.output.filename = '[name].[chunkhash:7].js'
12 | config.output.chunkFilename = '[id].[chunkhash:7].js'
13 |
14 | config.devtool = false
15 |
16 | config.module.rules.push(
17 | {
18 | test: /\.css$/,
19 | use: ExtractTextPlugin.extract({
20 | use: ['css-loader', { loader: 'postcss-loader', options: { plugins: postcss } }],
21 | fallback: 'style-loader',
22 | }),
23 | },
24 | {
25 | test: /\.styl$/,
26 | use: ExtractTextPlugin.extract({
27 | use: ['css-loader', { loader: 'postcss-loader', options: { plugins: postcss } }, 'stylus-loader'],
28 | fallback: 'style-loader',
29 | }),
30 | }
31 | )
32 |
33 | config.plugins = (config.plugins || []).concat([
34 | new webpack.LoaderOptionsPlugin({
35 | // webpack 2.0之后,这边不配置px转rem不会成功！！！蛋疼
36 | options: {
37 | postcss: postcss
38 | },
39 | }),
40 | // 定义全局常量
41 | new webpack.DefinePlugin({
42 | 'process.env': {
43 | //注意一个单引号一个双引号…… 这里是要将 "production" 替换到文件里面
44 | NODE_ENV: JSON.stringify("production"),
45 | VUE_ENV: JSON.stringify("client"),
46 | },
47 | }),
48 | // 合并公共模块为单独文件
49 | new webpack.optimize.CommonsChunkPlugin({
50 | name: 'vendor',
51 | filename: 'vendor-[hash].min.js',
52 | }),
53 | // js压缩
54 | new webpack.optimize.UglifyJsPlugin({
55 | comments: false, // 去掉注释
56 | compress: {
57 | warnings: false, // 不显示警告
58 | drop_console: false,
59 | },
60 | }),
61 | // 分离css文件
62 | new ExtractTextPlugin('[name].[contenthash:8].css'),
63 |
64 | // optimize \ minimize CSS assets
65 | new OptimizeCSSPlugin({
66 | cssProcessorOptions: {
67 | safe: true,
68 | // postcss那边已经处理过autoprefixer了，这里把它关掉，否则会导致浏览器前缀兼容范围问题
69 | autoprefixer: false,
70 | },
71 | }),
72 | ])
73 |
74 | module.exports = config
75 |
--------------------------------------------------------------------------------
/react-base-webpack/config/koa.server.js:
--------------------------------------------------------------------------------
1 | /**
2 | * koa2 server 入口
3 | * Created by zdliuccit on 2018/11/1.
4 | */
5 | const Koa = require('koa')
6 | const convert = require('koa-convert')
7 | const webpack = require('webpack')
8 | const merge = require('webpack-merge')
9 |
10 | const KoaRouter = require('koa-router')()
11 | const koaCompress = require('koa-compress')()
12 | const loggerMiddleware = require('koa-logger')()
13 | const errorMiddleware = require('./middle/errorMiddleWare')
14 | const proxyMiddleware = require('./middle/proxyMiddleWare')
15 | const spaMiddleWare = require('./middle/spaMiddleWare')
16 | const webpackDevMiddleware = require('koa-webpack-dev-middleware')
17 | const webpackHotMiddleware = require('koa-webpack-hot-middleware')
18 |
19 | const opn = require('opn')
20 | const config = merge(require('./webpack.config.dev'))
21 | const appConfig = require('./../app.config')
22 | const currentIP = require('ip').address()
23 | const uri = `http://${currentIP}:${appConfig.appPort}`
24 | const clientCompiler = webpack(config)
25 | const devMiddleware = webpackDevMiddleware(clientCompiler, {
26 | publicPath: config.output.publicPath,
27 | headers: {'Access-Control-Allow-Origin': '*'},
28 | stats: {
29 | colors: true,
30 | modules: false,
31 | },
32 | noInfo: false,
33 | })
34 | // koa server
35 | const app = new Koa()
36 |
37 | // 中间件,一组async函数，generator函数需要convert转换
38 | const middleWares = [
39 | // 打印请求与响应 日志
40 | loggerMiddleware,
41 | // 压缩响应
42 | koaCompress,
43 | // 错误处理
44 | errorMiddleware,
45 | // webpack开发中间件
46 | convert(devMiddleware),
47 | // webpack热替换中间件
48 | convert(webpackHotMiddleware(clientCompiler)),
49 | // spa单页应用处理,非api后段请求返回index.html
50 | spaMiddleWare(),
51 | // 路由
52 | KoaRouter.middleware(),
53 | // 代理中间件
54 | proxyMiddleware(),
55 | ]
56 |
57 | middleWares.forEach((middleware) => {
58 | if (!middleware) return
59 | app.use(middleware)
60 | })
61 |
62 | console.log('> Starting dev server...')
63 |
64 | devMiddleware.waitUntilValid(() => {
65 | console.log('> Listening at ' + uri + '\n')
66 | // opn(uri)
67 | })
68 |
69 | // 错误处理
70 | app.on('error', (err) => {
71 | console.error('Server error: \n%s\n%s ', err.stack || '')
72 | })
73 |
74 | app.listen(appConfig.appPort)
75 |
76 |
--------------------------------------------------------------------------------
/react-base-webpack/config/middle/spaMiddleWare.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by zdliuccit on 2018/11/1.
3 | * 基于 https://github.com/bripkens/connect-history-api-fallback 改造
4 | */
5 | const path = require('path')
6 | const fs = require('fs')
7 | const logger = require('./../logger/koa-logger')('spaMiddleWare')
8 | const currentIP = require('ip').address()
9 |
10 | const IS_DEBUG = true
11 | const appConfig = require('./../../app.config')
12 |
13 | const defaultOptions = { include: /^\/(api|static|public|v3)/ }
14 |
15 | /**
16 | * 读取构建过的文件，public目录下
17 | * @param {String} filename 文件名
18 | * @return {String} 文件内容
19 | */
20 | function readBuiltFile(filename) {
21 | return fs.readFileSync(path.join(process.cwd(), 'dist', filename), 'utf-8')
22 | }
23 |
24 | let indexHTML
25 |
26 | // 生产模式
27 | if (!IS_DEBUG) {
28 | indexHTML = readBuiltFile('index.html')
29 | }
30 |
31 | /**
32 | * 单页应用中间件
33 | * @param {Object} options 配置项
34 | * @return {function} 中间件
35 | */
36 | module.exports = function (options) {
37 | options = Object.assign({}, defaultOptions, options)
38 | return async function spa(ctx, next) {
39 | if (!options.include.test(ctx.url)) {
40 | /**
41 | * 开发模式从koa2服务中获取index
42 | */
43 | await new Promise((resolve) => {
44 | if (indexHTML && !IS_DEBUG) {
45 | resolve()
46 | } else {
47 | require('http').get('http://' + currentIP + ':' + appConfig.appPort, (res) => {
48 | res.on('data', (chunk) => {
49 | logger.info('Fetching index.html succeed.')
50 | indexHTML = chunk.toString('utf-8')
51 | resolve()
52 | })
53 | }).on('error', (e) => {
54 | logger.error(`Fetching index.html error: ${e.message}`)
55 | process.exit(1)
56 | })
57 | }
58 | }).then(doRender)
59 |
60 | /**
61 | * 返回HTML
62 | */
63 | function doRender() {
64 | const res = ctx.res
65 | res.statusCode = 200
66 | // 这句很重要，否则会影响到weinre调试
67 | res.setHeader('Content-Type', 'text/html; charset=utf-8')
68 | res.end(`${indexHTML}`)
69 | logger.info('Page routing request')
70 | }
71 | } else {
72 | return next()
73 | }
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/webpack3-basic-config/config/utils/spaMiddleWare.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 基于 https://github.com/bripkens/connect-history-api-fallback 改造
3 | */
4 | const path = require('path')
5 | const fs = require('fs')
6 | const logger = require('./logger/koa-logger')('spaMiddleWare')
7 | const currentIP = require('ip').address()
8 |
9 | const {IS_DEBUG} = require('../utils/env')
10 | const appConfig = require('./../../app.config')
11 |
12 | const defaultOptions = {include: /^\/(api|static|public|v3)/}
13 |
14 | /**
15 | * 读取构建过的文件，public目录下
16 | * @param {String} filename 文件名
17 | * @return {String} 文件内容
18 | */
19 | function readBuiltFile(filename) {
20 | return fs.readFileSync(path.join(process.cwd(), 'public', filename), 'utf-8')
21 | }
22 |
23 | let indexHTML
24 |
25 | // 生产模式
26 | if (!IS_DEBUG) {
27 | indexHTML = readBuiltFile('index.html')
28 | }
29 |
30 | /**
31 | * 单页应用中间件
32 | * @param {Object} options 配置项
33 | * @return {function} 中间件
34 | */
35 | module.exports = function (options) {
36 | options = Object.assign({}, defaultOptions, options)
37 | return async function spa(ctx, next) {
38 | if (!options.include.test(ctx.url)) {
39 | /**
40 | * 开发模式从koa2服务中获取index
41 | */
42 | await new Promise((resolve) => {
43 | if (indexHTML && !IS_DEBUG) {
44 | resolve()
45 | } else {
46 | require('http').get('http://' + currentIP + ':' + appConfig.appPort, (res) => {
47 | res.on('data', (chunk) => {
48 | logger.info('Fetching index.html succeed.')
49 | indexHTML = chunk.toString('utf-8')
50 | resolve()
51 | })
52 | }).on('error', (e) => {
53 | logger.error(`Fetching index.html error: ${e.message}`)
54 | process.exit(1)
55 | })
56 | }
57 | }).then(doRender)
58 |
59 | /**
60 | * 返回HTML
61 | */
62 | function doRender() {
63 | const res = ctx.res
64 | res.statusCode = 200
65 | // 这句很重要，否则会影响到weinre调试
66 | res.setHeader('Content-Type', 'text/html; charset=utf-8')
67 | res.end(`${indexHTML}`)
68 | logger.info('Page routing request')
69 | return
70 | }
71 | } else {
72 | return next()
73 | }
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/webpack4-basic-config/config/utils/spaMiddleWare.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 基于 https://github.com/bripkens/connect-history-api-fallback 改造
3 | */
4 | const path = require('path')
5 | const fs = require('fs')
6 | const logger = require('./logger/koa-logger')('spaMiddleWare')
7 | const currentIP = require('ip').address()
8 |
9 | const {IS_DEBUG} = require('../utils/env')
10 | const appConfig = require('./../../app.config')
11 |
12 | const defaultOptions = {include: /^\/(api|static|public|v3)/}
13 |
14 | /**
15 | * 读取构建过的文件，public目录下
16 | * @param {String} filename 文件名
17 | * @return {String} 文件内容
18 | */
19 | function readBuiltFile(filename) {
20 | return fs.readFileSync(path.join(process.cwd(), 'public', filename), 'utf-8')
21 | }
22 |
23 | let indexHTML
24 |
25 | // 生产模式
26 | if (!IS_DEBUG) {
27 | indexHTML = readBuiltFile('index.html')
28 | }
29 |
30 | /**
31 | * 单页应用中间件
32 | * @param {Object} options 配置项
33 | * @return {function} 中间件
34 | */
35 | module.exports = function (options) {
36 | options = Object.assign({}, defaultOptions, options)
37 | return async function spa(ctx, next) {
38 | if (!options.include.test(ctx.url)) {
39 | /**
40 | * 开发模式从koa2服务中获取index
41 | */
42 | await new Promise((resolve) => {
43 | if (indexHTML && !IS_DEBUG) {
44 | resolve()
45 | } else {
46 | require('http').get('http://' + currentIP + ':' + appConfig.appPort, (res) => {
47 | res.on('data', (chunk) => {
48 | logger.info('Fetching index.html succeed.')
49 | indexHTML = chunk.toString('utf-8')
50 | resolve()
51 | })
52 | }).on('error', (e) => {
53 | logger.error(`Fetching index.html error: ${e.message}`)
54 | process.exit(1)
55 | })
56 | }
57 | }).then(doRender)
58 |
59 | /**
60 | * 返回HTML
61 | */
62 | function doRender() {
63 | const res = ctx.res
64 | res.statusCode = 200
65 | // 这句很重要，否则会影响到weinre调试
66 | res.setHeader('Content-Type', 'text/html; charset=utf-8')
67 | res.end(`${indexHTML}`)
68 | logger.info('Page routing request')
69 | return
70 | }
71 | } else {
72 | return next()
73 | }
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/webpack3-basic-config/config/utils/logger/vue-logger.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by liuzhengdong on 2017/9/21.
3 | * 日志打印器 class
4 | */
5 | import { IS_DEBUG } from './../env'
6 |
7 | class Logger {
8 | /**
9 | * 构造函数
10 | * @param filename 调用的文件名
11 | */
12 | constructor (filename) {
13 | this.filename = filename
14 | }
15 | }
16 |
17 | /**
18 | * 定义方法
19 | * @type {{info: string, log: string, warn: string, error: string}}
20 | */
21 | const methods = {
22 | log: 'color: green',
23 | info: 'color:#6495ED',
24 | warn: 'color: #cc33cc',
25 | error: 'color: red',
26 | }
27 | /**
28 | * 将方法绑定到原型上
29 | */
30 | Object.entries(methods).forEach(([method, color]) => {
31 | Logger.prototype[method] = function (...args) {
32 | // 非生产环境
33 | if (!IS_DEBUG) {
34 | return
35 | }
36 | args.unshift(`%c[${this.filename}]:`, color)
37 | console[method](...args)
38 | }
39 | })
40 |
41 | /**
42 | * 定义 VueLogger class
43 | */
44 | class VueLogger {
45 | constructor (filename) {
46 | const logger = new Logger(filename)
47 | Object.keys(methods).forEach(method => {
48 | this[method] = (vm, ...args) => {
49 | // 不存在vue实例时，简单打印
50 | if (!vm) {
51 | return
52 | }
53 | if (vm._isVue !== true) {
54 | logger[method].call(logger, vm, ...args)
55 | return
56 | }
57 | // 组件当前__file
58 | const filePath = vm.$options._parentVnode.componentOptions.Ctor.options.__file
59 | // 截取组件名称
60 | const componentName = filePath.slice(filePath.lastIndexOf('/') + 1) || '(unkonwn component name)'
61 | // 当前路由路径
62 | const fullPath = vm.$route.fullPath || '(unkonwn route fullPath)'
63 | logger[method].call(logger, ...args, `@${componentName}`, `#${fullPath}`)
64 | }
65 | })
66 | }
67 | }
68 |
69 | const vueLogger = new VueLogger('component')
70 | const componentLogger = {}
71 | /**
72 | * 暴露install钩子，供vue注册
73 | * @param {Vue} Vue - Vue构造器类
74 | */
75 | componentLogger.install = function (Vue) { // 基础打印器
76 | Object.keys(methods).forEach((method) => {
77 | Vue.prototype[method] = function (...args) {
78 | vueLogger[method].call({}, this, ...args)
79 | }
80 | })
81 | }
82 |
83 | export default componentLogger
--------------------------------------------------------------------------------
/webpack4-basic-config/config/utils/logger/vue-logger.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by liuzhengdong on 2017/9/21.
3 | * 日志打印器 class
4 | */
5 | import { IS_DEBUG } from './../env'
6 |
7 | class Logger {
8 | /**
9 | * 构造函数
10 | * @param filename 调用的文件名
11 | */
12 | constructor (filename) {
13 | this.filename = filename
14 | }
15 | }
16 |
17 | /**
18 | * 定义方法
19 | * @type {{info: string, log: string, warn: string, error: string}}
20 | */
21 | const methods = {
22 | log: 'color: green',
23 | info: 'color:#6495ED',
24 | warn: 'color: #cc33cc',
25 | error: 'color: red',
26 | }
27 | /**
28 | * 将方法绑定到原型上
29 | */
30 | Object.entries(methods).forEach(([method, color]) => {
31 | Logger.prototype[method] = function (...args) {
32 | // 非生产环境
33 | if (!IS_DEBUG) {
34 | return
35 | }
36 | args.unshift(`%c[${this.filename}]:`, color)
37 | console[method](...args)
38 | }
39 | })
40 |
41 | /**
42 | * 定义 VueLogger class
43 | */
44 | class VueLogger {
45 | constructor (filename) {
46 | const logger = new Logger(filename)
47 | Object.keys(methods).forEach(method => {
48 | this[method] = (vm, ...args) => {
49 | // 不存在vue实例时，简单打印
50 | if (!vm) {
51 | return
52 | }
53 | if (vm._isVue !== true) {
54 | logger[method].call(logger, vm, ...args)
55 | return
56 | }
57 | // 组件当前__file
58 | const filePath = vm.$options._parentVnode.componentOptions.Ctor.options.__file
59 | // 截取组件名称
60 | const componentName = filePath.slice(filePath.lastIndexOf('/') + 1) || '(unkonwn component name)'
61 | // 当前路由路径
62 | const fullPath = vm.$route.fullPath || '(unkonwn route fullPath)'
63 | logger[method].call(logger, ...args, `@${componentName}`, `#${fullPath}`)
64 | }
65 | })
66 | }
67 | }
68 |
69 | const vueLogger = new VueLogger('component')
70 | const componentLogger = {}
71 | /**
72 | * 暴露install钩子，供vue注册
73 | * @param {Vue} Vue - Vue构造器类
74 | */
75 | componentLogger.install = function (Vue) { // 基础打印器
76 | Object.keys(methods).forEach((method) => {
77 | Vue.prototype[method] = function (...args) {
78 | vueLogger[method].call({}, this, ...args)
79 | }
80 | })
81 | }
82 |
83 | export default componentLogger
--------------------------------------------------------------------------------
/webpack4-ssr-config/config/logger/vue-logger.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by zdliuccit on 2017/9/21.
3 | * 日志打印器 class
4 | */
5 | const IS_DEBUG = process.env.NODE_ENV !== 'production'
6 |
7 | class Logger {
8 | /**
9 | * 构造函数
10 | * @param filename 调用的文件名
11 | */
12 | constructor(filename) {
13 | this.filename = filename
14 | }
15 | }
16 |
17 | /**
18 | * 定义方法
19 | * @type {{info: string, log: string, warn: string, error: string}}
20 | */
21 | const methods = {
22 | log: 'color: green',
23 | info: 'color:#6495ED',
24 | warn: 'color: #cc33cc',
25 | error: 'color: red',
26 | }
27 | /**
28 | * 将方法绑定到原型上
29 | */
30 | Object.entries(methods).forEach(([method, color]) => {
31 | Logger.prototype[method] = function (...args) {
32 | // 非生产环境
33 | if (!IS_DEBUG) {
34 | return
35 | }
36 | args.unshift(`%c[${this.filename}]:`, color)
37 | console[method](...args)
38 | }
39 | })
40 |
41 | /**
42 | * 定义 VueLogger class
43 | */
44 | class VueLogger {
45 | constructor(filename) {
46 | const logger = new Logger(filename)
47 | Object.keys(methods).forEach(method => {
48 | this[method] = (vm, ...args) => {
49 | // 不存在vue实例时，简单打印
50 | if (!vm) {
51 | return
52 | }
53 | if (vm._isVue !== true) {
54 | logger[method].call(logger, vm, ...args)
55 | return
56 | }
57 | // 组件当前__file
58 | const filePath = vm.$options._parentVnode.componentOptions.Ctor.options.__file
59 | // 截取组件名称
60 | const componentName = filePath.slice(filePath.lastIndexOf('/') + 1) || '(unkonwn component name)'
61 | // 当前路由路径
62 | const fullPath = vm.$route.fullPath || '(unkonwn route fullPath)'
63 | logger[method].call(logger, ...args, `@${componentName}`, `#${fullPath}`)
64 | }
65 | })
66 | }
67 | }
68 |
69 | const vueLogger = new VueLogger('component')
70 | const componentLogger = {}
71 | /**
72 | * 暴露install钩子，供vue注册
73 | * @param {Vue} Vue - Vue构造器类
74 | */
75 | componentLogger.install = function (Vue) { // 基础打印器
76 | Object.keys(methods).forEach((method) => {
77 | Vue.prototype[method] = function (...args) {
78 | vueLogger[method].call({}, this, ...args)
79 | }
80 | })
81 | }
82 |
83 | export default componentLogger
--------------------------------------------------------------------------------
/webpack4-basic-config/config/koa-dev-server.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by liuzhengdong on 2017/7/13.
3 | */
4 | const Koa = require('koa')
5 | const KoaRouter = require('koa-router')()
6 | const webpack = require('webpack')
7 | const currentIP = require('ip').address()
8 |
9 | const opn = require('opn')
10 | const loggerMiddleware = require('koa-logger')()
11 | const convert = require('koa-convert')
12 | const webpackDevMiddleware = require('koa-webpack-dev-middleware')
13 | const webpackHotMiddleware = require('koa-webpack-hot-middleware')
14 |
15 | const appConfig = require('./../app.config')
16 | const config = require('./webpack.config.dev')
17 | const clientCompiler = webpack(config)
18 |
19 | const proxyMiddleware = require('./utils/proxyMiddleWare')
20 | const errorMiddleware = require('./utils/errorMiddleWare')
21 | const spaMiddleWare = require('./utils/spaMiddleWare')
22 | const staticMiddleWare = require('./utils/staticMiddleWare')
23 |
24 | const app = new Koa()
25 | const uri = 'http://' + currentIP + ':' + appConfig.appPort
26 |
27 | const devMiddleware = webpackDevMiddleware(clientCompiler, {
28 | publicPath: config.output.publicPath,
29 | headers: {'Access-Control-Allow-Origin': '*'},
30 | stats: {
31 | colors: true,
32 | modules: false,
33 | },
34 | noInfo: false,
35 | })
36 |
37 | // 中间件,一组async函数，generator函数需要convert转换
38 | const middleWares = [
39 | // 打印请求与响应 日志
40 | loggerMiddleware,
41 | // 压缩响应
42 | require('koa-compress')(),
43 | // 错误处理
44 | errorMiddleware,
45 | // 资源中间件
46 | staticMiddleWare(),
47 | // webpack开发中间件
48 | convert(devMiddleware),
49 | // webpack热替换中间件
50 | convert(webpackHotMiddleware(clientCompiler)),
51 | // spa单页应用处理,非api后段请求返回index.html
52 | spaMiddleWare(),
53 | // 路由
54 | KoaRouter.middleware(),
55 | // 代理中间件
56 | proxyMiddleware(),
57 | ]
58 |
59 | middleWares.forEach((middleware) => {
60 | if (!middleware) {
61 | return
62 | }
63 | app.use(middleware)
64 | })
65 |
66 | console.log('> Starting dev server...')
67 |
68 | devMiddleware.waitUntilValid(() => {
69 | console.log('> Listening at ' + uri + '\n')
70 | opn(uri)
71 | })
72 |
73 | // 错误处理
74 | app.on('error', (err) => {
75 | console.error('Server error: \n%s\n%s ', err.stack || '')
76 | })
77 |
78 | app.listen(appConfig.appPort)
79 |
--------------------------------------------------------------------------------
/react-base-webpack/config/webpack.config.base.js:
--------------------------------------------------------------------------------
1 | /**
2 | * webpack base配置
3 | * Created by zdliuccit on 2018/11/1.
4 | */
5 | const path = require('path')
6 | const webpack = require('webpack')
7 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
8 | const HtmlWebpackPlugin = require('html-webpack-plugin')
9 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
10 |
11 | const isProd = process.env.NODE_ENV === 'production'
12 | const appConfig = require('./../app.config')
13 | const appVersion = new Date().getTime()
14 |
15 | function resolve(dir) {
16 | return path.resolve(process.cwd(), dir)
17 | }
18 |
19 | const favicon = path.join(process.cwd(), 'favicon.ico')
20 |
21 | module.exports = function () {
22 | const config = {
23 | output: {
24 | path: resolve('dist'),
25 | filename: `[name].[${isProd ? 'chunkhash' : 'hash'}:8].js`,
26 | chunkFilename: '[id].js',
27 | publicPath: '/'
28 | },
29 | resolve: {
30 | extensions: ['.js', '.jsx', '.json', '.scss'],
31 | alias: {
32 | '@': resolve('client'),
33 | }
34 | },
35 | module: {
36 | rules: [
37 | // js,jsx 转译
38 | {
39 | test: /\.(js|jsx)$/,
40 | use: ['babel-loader'],
41 | exclude: /(node_modules|bower_components)/,
42 | },
43 | {
44 | test: /\.json$/,
45 | use: 'json-loader',
46 | },
47 | {
48 | test: /\.(gif|jpg|jpeg|png|bmp|svg|ico)(\?.*)?$/,
49 | use: [{
50 | loader: 'url-loader',
51 | options: {
52 | limit: 1,
53 | name: 'assets/images/[name].[hash:8].[ext]',
54 | },
55 | }],
56 | },
57 | {
58 | test: /\.(woff|woff2|eot|ttf)(\?.*)?$/,
59 | use: [{
60 | loader: 'url-loader',
61 | options: {
62 | limit: 8912,
63 | name: 'assets/font/[name].[hash:8].[ext]',
64 | },
65 | }],
66 | },
67 | ],
68 | },
69 | plugins: [
70 | new CaseSensitivePathsPlugin(),
71 | new HtmlWebpackPlugin({
72 | appVersion,
73 | favicon,
74 | filename: 'index.html',
75 | template: path.join(process.cwd(), 'index.template.ejs'),
76 | }),
77 | new FriendlyErrorsPlugin(),
78 | new webpack.optimize.LimitChunkCountPlugin({
79 | maxChunks: 1
80 | })
81 | ],
82 | }
83 | return config
84 | }
--------------------------------------------------------------------------------
/webpack3-basic-config/config/koa-dev-server.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by liuzhengdong on 2017/7/13.
3 | */
4 | const Koa = require('koa')
5 | const KoaRouter = require('koa-router')()
6 | const webpack = require('webpack')
7 | const currentIP = require('ip').address()
8 |
9 | const opn = require('opn')
10 | const loggerMiddleware = require('koa-logger')()
11 | const convert = require('koa-convert')
12 | const webpackDevMiddleware = require('koa-webpack-dev-middleware')
13 | const webpackHotMiddleware = require('koa-webpack-hot-middleware')
14 |
15 | const appConfig = require('./../app.config')
16 | const config = require('./webpack.config.dev')
17 | const clientCompiler = webpack(config)
18 |
19 | const setCookieMiddleware = require('./utils/setCookieMiddleWare')
20 | const httpMiddleware = require('./utils/httpMiddleWare')
21 | const proxyMiddleware = require('./utils/proxyMiddleWare')
22 | const errorMiddleware = require('./utils/errorMiddleWare')
23 | const spaMiddleWare = require('./utils/spaMiddleWare')
24 |
25 | const app = new Koa()
26 | const uri = 'http://' + currentIP + ':' + appConfig.appPort
27 |
28 | const devMiddleware = webpackDevMiddleware(clientCompiler, {
29 | publicPath: config.output.publicPath,
30 | headers: { 'Access-Control-Allow-Origin': '*' },
31 | stats: {
32 | colors: true,
33 | modules: false,
34 | },
35 | noInfo: false,
36 | })
37 |
38 | // 中间件,一组async函数，generator函数需要convert转换
39 | const middleWares = [
40 | // 打印请求与响应 日志
41 | loggerMiddleware,
42 | // 压缩响应
43 | require('koa-compress')(),
44 | // 错误处理
45 | errorMiddleware,
46 | // webpack开发中间件
47 | convert(devMiddleware),
48 | // webpack热替换中间件
49 | convert(webpackHotMiddleware(clientCompiler)),
50 | // 手动设置cookie方法
51 | setCookieMiddleware,
52 | // http中间件
53 | httpMiddleware(),
54 | // spa单页应用处理,非api后段请求返回index.html
55 | spaMiddleWare(),
56 | // 插入自定义中间件
57 | ...appConfig.middleWares,
58 | // 路由
59 | KoaRouter.middleware(),
60 | // 代理中间件
61 | proxyMiddleware(),
62 | ]
63 |
64 | middleWares.forEach((middleware) => {
65 | if (!middleware) {
66 | return
67 | }
68 | app.use(middleware)
69 | })
70 |
71 | console.log('> Starting dev server...')
72 |
73 | devMiddleware.waitUntilValid(() => {
74 | console.log('> Listening at ' + uri + '\n')
75 | opn(uri)
76 | })
77 |
78 | // 错误处理
79 | app.on('error', (err) => {
80 | console.error('Server error: \n%s\n%s ', err.stack || '')
81 | })
82 |
83 | const server = app.listen(appConfig.appPort)
84 |
85 | process.on('SIGTERM', () => {
86 | console.log('Stopping dev server')
87 | devMiddleware.close()
88 | server.close(() => {
89 | process.exit(0)
90 | })
91 | })
--------------------------------------------------------------------------------
/webpack4-ssr-config/client/components/ProgressBar.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
86 |
87 |
100 |
--------------------------------------------------------------------------------
/webpack4-ssr-config/config/vue.koa.ssr.js:
--------------------------------------------------------------------------------
1 | /**
2 | * vue koa2 ssr中间件
3 | * Created by zdliuccit on 2018/7/6.
4 | */
5 | const fs = require('fs')
6 | const path = require('path')
7 | const LRU = require('lru-cache')
8 | const { createBundleRenderer } = require('vue-server-renderer')
9 | const isProd = process.env.NODE_ENV === 'production'
10 | const proxyConfig = require('./../app.config').proxy
11 | const setUpDevServer = require('./setup.dev.server')
12 |
13 | module.exports = function (app, uri) {
14 |
15 | const renderData = (ctx, renderer) => {
16 | const context = {
17 | url: ctx.url,
18 | title: 'Vue Koa2 SSR',
19 | cookies: ctx.request.headers.cookie
20 | }
21 | return new Promise((resolve, reject) => {
22 | renderer.renderToString(context, (err, html) => {
23 | if (err) {
24 | return reject(err)
25 | }
26 | resolve(html)
27 | })
28 | })
29 | }
30 |
31 | function createRenderer(bundle, options) {
32 | return createBundleRenderer(bundle, Object.assign(options, {
33 | cache: LRU({
34 | max: 1000,
35 | maxAge: 1000 * 60 * 15
36 | }),
37 | runInNewContext: false
38 | }))
39 | }
40 |
41 | function resolve(dir) {
42 | return path.resolve(process.cwd(), dir)
43 | }
44 |
45 | let renderer
46 | if (isProd) {
47 | // prod mode
48 | const template = fs.readFileSync(resolve('dist/index.html'), 'utf-8')
49 | const bundle = require(resolve('dist/vue-ssr-server-bundle.json'))
50 | const clientManifest = require(resolve('dist/vue-ssr-client-manifest.json'))
51 | renderer = createRenderer(bundle, {
52 | template,
53 | clientManifest
54 | })
55 | } else {
56 | // dev mode
57 | setUpDevServer(app, uri, (bundle, options) => {
58 | try {
59 | renderer = createRenderer(bundle, options)
60 | } catch (e) {
61 | console.log('\nbundle error', e)
62 | }
63 | }
64 | )
65 | }
66 | app.use(async (ctx, next) => {
67 | if (!renderer) {
68 | ctx.type = 'html'
69 | return ctx.body = 'waiting for compilation... refresh in a moment.';
70 | }
71 | if (Object.keys(proxyConfig).findIndex(vl => ctx.url.startsWith(vl)) > -1) {
72 | return next()
73 | }
74 | let html, status
75 | try {
76 | status = 200
77 | html = await renderData(ctx, renderer)
78 | } catch (e) {
79 | console.log('\ne', e)
80 | if (e.code === 404) {
81 | status = 404
82 | html = '404 | Not Found'
83 | } else {
84 | status = 500
85 | html = '500 | Internal Server Error'
86 | }
87 | }
88 | ctx.type = 'html'
89 | ctx.status = status ? status : ctx.status
90 | ctx.body = html
91 | })
92 | }
--------------------------------------------------------------------------------
/react-base-webpack/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-ssr-webpack",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "cross-env NODE_ENV=development node config/index.js",
8 | "build": "rimraf dist && cross-env NODE_ENV=production webpack --config config/webpack.config.prod.js --progress --hide-modules",
9 | "test": "echo \"Error: no test specified\" && exit 1"
10 | },
11 | "author": "zdliuccit",
12 | "license": "ISC",
13 | "keywords": [
14 | "react",
15 | "vue-ssr",
16 | "ssr",
17 | "koa",
18 | "koa2",
19 | "webpack4"
20 | ],
21 | "dependencies": {
22 | "antd": "^3.10.4",
23 | "react": "^16.6.0",
24 | "react-dom": "^16.6.0",
25 | "react-router-dom": "^4.3.1",
26 | "redux": "^4.0.1"
27 | },
28 | "devDependencies": {
29 | "@babel/core": "7.1.2",
30 | "@babel/plugin-proposal-class-properties": "^7.1.0",
31 | "@babel/polyfill": "7.0.0",
32 | "@babel/preset-env": "7.1.0",
33 | "@babel/preset-react": "^7.0.0",
34 | "autoprefixer": "9.1.5",
35 | "axios": "0.18.0",
36 | "babel-eslint": "10.0.1",
37 | "babel-loader": "8.0.4",
38 | "babel-plugin-import": "^1.11.0",
39 | "case-sensitive-paths-webpack-plugin": "2.1.2",
40 | "cross-env": "5.2.0",
41 | "css-loader": "^1.0.0",
42 | "cssnano": "4.1.4",
43 | "eslint": "5.6.1",
44 | "eslint-config-standard": "12.0.0",
45 | "eslint-friendly-formatter": "4.0.1",
46 | "eslint-loader": "2.1.1",
47 | "eslint-plugin-html": "4.0.6",
48 | "eslint-plugin-import": "2.14.0",
49 | "eslint-plugin-node": "7.0.1",
50 | "eslint-plugin-promise": "4.0.1",
51 | "eslint-plugin-standard": "4.0.0",
52 | "extract-css-chunks-webpack-plugin": "3.1.1",
53 | "file-loader": "2.0.0",
54 | "friendly-errors-webpack-plugin": "1.7.0",
55 | "html-webpack-plugin": "3.2.0",
56 | "ip": "1.1.5",
57 | "json-loader": "0.5.7",
58 | "koa": "2.5.3",
59 | "koa-better-http-proxy": "0.2.4",
60 | "koa-compress": "2.0.0",
61 | "koa-convert": "1.2.0",
62 | "koa-logger": "3.2.0",
63 | "koa-router": "7.4.0",
64 | "koa-static": "5.0.0",
65 | "koa-webpack-dev-middleware": "2.0.2",
66 | "koa-webpack-hot-middleware": "1.0.3",
67 | "lru-cache": "4.1.3",
68 | "memory-fs": "0.4.1",
69 | "node-sass": "^4.9.4",
70 | "opn": "5.4.0",
71 | "optimize-css-assets-webpack-plugin": "5.0.1",
72 | "postcss": "7.0.4",
73 | "postcss-loader": "3.0.0",
74 | "postcss-pxtorem": "4.0.1",
75 | "sass-loader": "^7.1.0",
76 | "style-loader": "^0.23.1",
77 | "url-loader": "1.1.1",
78 | "webpack": "4.24.0",
79 | "webpack-cli": "3.1.2",
80 | "webpack-dev-middleware": "3.4.0",
81 | "webpack-hot-middleware": "2.24.2",
82 | "webpack-merge": "4.1.4"
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/react-base-webpack/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
1 | /**
2 | * webpack prod配置
3 | * Created by zdliuccit on 2018/11/1.
4 | */
5 | const webpack = require('webpack')
6 | const merge = require('webpack-merge')
7 | const base = require('./webpack.config.base')()
8 | const appWebpack = require('./../app.config').webpack
9 | const ExtractCssChunks = require("extract-css-chunks-webpack-plugin")
10 | const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
11 |
12 | const config = merge(base, {
13 | mode: 'production',
14 | module: {
15 | rules: [
16 | {
17 | test: /\.css$/,
18 | use: [ExtractCssChunks.loader, 'css-loader', 'postcss-loader'],
19 | },
20 | {
21 | test: /\.scss$/,
22 | use: [ExtractCssChunks.loader, 'css-loader', 'postcss-loader', 'sass-loader'],
23 | },
24 | ]
25 | },
26 | plugins: [
27 | // 分离css文件
28 | new ExtractCssChunks({
29 | filename: 'css/[name].[chunkhash:8].css',
30 | chunkFilename: 'css/[id].[chunkhash:8].css',
31 | }),
32 | // 限制文件最小KB
33 | new webpack.optimize.MinChunkSizePlugin({
34 | minChunkSize: 20000
35 | }),
36 | new OptimizeCssAssetsPlugin(
37 | {
38 | cssProcessor: require('cssnano'),
39 | cssProcessorOptions: {
40 | // postcss那边已经处理过autoprefixer了，这里把它关掉，否则会导致浏览器前缀兼容范围问题
41 | autoprefixer: false,
42 | discardComments: { removeAll: true }
43 | },
44 | }
45 | ),
46 | ],
47 | // production模式下，将侧重于模块体积优化和线上部署，包含如下内容：
48 | // 开启所有的优化代码
49 | // 更小的bundle大小
50 | // 去除掉只在开发阶段运行的代码
51 | // Scope hoisting和Tree-shaking
52 | // 自动启用uglifyjs对代码进行压缩
53 | optimization: {
54 | minimize: true, //取代 new UglifyJsPlugin(/* ... */)
55 | providedExports: true,
56 | usedExports: true,
57 | //识别package.json中的sideEffects以剔除无用的模块，用来做tree-shake
58 | //依赖于optimization.providedExports和optimization.usedExports
59 | sideEffects: true,
60 | //取代 new webpack.optimize.ModuleConcatenationPlugin()
61 | concatenateModules: true,
62 | //取代 new webpack.NoEmitOnErrorsPlugin()，编译错误时不打印输出资源。
63 | noEmitOnErrors: true
64 | },
65 | optimization: {
66 | minimize: env === 'production' ? true : false, //是否进行代码压缩
67 | splitChunks: {
68 | chunks: "async",
69 | minSize: 30000, //模块大于30k会被抽离到公共模块
70 | minChunks: 1, //模块出现1次就会被抽离到公共模块
71 | maxAsyncRequests: 5, //异步模块，一次最多只能被加载5个
72 | maxInitialRequests: 3, //入口模块最多只能加载3个
73 | name: true,
74 | cacheGroups: {
75 | default: {
76 | minChunks: 2,
77 | priority: -20
78 | reuseExistingChunk: true,
79 | },
80 | vendors: {
81 | test: /[\\/]node_modules[\\/]/,
82 | priority: -10
83 | }
84 | }
85 | },
86 | runtimeChunk: {
87 | name: 'runtime'
88 | }
89 | }
90 | }, appWebpack)
91 |
92 | module.exports = config
93 |
--------------------------------------------------------------------------------
/webpack4-ssr-config/config/setup.dev.server.js:
--------------------------------------------------------------------------------
1 | /**
2 | * koa2 webpack4 开发服务
3 | * Created by zdliuccit on 2018/7/6.
4 | */
5 | const path = require('path')
6 | const MFS = require('memory-fs')
7 | const webpack = require('webpack')
8 | const clientConfig = require('./webpack.client.config')
9 | const serverConfig = require('./webpack.server.config')
10 | const webpackDevMiddleware = require('koa-webpack-dev-middleware')
11 | const webpackHotMiddleware = require('koa-webpack-hot-middleware')
12 | const convert = require('koa-convert')
13 |
14 | const opn = require('opn')
15 | const readFile = (fs, file) => fs.readFileSync(path.join(clientConfig.output.path, file), 'utf-8')
16 |
17 | module.exports = function setupDevServer(app, uri, cb) {
18 | let bundle
19 | let template
20 |
21 | const update = () => {
22 | if (bundle && template) {
23 | cb(bundle, {
24 | template,
25 | })
26 | }
27 | }
28 |
29 | // client
30 | clientConfig.entry.app = ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&reload=true', clientConfig.entry.app]
31 | clientConfig.output.filename = '[name].js'
32 | clientConfig.plugins.push(
33 | new webpack.HotModuleReplacementPlugin(),
34 | new webpack.NoEmitOnErrorsPlugin()
35 | )
36 |
37 | // webpack config
38 | const clientCompiler = webpack(clientConfig)
39 |
40 | // dev middleware
41 | const devMiddleware = webpackDevMiddleware(clientCompiler, {
42 | publicPath: clientConfig.output.publicPath,
43 | noInfo: true,
44 | headers: { 'Access-Control-Allow-Origin': '*' },
45 | stats: {
46 | colors: true,
47 | modules: false,
48 | },
49 | })
50 |
51 | app.use(convert(devMiddleware))
52 |
53 | // hot update
54 | clientCompiler.plugin('done', stats => {
55 | const fs = devMiddleware.fileSystem
56 | stats = stats.toJson()
57 | stats.errors.forEach(err => console.error(err))
58 | stats.warnings.forEach(err => console.warn(err))
59 | if (stats.errors.length) return
60 |
61 | console.log('\nclient-dev...\n')
62 |
63 | let filePath = path.join(clientConfig.output.path, 'index.html')
64 | if (fs.existsSync(filePath)) {
65 | // 读取内存模板
66 | template = readFile(fs, 'index.html')
67 | }
68 | update()
69 | })
70 |
71 | // hot middleware
72 | app.use(convert(webpackHotMiddleware(clientCompiler)))
73 |
74 | // server
75 | const serverCompiler = webpack(serverConfig)
76 | const mfs = new MFS()
77 | serverCompiler.outputFileSystem = mfs
78 | serverCompiler.watch({}, (err, stats) => {
79 | if (err) throw err
80 | stats = stats.toJson()
81 | if (stats.errors.length) return
82 |
83 | console.log('server-dev...')
84 | bundle = JSON.parse(readFile(mfs, 'vue-ssr-server-bundle.json'))
85 | update()
86 | })
87 |
88 | devMiddleware.waitUntilValid(() => {
89 | console.log('\n> Listening at ' + uri + '\n')
90 | opn(uri)
91 | })
92 | }
93 |
--------------------------------------------------------------------------------
/webpack3-basic-config/config/eslintrc.conf.js:
--------------------------------------------------------------------------------
1 | /**
2 | * eslint规则配置，用于被业务工程引用
3 | */
4 | module.exports = {
5 | root: true,
6 | env: {
7 | // 环境定义了预定义的全局变量。
8 | browser: true,
9 | node: true,
10 | es6: true,
11 | mocha: true
12 | },
13 | parser: 'babel-eslint', //使用babel-eslint来作为eslint的解析器
14 | parserOptions: {
15 | // ECMAScript 版本
16 | ecmaVersion: 6,
17 | sourceType: 'module',
18 | // // 想使用的额外的语言特性:
19 | ecmaFeatures: {
20 | experimentalObjectRestSpread: true,
21 | }
22 | },
23 | extends: 'standard',
24 | plugins: [
25 | 'html',
26 | 'import',
27 | 'promise',
28 | ],
29 | // add your custom rules here
30 | rules: {
31 | // 禁止条件表达式中出现赋值操作符
32 | 'no-cond-assign': 2,
33 | // 允许console语句
34 | 'no-console': 1,
35 | // 允许 debugger
36 | 'no-debugger': 0,
37 | // 禁止 function 定义中出现重名参数
38 | 'no-dupe-args': 2,
39 | // var声明
40 | 'no-var': 1,
41 | // 分号;
42 | 'semi': [
43 | 0,
44 | 'always'
45 | ],
46 | // 使用 === 替代 == allow-null允许null和undefined==
47 | 'eqeqeq': [
48 | 2,
49 | 'allow-null'
50 | ],
51 | // 禁用 alert、confirm 和 prompt
52 | 'no-alert': 2,
53 | // 禁用 eval()
54 | 'no-eval': 2,
55 | // 禁用 with 语句
56 | 'no-with': 2,
57 | // 要求或禁止使用严格模式指令
58 | 'strict': 2,
59 | //////////////
60 | // 要求或禁止 var 声明中的初始化(初值)
61 | 'init-declarations': 2,
62 | // 不允许 catch 子句的参数与外层作用域中的变量同名
63 | 'no-catch-shadow': 0,
64 | // 禁止删除变量
65 | 'no-delete-var': 2,
66 | // 不允许标签与变量同名
67 | 'no-label-var': 2,
68 | // 禁用特定的全局变量
69 | 'no-restricted-globals': 0,
70 | // 禁止 var 声明 与外层作用域的变量同名
71 | 'no-shadow': 0,
72 | // 禁止覆盖受限制的标识符
73 | 'no-shadow-restricted-names': 2,
74 | // 禁用未声明的变量，除非它们在 /*global */ 注释中被提到
75 | 'no-undef': 2,
76 | // 禁止将变量初始化为 undefined
77 | 'no-undef-init': 2,
78 | // 禁止将 undefined 作为标识符
79 | 'no-undefined': 0,
80 | // 禁止出现未使用过的变量
81 | 'no-unused-vars': [
82 | 0,
83 | {
84 | 'vars': 'all',
85 | 'args': 'none'
86 | }
87 | ],
88 | // 不允许在变量定义之前使用它们
89 | 'no-use-before-define': 0,
90 | // 强制一行的最大长度
91 | 'max-len': [
92 | 1,
93 | 200
94 | ],
95 | // 文件末尾强制换行
96 | 'eol-last': 0,
97 | // 强制使用一致的反勾号、双引号或单引号
98 | 'quotes': [
99 | 2,
100 | 'single'
101 | ],
102 | // 禁止修改 const 声明的变量
103 | 'no-const-assign': 2,
104 | // 禁止标识符中有悬空下划线_bar
105 | 'no-underscore-dangle': 0,
106 | // 禁用行尾空格
107 | 'no-trailing-spaces': 2,
108 | // 禁用不必要的嵌套块
109 | 'no-lone-blocks': 2,
110 | // 强制在 JSX 属性中一致地使用双引号或单引号
111 | 'jsx-quotes': 0,
112 | // 函数定义时括号前面要不要有空格 这里忽略
113 | 'space-before-function-paren': [0, `always`],
114 | //对象字面量项尾不能有逗号 这里忽略
115 | 'comma-dangle': [0, 'always'],
116 | },
117 | }
118 |
--------------------------------------------------------------------------------
/react-base-webpack/config/eslintrc.conf.js:
--------------------------------------------------------------------------------
1 | /**
2 | * eslint规则配置，用于被业务工程引用
3 | * Created by zdliuccit on 2018/11/1.
4 | */
5 |
6 | module.exports = {
7 | root: true,
8 | env: {
9 | // 环境定义了预定义的全局变量。
10 | browser: true,
11 | node: true,
12 | es6: true,
13 | mocha: true
14 | },
15 | parser: 'babel-eslint',
16 | parserOptions: {
17 | // ECMAScript 版本
18 | ecmaVersion: 6,
19 | sourceType: 'module',
20 | },
21 | extends: 'standard',
22 | plugins: [
23 | 'html',
24 | 'import',
25 | 'promise',
26 | ],
27 | // add your custom rules here 0忽略 1warn 2 error
28 | rules: {
29 | // 缩进4空格 禁用2
30 | 'indent': [1, 2],
31 | // 禁止条件表达式中出现赋值操作符
32 | 'no-cond-assign': 2,
33 | // 允许console语句
34 | 'no-console': 1,
35 | // 允许 debugger
36 | 'no-debugger': 1,
37 | // var声明
38 | 'no-var': 2,
39 | // 禁止 function 定义中出现重名参数
40 | 'no-dupe-args': 2,
41 | // 禁止重复的函数声明
42 | 'no-func-assign': 2,
43 | // 忽略分号;
44 | 'semi': [1, 'never'],
45 | // 使用 === 和 !==
46 | 'eqeqeq': [2, 'allow-null'],
47 | // warn alert、
48 | 'no-alert': 1,
49 | // 禁用 eval()
50 | 'no-eval': 2,
51 | // 禁用 with 语句
52 | 'no-with': 2,
53 | // 要求或禁止使用严格模式指令
54 | 'strict': 2,
55 | // 要求或禁止 var 声明中的初始化(初值)
56 | 'init-declarations': 2,
57 | // 不允许 catch 子句的参数与外层作用域中的变量同名
58 | 'no-catch-shadow': 0,
59 | // 禁止删除变量
60 | 'no-delete-var': 2,
61 | // 不允许标签与变量同名
62 | 'no-label-var': 2,
63 | // 禁用特定的全局变量
64 | 'no-restricted-globals': 2,
65 | // 禁止 var 声明 与外层作用域的变量同名
66 | 'no-shadow': 0,
67 | // 禁止覆盖受限制的标识符
68 | 'no-shadow-restricted-names': 2,
69 | // 禁用未声明的变量，除非它们在 /*global */ 注释中被提到
70 | 'no-undef': 2,
71 | // 禁止将变量初始化为 undefined
72 | 'no-undef-init': 2,
73 | // 禁止将 undefined 作为标识符
74 | 'no-undefined': 2,
75 | // 禁止出现未使用过的变量
76 | 'no-unused-vars': [1, { 'vars': 'all', 'args': 'none' }],
77 | // 不允许在变量定义之前使用它们
78 | 'no-use-before-define': 1,
79 | // 强制一行的最大长度
80 | 'max-len': [1, 160],
81 | // 文件末尾强制换行
82 | 'eol-last': 0,
83 | // 强制使用单引号
84 | 'quotes': [2, 'single'],
85 | // 禁止修改 const 声明的变量
86 | 'no-const-assign': 2,
87 | // 禁止标识符中有悬空下划线_bar，这里忽略
88 | 'no-underscore-dangle': 0,
89 | // 禁用行尾空格
90 | 'no-trailing-spaces': 2,
91 | // 禁用不必要的嵌套块
92 | 'no-lone-blocks': 2,
93 | // 强制在 JSX 属性中一致地使用双引号或单引号
94 | 'jsx-quotes': 0,
95 | // 函数定义时括号前面要不要有空格
96 | 'space-before-function-paren': [1, `never`],
97 | //对象字面量项尾不能有逗号 这里忽略
98 | 'comma-dangle': [0, 'always'],
99 | // 在对象字面量属性中实现键和值之间的一致间隔 {key: value}
100 | 'key-spacing': [1, { 'mode': 'strict' }],
101 | // 允许对象所有键和值在同一行上
102 | 'object-property-newline': [0, { 'allowMultiplePropertiesPerLine': true }],
103 | // promise reject 参数设置为 * 任意类型
104 | 'prefer-promise-reject-errors': [0, { 'allowEmptyReject': true }]
105 | },
106 | }
107 |
--------------------------------------------------------------------------------
/webpack4-basic-config/src/utils/storage/README.md:
--------------------------------------------------------------------------------
1 | # x-vuex-storage
2 |
3 | 基于 vuex 的数据存储栈
4 |
5 | ## GET STARTED
6 |
7 | 安装所依赖的包
8 | ```bash
9 | npm i
10 | ```
11 |
12 | 启动服务用于查看 demo
13 | ```bash
14 | npm start
15 | ```
16 |
17 | ## USAGE
18 |
19 | 在最开始的时候请用以下方式实例化此方法
20 | ```javascript
21 | import vueStorage from './utils/storage'
22 | import Vue from 'vue'
23 | import VueRouter from 'vue-router'
24 |
25 | const router = new VueRouter(...)
26 |
27 | /**
28 | * @param {Object} Vue Vue
29 | * @param {router} [router=undefined] VueRouter 实例化对象
30 | * @param {array} [whiteList=[]] 路由白名单
31 | * @param {Function} cb 回调函数 函数内返回 Promise
32 | * 函数的返回参数有:
33 | * $storage -- VuexStorage 的对象
34 | * to -- router beforeEach 的 to
35 | * from -- router beforeEach 的 from
36 | */
37 | const store = VuexStorage(Vue, router, whiteList, ($storage, to, from) => Promise.resolve())
38 |
39 | new Vue({
40 | el: '#app',
41 | router,
42 | store,
43 | render: h => h(App)
44 | })
45 | ```
46 |
47 | 暴露在原型链上的对象为
48 | ```javascript
49 | this.$storage
50 | ```
51 |
52 | 此对象的属性为
53 | ```javascript
54 | // 为路由白名单，传入一个数组
55 | this.$storage.whiteList
56 | ```
57 |
58 | # :warning:警告
59 | ### 每一个方法中注意 isTemp 这个参数
60 | ### 默认为 true 用于存放至临时仓库会在每次路由变更且不为白名单的路径时清空此仓库
61 | ### 如果将手动变为 false 将会存放至永久仓库，只会在页面物理刷新和新开页面时清空
62 |
63 | 此对象的方法分别为
64 |
65 | ```javascript
66 | /**
67 | * 存储一项到仓库
68 | * @method setItem
69 | * @param {string|Array} key 需要存储的键
70 | * @param {any} value 需要存储的值
71 | * @param {boolean} [isTemp=true] 是否存储到临时的仓库
72 | */
73 | this.$storage.setItem(key, value, isTemp)
74 |
75 | /**
76 | * 用于快速增加 item 列表和更新白名单
77 | * 此方法在使用时会自动将对象和数组自动赋值给· items 的 value
78 | * 但是用值类型的变量需要在手动使用 getItem 获取
79 | * @method hyperChannel
80 | * @param {Array} [whiteList=[]] 路由白名单
81 | * @param {boolean} [isTemp=true] 是否存储到临时的仓库，默认为 true
82 | * @param {RestObejct} items rest 风格 item 列表
83 | */
84 | this.$storage.hyperChannel(whiteList = [], isTemp = true, ...items)
85 |
86 | /**
87 | * 删除指定的一项
88 | * @method removeItem
89 | * @param {string|Array} key 仓库中的键
90 | * @param {boolean} [isTemp=true] 是否删除临时的仓库
91 | */
92 | this.$storage.removeItem(key, isTemp)
93 |
94 | /**
95 | * 重置指定项
96 | * @method resetItem
97 | * @param {string|Array} key 仓库中的键
98 | * @param {boolean} [isTemp=true] 是否删除临时的仓库
99 | */
100 | this.$storage.resetItem(key, isTemp)
101 |
102 | /**
103 | * 清除所有
104 | * @method clear
105 | * @param {boolean} [isTemp=true] 是否清楚临时的仓库
106 | */
107 | this.$storage.clear(isTemp)
108 | /**
109 | * 更新指定项
110 | * @method updateItem
111 | * @param {string|Array} key 仓库中的键
112 | * @param {any} value 需要修改的值
113 | * @param {boolean} [isTemp=true] 是否存储到临时的仓库
114 | */
115 | this.$storage.updateItem(key, value, isTemp)
116 |
117 | /**
118 | * 获取仓库中的指定值
119 | * @method getItem
120 | * @param {string|Array} key 仓库中的键
121 | * @param {boolean} [isTemp=true] 是否存储到临时的仓库
122 | * @return {any} 仓库中存储的值
123 | */
124 | this.$storage.getItem(key, isTemp)
125 | ```
--------------------------------------------------------------------------------
/webpack4-ssr-config/config/eslintrc.conf.js:
--------------------------------------------------------------------------------
1 | /**
2 | * eslint规则配置，用于被业务工程引用
3 | * Created by liuzhengdong on 2018/4/3.
4 | */
5 |
6 | module.exports = {
7 | root: true,
8 | env: {
9 | // 环境定义了预定义的全局变量。
10 | browser: true,
11 | node: true,
12 | es6: true,
13 | mocha: true
14 | },
15 | parser: 'babel-eslint',
16 | parserOptions: {
17 | // ECMAScript 版本
18 | ecmaVersion: 6,
19 | sourceType: 'module',
20 | },
21 | extends: 'standard',
22 | plugins: [
23 | 'html',
24 | 'import',
25 | 'promise',
26 | ],
27 | // add your custom rules here 0忽略 1warn 2 error
28 | rules: {
29 | // 缩进4空格 禁用2 忽悠注释部分
30 | 'indent': [1, 2, { "ignoreComments": true }],
31 | // 禁止条件表达式中出现赋值操作符
32 | 'no-cond-assign': 2,
33 | // 允许console语句
34 | 'no-console': 1,
35 | // 允许 debugger
36 | 'no-debugger': 1,
37 | // var声明
38 | 'no-var': 2,
39 | // 禁止 function 定义中出现重名参数
40 | 'no-dupe-args': 2,
41 | // 禁止重复的函数声明
42 | 'no-func-assign': 2,
43 | // 忽略分号;
44 | 'semi': [1, 'never'],
45 | // 使用 === 和 !==
46 | 'eqeqeq': [2, 'allow-null'],
47 | // warn alert、
48 | 'no-alert': 1,
49 | // 禁用 eval()
50 | 'no-eval': 2,
51 | // 禁用 with 语句
52 | 'no-with': 2,
53 | // 要求或禁止使用严格模式指令
54 | 'strict': 2,
55 | // 要求或禁止 var 声明中的初始化(初值)
56 | 'init-declarations': 2,
57 | // 不允许 catch 子句的参数与外层作用域中的变量同名
58 | 'no-catch-shadow': 0,
59 | // 禁止删除变量
60 | 'no-delete-var': 2,
61 | // 不允许标签与变量同名
62 | 'no-label-var': 2,
63 | // 禁用特定的全局变量
64 | 'no-restricted-globals': 2,
65 | // 禁止 var 声明 与外层作用域的变量同名
66 | 'no-shadow': 0,
67 | // 禁止覆盖受限制的标识符
68 | 'no-shadow-restricted-names': 2,
69 | // 禁用未声明的变量，除非它们在 /*global */ 注释中被提到
70 | 'no-undef': 2,
71 | // 禁止将变量初始化为 undefined
72 | 'no-undef-init': 2,
73 | // 禁止将 undefined 作为标识符
74 | 'no-undefined': 2,
75 | // 禁止出现未使用过的变量
76 | 'no-unused-vars': [1, { 'vars': 'all', 'args': 'none' }],
77 | // 不允许在变量定义之前使用它们
78 | 'no-use-before-define': 1,
79 | // 强制一行的最大长度
80 | 'max-len': [1, 160],
81 | // 文件末尾强制换行
82 | 'eol-last': 0,
83 | // 强制使用单引号
84 | 'quotes': [2, 'single'],
85 | // 禁止修改 const 声明的变量
86 | 'no-const-assign': 2,
87 | // 禁止标识符中有悬空下划线_bar，这里忽略
88 | 'no-underscore-dangle': 0,
89 | // 禁用行尾空格
90 | 'no-trailing-spaces': 2,
91 | // 禁用不必要的嵌套块
92 | 'no-lone-blocks': 2,
93 | // 强制在 JSX 属性中一致地使用双引号或单引号
94 | 'jsx-quotes': 0,
95 | // 函数定义时括号前面要不要有空格
96 | 'space-before-function-paren': [1, `never`],
97 | //对象字面量项尾不能有逗号 这里忽略
98 | 'comma-dangle': [0, 'always'],
99 | // 在对象字面量属性中实现键和值之间的一致间隔 {key: value}
100 | 'key-spacing': [1, { 'mode': 'strict' }],
101 | // 允许对象所有键和值在同一行上
102 | 'object-property-newline': [0, { 'allowMultiplePropertiesPerLine': true }],
103 | // promise reject 参数设置为 * 任意类型
104 | 'prefer-promise-reject-errors': [0, { 'allowEmptyReject': true }]
105 | },
106 | }
107 |
--------------------------------------------------------------------------------
/webpack4-basic-config/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack4-basic-config",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "rimraf dist && npm run dll && cross-env NODE_ENV=development node config/index.js",
8 | "build": "rimraf dist && npm run dll && npm run prod",
9 | "dll": "webpack --progress --hide-modules --config config/webpack.config.dll.js",
10 | "prod": "cross-env NODE_ENV=production webpack --config config/webpack.config.prod.js --progress --hide-modules",
11 | "fix": "eslint src --ext .js,.vue --fix",
12 | "test": "echo \"Error: no test specified\" && exit 1"
13 | },
14 | "keywords": [
15 | "Vue",
16 | "Webpack",
17 | "Koa2",
18 | "Koa"
19 | ],
20 | "author": "zdliuccit",
21 | "license": "ISC",
22 | "dependencies": {
23 | "vue": "2.5.20",
24 | "vue-router": "3.0.2",
25 | "vuex": "3.0.1"
26 | },
27 | "devDependencies": {
28 | "@babel/core": "7.2.0",
29 | "@babel/plugin-syntax-dynamic-import": "7.2.0",
30 | "@babel/plugin-syntax-jsx": "7.2.0",
31 | "@babel/polyfill": "7.0.0",
32 | "@babel/preset-env": "7.2.0",
33 | "autoprefixer": "9.4.2",
34 | "axios": "0.18.0",
35 | "babel-eslint": "10.0.1",
36 | "babel-helper-vue-jsx-merge-props": "2.0.3",
37 | "babel-loader": "8.0.4",
38 | "babel-plugin-transform-vue-jsx": "4.0.1",
39 | "case-sensitive-paths-webpack-plugin": "2.1.2",
40 | "cross-env": "5.2.0",
41 | "css-loader": "1.0.0",
42 | "cssnano": "4.1.4",
43 | "element-ui": "^2.4.11",
44 | "eslint": "5.6.1",
45 | "eslint-config-standard": "12.0.0",
46 | "eslint-friendly-formatter": "4.0.1",
47 | "eslint-loader": "2.1.1",
48 | "eslint-plugin-html": "4.0.6",
49 | "eslint-plugin-import": "2.14.0",
50 | "eslint-plugin-node": "7.0.1",
51 | "eslint-plugin-promise": "4.0.1",
52 | "eslint-plugin-standard": "4.0.0",
53 | "extract-css-chunks-webpack-plugin": "3.2.1",
54 | "file-loader": "2.0.0",
55 | "friendly-errors-webpack-plugin": "1.7.0",
56 | "html-webpack-plugin": "3.2.0",
57 | "ip": "1.1.5",
58 | "json-loader": "0.5.7",
59 | "koa": "2.6.2",
60 | "koa-better-http-proxy": "0.2.4",
61 | "koa-compress": "2.0.0",
62 | "koa-convert": "1.2.0",
63 | "koa-logger": "3.2.0",
64 | "koa-router": "7.4.0",
65 | "koa-static": "5.0.0",
66 | "koa-webpack-dev-middleware": "2.0.2",
67 | "koa-webpack-hot-middleware": "1.0.3",
68 | "opn": "5.4.0",
69 | "optimize-css-assets-webpack-plugin": "5.0.1",
70 | "postcss": "7.0.6",
71 | "postcss-loader": "3.0.0",
72 | "postcss-pxtorem": "4.0.1",
73 | "progressbar.js": "^1.0.1",
74 | "stylus": "0.54.5",
75 | "stylus-loader": "3.0.2",
76 | "url-loader": "1.1.2",
77 | "vue-loader": "15.4.2",
78 | "vue-style-loader": "4.1.2",
79 | "vue-template-compiler": "2.5.20",
80 | "webpack": "4.27.1",
81 | "webpack-cli": "3.1.2",
82 | "webpack-dev-middleware": "3.4.0",
83 | "webpack-hot-middleware": "2.24.3",
84 | "webpack-merge": "4.1.5",
85 | "winston": "2.3.1"
86 | }
87 | }
88 |
--------------------------------------------------------------------------------
/webpack4-basic-config/config/eslintrc.conf.js:
--------------------------------------------------------------------------------
1 | /**
2 | * eslint规则配置，用于被业务工程引用
3 | * Created by liuzhengdong on 2018/4/3.
4 | */
5 |
6 | module.exports = {
7 | root: true,
8 | env: {
9 | // 环境定义了预定义的全局变量。
10 | browser: true,
11 | node: true,
12 | es6: true,
13 | mocha: true
14 | },
15 | parser: 'babel-eslint',
16 | parserOptions: {
17 | // ECMAScript 版本
18 | ecmaVersion: 6,
19 | sourceType: 'module',
20 | },
21 | extends: 'standard',
22 | plugins: [
23 | 'html',
24 | 'import',
25 | 'promise',
26 | ],
27 | // add your custom rules here 0忽略 1warn 2 error
28 | rules: {
29 | // 缩进4空格 禁用2 忽悠注释部分
30 | 'indent': [1, 2, {'ignoreComments': true}],
31 | // 禁止条件表达式中出现赋值操作符
32 | 'no-cond-assign': 2,
33 | // 允许console语句
34 | 'no-console': 1,
35 | // 允许 debugger
36 | 'no-debugger': 1,
37 | // var声明
38 | 'no-var': 2,
39 | // 禁止 function 定义中出现重名参数
40 | 'no-dupe-args': 2,
41 | // 禁止重复的函数声明
42 | 'no-func-assign': 2,
43 | // 忽略分号;
44 | 'semi': [1, 'never'],
45 | // 使用 === 和 !==
46 | 'eqeqeq': [2, 'allow-null'],
47 | // warn alert、
48 | 'no-alert': 1,
49 | // 禁用 eval()
50 | 'no-eval': 2,
51 | // 禁用 with 语句
52 | 'no-with': 2,
53 | // 要求或禁止使用严格模式指令
54 | 'strict': 2,
55 | // 要求或禁止 var 声明中的初始化(初值)
56 | 'init-declarations': 2,
57 | // 不允许 catch 子句的参数与外层作用域中的变量同名
58 | 'no-catch-shadow': 0,
59 | // 禁止删除变量
60 | 'no-delete-var': 2,
61 | // 不允许标签与变量同名
62 | 'no-label-var': 2,
63 | // 禁用特定的全局变量
64 | 'no-restricted-globals': 2,
65 | // 禁止 var 声明 与外层作用域的变量同名
66 | 'no-shadow': 0,
67 | // 禁止覆盖受限制的标识符
68 | 'no-shadow-restricted-names': 2,
69 | // 禁用未声明的变量，除非它们在 /*global */ 注释中被提到
70 | 'no-undef': 2,
71 | // 禁止将变量初始化为 undefined
72 | 'no-undef-init': 2,
73 | // 禁止将 undefined 作为标识符
74 | 'no-undefined': 2,
75 | // 禁止出现未使用过的变量
76 | 'no-unused-vars': [1, {'vars': 'all', 'args': 'none'}],
77 | // 不允许在变量定义之前使用它们
78 | 'no-use-before-define': 1,
79 | // 强制一行的最大长度
80 | 'max-len': [1, 160],
81 | // 文件末尾强制换行
82 | 'eol-last': 0,
83 | // 强制使用单引号
84 | 'quotes': [2, 'single'],
85 | // 禁止修改 const 声明的变量
86 | 'no-const-assign': 2,
87 | // 禁止标识符中有悬空下划线_bar，这里忽略
88 | 'no-underscore-dangle': 0,
89 | // 禁用行尾空格
90 | 'no-trailing-spaces': 2,
91 | // 禁用不必要的嵌套块
92 | 'no-lone-blocks': 2,
93 | // 强制在 JSX 属性中一致地使用双引号或单引号
94 | 'jsx-quotes': 0,
95 | // 函数定义时括号前面要不要有空格
96 | 'space-before-function-paren': [1, `never`],
97 | //对象字面量项尾不能有逗号 这里忽略
98 | 'comma-dangle': [0, 'always'],
99 | // 在对象字面量属性中实现键和值之间的一致间隔 {key: value}
100 | 'key-spacing': [1, {'mode': 'strict'}],
101 | // 允许对象所有键和值在同一行上
102 | 'object-property-newline': [0, {'allowMultiplePropertiesPerLine': true}],
103 | // promise reject 参数设置为 * 任意类型
104 | 'prefer-promise-reject-errors': [0, {'allowEmptyReject': true}],
105 | 'object-curly-spacing': ['error', 'never', {'objectsInObjects': true}]
106 | },
107 | }
108 |
--------------------------------------------------------------------------------
/webpack4-ssr-config/config/middle/proxyMiddleWare.js:
--------------------------------------------------------------------------------
1 | /**
2 | * http代理中间件 匹配代理、请求重定向
3 | * 获取app.config.js配置文件，匹配proxy
4 | */
5 | const urlUtils = require('url')
6 | const koaHttpProxy = require('koa-better-http-proxy')
7 | const compose = require('koa-compose')
8 | const appConfig = require('./../../app.config')
9 | const logger = require('./../logger/koa-logger')('proxyMiddleWare')
10 |
11 | const isProd = process.env.NODE_ENV === 'production'
12 |
13 | /**
14 | * 代理处理中间件
15 | * @return {Function} koa middleware
16 | */
17 | module.exports = function () {
18 | async function preProxyMiddleware(ctx, next) {
19 | const url = ctx.url
20 | // logger.info(`Request '${url}'`)
21 | let proxyTarget
22 | let proxyConfig = appConfig.proxy
23 | // 在appConfig.proxy中寻找匹配前缀的代理
24 | for (const [prefix, target] of Object.entries(proxyConfig)) {
25 | if (url.startsWith(prefix)) {
26 | // 匹配替换
27 | ctx.url = url.replace(prefix, '')
28 | proxyTarget = target
29 | ctx._proxyTarget = proxyTarget
30 | logger.info(`Match to proxy: '${prefix}' => '${proxyTarget}'`)
31 | break
32 | }
33 | }
34 | if (!proxyTarget) {
35 | logger.info('Proxy not found')
36 | return Promise.resolve()
37 | }
38 | logger.info(`Will be Agent to '${proxyTarget + ctx.url}'`)
39 | return next()
40 | }
41 |
42 | /**
43 | * 顺序执行async函数
44 | */
45 | return compose([
46 | preProxyMiddleware,
47 | koaHttpProxy(
48 | (ctx) => {
49 | return ctx._proxyTarget
50 | },
51 | {
52 | // 不解析body，不限制body大小
53 | parseReqBody: false,
54 | /**
55 | * 发出代理请求前的回调,更改头文件
56 | * @param {Object} proxyReqOpts - 代理请求选项
57 | * @param {ctx} ctx - koa ctx
58 | * @return {Promise.<*>} *
59 | */
60 | async proxyReqOptDecorator(proxyReqOpts, ctx) {
61 | const parsedTarget = urlUtils.parse(ctx._proxyTarget, true)
62 | proxyReqOpts.host = parsedTarget.hostname
63 | proxyReqOpts.port = parsedTarget.port
64 | proxyReqOpts.https = parsedTarget.protocol === 'https:'
65 |
66 | // 去掉Referer头，否则可能会造成CSRF问题，影响开发
67 | if (!isProd) {
68 | delete proxyReqOpts.headers.Referer
69 | delete proxyReqOpts.headers.Origin
70 | }
71 | // 计时开始
72 | ctx._proxyStartTime = Date.now()
73 | return proxyReqOpts
74 | },
75 | /**
76 | * 代理请求被响应后的回调
77 | * @param {Response} proxyRes - 代理请求选项
78 | * @param {Object} proxyResData - 响应数据
79 | * @param {ctx} ctx - koa ctx
80 | * @return {Promise.<*>} *
81 | */
82 | async userResDecorator(proxyRes, proxyResData, ctx) {
83 | // logger.info('ProxyRes headers:', '\n', JSON.stringify(ctx.response.headers, null, 2))
84 | const location = `${ctx._proxyTarget}${ctx.url}`
85 | logger.info(`Proxy request '${location}' completed(${proxyRes.statusCode}), costing ${Date.now() - ctx._proxyStartTime}ms.`)
86 | return proxyResData
87 | },
88 | }),
89 | ])
90 | }
91 |
--------------------------------------------------------------------------------
/webpack3-basic-config/doc/npm包说明.md:
--------------------------------------------------------------------------------
1 | NPM包说明
2 |
3 | * `koa`
4 | * `koa-static`和`koa-view` 用于设置koa的静态文件目录和模板渲染
5 | * `koa-webpack-dev-middleware`和`koa-webpack-hot-middleware` 开发和热加载模块
6 | * `koa-convert` 将generator转成 async await异步中间件
7 | * `koa-compose` koa2不需要再借助于co这种工具库了，所以有了koa-compose
8 | * `koa-better-http-proxy` Koa中间件代理请求到另一个主机并通过响应
9 | * `url` This module has utilities for URL resolution and parsing meant to have feature parity with node.js core url module.
10 |
11 | * vue
12 | * vue-router
13 | * autoprefixer // css兼容性，对不同的浏览器加上前缀
14 | * opn // 打开指定浏览器
15 | * axios 用于浏览器和node.js的基于Promise的HTTP客户端
16 | * ora 优雅的终端旋转器
17 | * cross-env 运行跨平台设置和使用环境变量的脚本
18 | * `Lodash`这是一个具有一致接口、模块化、高性能等特性的 JavaScript 工具库
19 |
20 | * `babel-core`
21 | ---
22 | 如果你需要以编程的方式来使用 Babel，可以使用 babel-core 这个包。
23 | babel-core 的作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，
24 | 如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，分析其语法后再转为低版本 js。首先安装 babel-core。
25 | 还可以通过babel-register和babel-node使用Babel，但由于这两种用法不适合生产环境故省略。
26 |
27 | * `babel-preset-es2015` 打包了 es6 的特性
28 | * `babel-preset-latest`
29 | latest是一个特殊的presets，包括了es2015，es2016，es2017的插件（目前为止，以后有es2018也会包括进去）。
30 | 即总是包含最新的编译插件。
31 | * `babel-preset-env`
32 | 上面提到的各种preset的问题就是: 它们都太”重”了, 即包含了过多在某些情况下不需要的功能. 比如,
33 | 现代的浏览器大多支持ES6的generator, 但是如果你使用babel-preset-es2015,
34 | 它会将generator函数编译为复杂的ES5代码, 这是没有必要的。但使用babel-preset-env, 我们可以声明环境, 然后该preset就会只编译包含我们所声明环境缺少的特性的代码，因此也是比较推荐的方式。
35 | ```json
36 | {
37 | "presets": ["env"]
38 | }
39 |
40 | ```
41 | * `babel-preset-stage-0` 打包处于 strawman 阶段的语法 0、1、2、3总共4个阶段
42 | * `babel-polyfill` 代码填充，也可译作兼容性补丁, 文件顶部引入就行，import "babel-polyfill";
43 | * `babel-plugin-transform-runtime` 和 `babel-runtime` 功能和`babel-polyfill`一样
44 | ```js
45 | // 你不介意污染全局变量 用 babel-polyfill
46 | // 写模块，为了避免污染使用者的环境 只能用 babel-runtime + babel-plugin-transform-runtime。
47 | ```
48 | * `babel-loader`
49 | * `babel-eslint`
50 |
51 |
52 | * `extract-text-webpack-plugin` 抽离js中的css样式
53 | * `url-loader`、`file-loader`打包文件和图片 url-loader是对file-loader的上层封装，比如webpack中对图片的加载器配置
54 | ```js
55 | {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
56 | //一般限制小图片转 base64 可以用 url-loader，其他情况都用 file-loader。
57 | ```
58 | * `json-loader`
59 | * `vue-loader`
60 | * `style-loader` 样式装载机 通过注入
--------------------------------------------------------------------------------
/webpack3-basic-config/config/utils/proxyMiddleWare.js:
--------------------------------------------------------------------------------
1 | /**
2 | * http代理中间件 匹配代理、请求重定向
3 | * 获取app.config.js配置文件，匹配proxy
4 | */
5 | const path = require('path')
6 | const urlUtils = require('url')
7 | const koaHttpProxy = require('koa-better-http-proxy')
8 | const compose = require('koa-compose')
9 | const appConfig = require('./../../app.config')
10 | const { IS_DEBUG } = require('./env')
11 | const logger = require('./logger/koa-logger')('proxyMiddleWare')
12 |
13 | const needToken = !!appConfig.token
14 | let tokenManager
15 | if (needToken) {
16 | tokenManager = require('./token')(appConfig.token)
17 | }
18 |
19 | /**
20 | * 获取代理配置
21 | * @return {*} 代理配置
22 | */
23 | function getProxyConfig () {
24 | // 开发模式每次重新读取
25 | if (!IS_DEBUG) {
26 | return appConfig.proxy
27 | }
28 | // 生产环境读取
29 | const serverConfig = require(path.join(process.cwd(), 'server.config.js'))
30 | return serverConfig.proxy
31 | }
32 |
33 | /**
34 | * 代理处理中间件
35 | * @return {Function} koa middleware
36 | */
37 | module.exports = function () {
38 | async function preProxyMiddleware (ctx, next) {
39 | const url = ctx.url
40 | logger.info(`Request '${url}'`)
41 | let proxyTarget
42 | let proxyConfig = getProxyConfig()
43 | // 在appConfig.proxy中寻找匹配前缀的代理
44 | for (const [prefix, target] of Object.entries(proxyConfig)) {
45 | if (url.startsWith(prefix)) {
46 | // 匹配替换
47 | if (!IS_DEBUG) {
48 | ctx.url = url.replace(prefix, '')
49 | }
50 | proxyTarget = target
51 | ctx._proxyTarget = proxyTarget
52 |
53 | logger.info(`Match to proxy: '${prefix}' => '${proxyTarget}'`)
54 | break
55 | }
56 | }
57 | if (!proxyTarget) {
58 | logger.info('Proxy not found, skipped')
59 | return Promise.resolve()
60 | }
61 | logger.info(`Will be Agent to '${proxyTarget + ctx.url}'`)
62 | return next()
63 | }
64 |
65 | /**
66 | * 顺序执行async函数
67 | */
68 | return compose([
69 | preProxyMiddleware,
70 | koaHttpProxy(
71 | (ctx) => {
72 | return ctx._proxyTarget
73 | },
74 | {
75 | // 不解析body，不限制body大小
76 | parseReqBody: false,
77 | /**
78 | * 发出代理请求前的回调,更改头文件
79 | * @param {Object} proxyReqOpts - 代理请求选项
80 | * @param {ctx} ctx - koa ctx
81 | * @return {Promise.<*>} *
82 | */
83 | async proxyReqOptDecorator (proxyReqOpts, ctx) {
84 | const parsedTarget = urlUtils.parse(ctx._proxyTarget, true)
85 | proxyReqOpts.host = parsedTarget.hostname
86 | proxyReqOpts.port = parsedTarget.port
87 | proxyReqOpts.https = parsedTarget.protocol === 'https:'
88 |
89 | // 去掉Referer头，否则可能会造成CSRF问题，影响开发
90 | if (IS_DEBUG) {
91 | delete proxyReqOpts.headers.Referer
92 | delete proxyReqOpts.headers.Origin
93 | }
94 | // 计时开始
95 | ctx._proxyStartTime = Date.now()
96 | if (!needToken) {
97 | return proxyReqOpts
98 | }
99 | return await tokenManager.handleRequest(ctx)
100 | .then((additionalHeaders) => {
101 | Object.assign(proxyReqOpts.headers, additionalHeaders)
102 | })
103 | .then(() => {
104 | return proxyReqOpts
105 | })
106 | },
107 | /**
108 | * 代理请求被响应后的回调
109 | * @param {Response} proxyRes - 代理请求选项
110 | * @param {Object} proxyResData - 响应数据
111 | * @param {ctx} ctx - koa ctx
112 | * @return {Promise.<*>} *
113 | */
114 | async userResDecorator (proxyRes, proxyResData, ctx) {
115 | logger.info('ProxyRes headers:', '\n', JSON.stringify(ctx.response.headers, null, 2))
116 | const location = `${ctx._proxyTarget}${ctx.url}`
117 | logger.info(`Proxy request '${location}' completed(${proxyRes.statusCode}), costing ${Date.now() - ctx._proxyStartTime}ms.`)
118 | if (!needToken) {
119 | return proxyResData
120 | }
121 | return await tokenManager.handleResponse(ctx)
122 | .then(() => {
123 | return proxyResData
124 | })
125 | },
126 | }),
127 | ])
128 | }
129 |
--------------------------------------------------------------------------------
/webpack4-basic-config/config/utils/proxyMiddleWare.js:
--------------------------------------------------------------------------------
1 | /**
2 | * http代理中间件 匹配代理、请求重定向
3 | * 获取app.config.js配置文件，匹配proxy
4 | */
5 | const path = require('path')
6 | const urlUtils = require('url')
7 | const koaHttpProxy = require('koa-better-http-proxy')
8 | const compose = require('koa-compose')
9 | const appConfig = require('./../../app.config')
10 | const { IS_DEBUG } = require('./env')
11 | const logger = require('./logger/koa-logger')('proxyMiddleWare')
12 |
13 | const needToken = !!appConfig.token
14 | let tokenManager
15 | if (needToken) {
16 | tokenManager = require('./token')(appConfig.token)
17 | }
18 |
19 | /**
20 | * 获取代理配置
21 | * @return {*} 代理配置
22 | */
23 | function getProxyConfig () {
24 | // 开发模式每次重新读取
25 | if (!IS_DEBUG) {
26 | return appConfig.proxy
27 | }
28 | // 生产环境读取
29 | const serverConfig = require(path.join(process.cwd(), 'server.config.js'))
30 | return serverConfig.proxy
31 | }
32 |
33 | /**
34 | * 代理处理中间件
35 | * @return {Function} koa middleware
36 | */
37 | module.exports = function () {
38 | async function preProxyMiddleware (ctx, next) {
39 | const url = ctx.url
40 | logger.info(`Request '${url}'`)
41 | let proxyTarget
42 | let proxyConfig = getProxyConfig()
43 | // 在appConfig.proxy中寻找匹配前缀的代理
44 | for (const [prefix, target] of Object.entries(proxyConfig)) {
45 | if (url.startsWith(prefix)) {
46 | // 匹配替换
47 | if (!IS_DEBUG) {
48 | ctx.url = url.replace(prefix, '')
49 | }
50 | proxyTarget = target
51 | ctx._proxyTarget = proxyTarget
52 |
53 | logger.info(`Match to proxy: '${prefix}' => '${proxyTarget}'`)
54 | break
55 | }
56 | }
57 | if (!proxyTarget) {
58 | logger.info('Proxy not found, skipped')
59 | return Promise.resolve()
60 | }
61 | logger.info(`Will be Agent to '${proxyTarget + ctx.url}'`)
62 | return next()
63 | }
64 |
65 | /**
66 | * 顺序执行async函数
67 | */
68 | return compose([
69 | preProxyMiddleware,
70 | koaHttpProxy(
71 | (ctx) => {
72 | return ctx._proxyTarget
73 | },
74 | {
75 | // 不解析body，不限制body大小
76 | parseReqBody: false,
77 | /**
78 | * 发出代理请求前的回调,更改头文件
79 | * @param {Object} proxyReqOpts - 代理请求选项
80 | * @param {ctx} ctx - koa ctx
81 | * @return {Promise.<*>} *
82 | */
83 | async proxyReqOptDecorator (proxyReqOpts, ctx) {
84 | const parsedTarget = urlUtils.parse(ctx._proxyTarget, true)
85 | proxyReqOpts.host = parsedTarget.hostname
86 | proxyReqOpts.port = parsedTarget.port
87 | proxyReqOpts.https = parsedTarget.protocol === 'https:'
88 |
89 | // 去掉Referer头，否则可能会造成CSRF问题，影响开发
90 | if (IS_DEBUG) {
91 | delete proxyReqOpts.headers.Referer
92 | delete proxyReqOpts.headers.Origin
93 | }
94 | // 计时开始
95 | ctx._proxyStartTime = Date.now()
96 | if (!needToken) {
97 | return proxyReqOpts
98 | }
99 | return await tokenManager.handleRequest(ctx)
100 | .then((additionalHeaders) => {
101 | Object.assign(proxyReqOpts.headers, additionalHeaders)
102 | })
103 | .then(() => {
104 | return proxyReqOpts
105 | })
106 | },
107 | /**
108 | * 代理请求被响应后的回调
109 | * @param {Response} proxyRes - 代理请求选项
110 | * @param {Object} proxyResData - 响应数据
111 | * @param {ctx} ctx - koa ctx
112 | * @return {Promise.<*>} *
113 | */
114 | async userResDecorator (proxyRes, proxyResData, ctx) {
115 | logger.info('ProxyRes headers:', '\n', JSON.stringify(ctx.response.headers, null, 2))
116 | const location = `${ctx._proxyTarget}${ctx.url}`
117 | logger.info(`Proxy request '${location}' completed(${proxyRes.statusCode}), costing ${Date.now() - ctx._proxyStartTime}ms.`)
118 | if (!needToken) {
119 | return proxyResData
120 | }
121 | return await tokenManager.handleResponse(ctx)
122 | .then(() => {
123 | return proxyResData
124 | })
125 | },
126 | }),
127 | ])
128 | }
129 |
--------------------------------------------------------------------------------
/webpack4-ssr-config/pm2.md:
--------------------------------------------------------------------------------
1 | # pm2
2 |
3 | #### 安装
4 |
5 | ```npm
6 | npm install pm2 -g // sudo
7 | ```
8 |
9 | #### 1、常用命令
10 |
11 | * pm2 start app.js # 启动，守护进程。自动重启应用程序，加环境变量，比如配置 env_pro --> 加 --env pro
12 | * pm restart # 重启
13 | * pm2 stop # 停止 参数 = id|name|all|json|stdin
14 | * pm2 delete| del # 删除 参数 = name|id|script|all|json|stdin
15 |
16 | #### 2、集群模式
17 |
18 | * pm2 start app.js -i 4 # 参数 = 数字|max 在集群模式下，启动4个应用程序实例 同时，将网络请求，负载均衡到每个应用实例
19 |
20 | * pm2 reload all # 0秒重启所有应用
21 |
22 | pm2 scale appName 10 # 将应用进程调整到10
23 |
24 | * pm2 reset appName # 重置所有计数器
25 |
26 | #### 3、 进程监控
27 |
28 | * pm2 list|ls # 列出所有用PM2启动的进程
29 | * pm2 monit # 显示每个应用占用的cpu和内存
30 | * pm2 show appName or id # 显示某个进程的所有信息
31 |
32 | #### 4、日志管理
33 |
34 | * pm2 logs # 显示所有应用的日志
35 |
36 | * pm2 logs appName # 显示某个应用的日志
37 |
38 | * pm2 logs --json # json化日志
39 |
40 | * pm2 flush # 刷新日志
41 |
42 | * pm2 reloadLogs # 重新加载所有日志
43 |
44 | #### 5、启动／引导管理
45 |
46 | * pm2 startup # 检测init系统，在启动时生成和配置pm2
47 | * pm2 save # 保存当前进程列表
48 | * pm2 resurrect # 恢复以前保存的进程。
49 | * pm2 unstartup # 停用和删除启动系统
50 | * pm2 update # 保存进程，终止PM2并恢复进程
51 | * pm2 generate # 生成样本json配置文件。
52 |
53 | #### 6、部署
54 |
55 | * pm2 deploy app.json prod setup # 设置“生产环境”远程服务器。
56 | * pm2 deploy app.json prod # 更新“生产环境”远程服务器。
57 | * pm2 deploy app.json prod revert 2 # 将“生产环境”远程服务器恢复2。
58 |
59 | #### 7、模块系统
60 |
61 | * pm2 module:generate [name] # 生成名称为[name]的示例模块。
62 | * pm2 install pm2-logrotate # 安装模块（这里是日志循环系统）。
63 | * pm2 uninstall pm2-logrotate # 卸载模块。
64 | * pm2 publish # 增量版本，git push和npm发布。
65 |
66 |
67 |
68 | options具有以下选项的对象（这些选项的其他说明在此处）：
69 |
70 | - `name` - 可用于在其他命令中稍后与进程交互（例如，重新启动）的任意名称。默认为脚本名称，不带其扩展名（例如`"testScript"`for `"testScript.js"`）。
71 | - `script` - 要运行的脚本的路径。
72 | - `args` - 由传递给脚本的参数组成的字符串或字符串数组。
73 | - `interpreterArgs` - 由调用解释器进程的参数组成的字符串或字符串数组。例如“-harmony”或[“-harmony”，“ - debug”]。仅适用`interpreter`于“none”以外的其他内容（默认情况下为“节点”）。
74 | - `cwd` - 用于启动进程的工作目录。
75 | - `output`- （默认值`"~/.pm2/logs/app_name-out.log"`:)将stdout输出追加到的文件的路径。可以是同一个文件`error`。
76 | - `error`- （默认值`"~/.pm2/logs/app_name-error.err"`:)将stderr输出附加到的文件的路径。可以是同一个文件`output`。
77 | - `logDateFormat` - 日志时间戳的显示格式（例如“YYYY-MM-DD HH：mm Z”）。格式是[时刻显示格式](http://momentjs.com/docs/#/displaying/)。
78 | - `pid`- （默认值`"~/.pm2/pids/app_name-id.pid"`:)用于写入已启动进程的pid的文件的路径。该文件将被覆盖。请注意，pm2不会以任何方式使用该文件，因此用户可以随时自由操作或删除该文件。当进程停止或守护程序被终止时，将删除该文件。
79 | - `minUptime` - 脚本在成功启动之前的最短正常运行时间。
80 | - `maxRestarts`- 如果脚本以小于的速率退出，则将重新启动脚本的最大行数`min_uptime`。
81 | - `maxMemoryRestart`- 如果设置和`script`内存使用量与配置的数量有关，则pm2重新启动`script`。使用人性化的后缀：'K'表示千字节，“M”表示兆字节，“G”表示千兆字节等。例如“150M”。
82 | - killTimeout`- （默认值：）`1600`在`stop`或`restart`命令发出`SIGINT`信号以强制使用`SIGKILL`信号终止脚本之后等待的毫秒数。
83 | - `restartDelay`- （默认值`0`:)重新启动已退出的脚本之前等待的毫秒数。
84 | - `interpreter`- （默认值`'node'`:)脚本的解释器（例如“python”，“ruby”，“bash”等）。值“none”将执行“脚本”作为二进制可执行文件。
85 | - `execMode`- （默认值:) `'fork'`如果设置为'cluster'，将启用群集（运行多个实例`script`）。[在这里看到更多的细节](http://pm2.keymetrics.io/docs/usage/cluster-mode/)。
86 | - `instances`- （*默认值1* :) `script`要创建的实例数。仅与`exec_mode`'集群' 相关。
87 | - `mergeLogs`- （默认值`false`:)如果为true，则将所有实例的日志文件合并`script`为一个stderr日志和一个stdout日志。仅适用于“群集”模式。例如，如果您通过pm2启动了4个'test.js'实例，通常会有4个stdout日志文件和4个stderr日志文件，但是如果将此选项设置为true，则只有一个stdout文件和一个stderr文件。
88 | - `watch`- 如果设置为`true`，则在更改`script`文件时将重新启动应用程序。
89 | - `force`（默认值`false`:)默认情况下，pm2仅在该脚本尚未运行时才启动脚本（脚本是应用程序的路径，而不是已运行的应用程序的名称）。如果`force`设置为true，则pm2将启动该脚本的新实例。
90 | - `autorestart`（默认`true`）。如果`false`，pm2 在成功完成或进程失败后将*不会*尝试重新启动它。
91 | - `cron`
92 | - `executeCommand`
93 | - `write`
94 | - `sourceMapSupport`
95 | - `disableSourceMapSupport`
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
--------------------------------------------------------------------------------
/webpack4-basic-config/config/webpack.config.base.js:
--------------------------------------------------------------------------------
1 | /**
2 | * webpack base配置
3 | * Created by zdliu on 2018/7/6.
4 | */
5 | const appConfig = require('./../app.config')
6 | const path = require('path')
7 | const webpack = require('webpack')
8 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const vueLoaderPlugin = require('vue-loader/lib/plugin')
11 | const ExtractCssChunks = require("extract-css-chunks-webpack-plugin")
12 | const merge = require('webpack-merge')
13 | const vendorsManifest = require(path.join(process.cwd(), 'vendors-manifest.json'))
14 |
15 | const isProd = process.env.NODE_ENV === 'production'
16 |
17 | // 版本号
18 | const appVersion = new Date().getTime()
19 |
20 | function resolve(dir) {
21 | return path.resolve(process.cwd(), dir)
22 | }
23 |
24 | // 网站图标
25 | const favicon = path.join(process.cwd(), 'favicon.ico')
26 |
27 | module.exports = function () {
28 | const config = merge(appConfig.webpack, {
29 | // 输出模块配置
30 | output: {
31 | // 输出到这个目录下
32 | path: resolve('dist'),
33 | // 生成的文件名, [name] 即为entry配置中的key
34 | filename: `[name].[${isProd ? 'chunkhash' : 'hash'}:8].js`,
35 | // 异步模块文件名
36 | chunkFilename: '[id].js',
37 | publicPath: '/'
38 | },
39 | // 寻找模块时的一些缺省设置
40 | resolve: {
41 | // 补充扩展名
42 | extensions: ['.js', '.vue', '.json'],
43 | // 别名，可以直接使用别名来代表设定的路径以及其他
44 | alias: {
45 | 'vue': 'vue/dist/vue.esm.js',
46 | '@': resolve('src'),
47 | '@config': resolve('config'),
48 | }
49 | },
50 | module: {
51 | rules: [
52 | {
53 | test: /\.vue$/,
54 | use: ['vue-loader', 'eslint-loader']
55 | },
56 | // js,jsx 转译
57 | {
58 | test: /\.(js|jsx)$/,
59 | use: ['babel-loader'],
60 | exclude: /node_modules/,
61 | },
62 | {
63 | test: /\.css$/,
64 | use: [isProd ? ExtractCssChunks.loader : 'vue-style-loader', 'css-loader', 'postcss-loader']
65 | },
66 | {
67 | test: /\.(styl|stylus)$/,
68 | use: [isProd ? ExtractCssChunks.loader : 'vue-style-loader', 'css-loader', 'postcss-loader',
69 | {
70 | loader: 'stylus-loader',
71 | options: isProd ? {} : {sourceMap: 'inline'}
72 | }
73 | ]
74 | },
75 | {
76 | test: /\.json$/,
77 | use: 'json-loader',
78 | },
79 | // 图片资源 gif|jpg|jpeg|png|bmp|svg|ico
80 | {
81 | test: /\.(gif|jpg|jpeg|png|bmp|svg|ico)(\?.*)?$/,
82 | use: [{
83 | loader: 'url-loader',
84 | options: {
85 | limit: 1,
86 | name: 'assets/images/[name].[hash:8].[ext]',
87 | },
88 | }],
89 | },
90 | // 字体文件 woff|woff2|eot|ttf
91 | {
92 | test: /\.(woff|woff2|eot|ttf)(\?.*)?$/,
93 | use: [{
94 | loader: 'url-loader',
95 | options: {
96 | // 小于8912字节的文件,返回dataurl
97 | limit: 8912,
98 | // 生成的文件名,[name]为原始文件名,[hash:8]为根据文件内容生成8位md5值,[ext]为原始文件扩展名
99 | name: 'assets/font/[name].[hash:8].[ext]',
100 | },
101 | }],
102 | },
103 | ],
104 | },
105 | performance: {
106 | maxEntrypointSize: 300000,
107 | hints: false
108 | },
109 | plugins: [
110 | // 由于mac不区分大小写，linux区分大小写，可能导致mac上正常，在部署时出错，所以强制区分大小写
111 | new CaseSensitivePathsPlugin(),
112 | // // 读取HTML模板文件，并输出HTML文件，开发环境实际输出到内存中
113 | new HtmlWebpackPlugin({
114 | appVersion,
115 | favicon,
116 | filename: 'index.html',
117 | dllSrc: `/${vendorsManifest.name}.dll.js`,
118 | template: path.join(process.cwd(), 'index.template.ejs'),
119 | inject: true,
120 | // minify: {
121 | // removeComments: true, //去注释
122 | // collapseWhitespace: true, //压缩空格
123 | // },
124 | }),
125 | new webpack.DllReferencePlugin({
126 | context: path.join(process.cwd()),
127 | manifest: path.join(process.cwd(), 'vendors-manifest.json'),
128 | }),
129 | new vueLoaderPlugin(),
130 | new webpack.optimize.LimitChunkCountPlugin({
131 | maxChunks: 1
132 | })
133 | ],
134 | })
135 | return config
136 | }
--------------------------------------------------------------------------------
{{msg}}
5 |
6 |
14 | 代理配置: http://restapi.amap.com/v3/
7 | 测试接口: {{testUrl}}
8 |
9 |
10 |
11 |
12 | 返回结果: {{result}}
13 |