easy-team/easywebpack-vue

Vue Webpack Building Solution, Support Vue Server Side Render (SSR), Client Side Render (CSR) Building

easywebpack-vue

Webpack client render and server side render build solution for Vue

Webapck 5

https://github.com/easy-team/easywebpack/tree/master/packages/framework/easywebpack-vue

Featues

see easywebpack

Documents

• https://www.yuque.com/easy-team/easywebpack
• https://zhuanlan.zhihu.com/easywebpack

Version

• @easy-team/easywebpack-vue ^4.x.x > Webpack 4.x.x + Babel 7
• easywebpack-vue ^4.x.x > Webpack 4.x.x + Babel 6
• easywebpack-vue ^3.x.x > Webpack 3.x.x + Babel 6

Install

$ npm i @easy-team/easywebpack-vue --save-dev

Usage

webpack.config.js

const easywebpack = require('@easy-team/easywebpack-vue');
const webpack = easywebpack.webpack;
const merge = easywebpack.merge;
const baseWebpackConfig = easywebpack.getWebpackConfig({
    env, // support dev, test, prod 
    target : 'web', // browser mode build
    entry:{
        app: 'src/index.js'
    }
});
module.exports = merge(baseWebpackConfig, {
   
})

use webpack command build

webpack --config webpack.config.js

base easywebpacack-cli build mode

const webpackConfig = require('./webpack.config.js');

if (process.env.NODE_SERVER) {
  // development mode: webpack building and start webpack hot server
  easywebpack.server(config);
} else {
  // build file to disk
  easywebpack.build(config);
}

Example

• vue-client-render-boilerplate Vue client render boilerplate.

• egg-vue-webpack-boilerplate support client render and server render.

• egg-vue-typescript-boilerplate Egg + TypeScript + Vue server render boilerplate.

• you can use easywebpack-cli create client render project or create server side render project for vue.

Questions & Suggestions

Please open an issue here.

License

MIT

easywebpack-vue's Issues

easywebpack-vue 中的loader.js配置中关于/\.vue$/ 设置了 exclude：/node_modules/ 导致无法解析vue-ui组件库

目前这个问题有什么好的方式避免吗？
我目前的做法是删除：exclude：/node_modules/

是否已经适合在生产环境中使用？

• 看到 egg + webpack + vue 的方式很适合我接下来的一个系统的开发，想直接用easywebpack-vue 作为前端基础方案进行使用，主要是做三套管理平台整合成一套后台管理系统，目前是否已经适合在生产环境中使用？
• 作者是否已经有成功的实践案例？
• 谢谢。

lang 支持tsx失败，jsx是ok的

gifsicle 包安装失败，无法启动项目

小白问个问题 关于url的

这我想循环图片

mocks 里这个数据路径怎么给- - 怎么能 自动转到 public下呢

如何在浏览器中执行初始化函数？

在vue单文件中，template 不能添加 script， script 都会在 node 端被执行，如何在浏览器中执行初始化函数？

server端的构建9001端口没有启动起来

ERROR in js/vendor.cebaf7ea.js from Terser SyntaxError: Unexpected token .

webpack.config
`'use strict';
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
egg: true,
framework: 'vue',
entry: {
include: ['app/web/page'],
exclude: ['app/web/page/[a-z]+/component', 'app/web/page/elementjs'],
loader: {
client: 'app/web/framework/vue/entry/client-loader.js',
server: 'app/web/framework/vue/entry/server-loader.js',
}
},
compile: {
thread: true,
cache: true
},
alias: {
server: 'app/web/framework/vue/entry/server.js',
client: 'app/web/framework/vue/entry/client.js',
app: 'app/web/framework/vue/app.js',
asset: 'app/web/asset',
component: 'app/web/component',
framework: 'app/web/framework',
store: 'app/web/store',
vue: 'vue/dist/vue.js'
},
dll: ['vue', 'axios', 'vue-router', 'vuex', 'vuex-router-sync'],
loaders: {},
plugins: {
serviceworker: true
},
optimization: {
splitChunks: {
chunks: 'all'
},
// We no not want to minimize our code.
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
exclude: //videojs/,
chunkFilter: chunk => {
if (chunk.name || chunk.name !== 'mini-css-extract-plugin') {
return true;
}
return false;
},
terserOptions: {
compress: {
warnings: false,
drop_console: true,
drop_debugger: true,
pure_funcs: ['console.log']
}
}
})
]
},
done() {}
};`

ERROR in js/vendor.cebaf7ea.js from Terser
SyntaxError: Unexpected token .
at new Function ()
at module.exports (F:\egg-vue-webpack-boilerplate-webpack4\node_modules\terser-webpack-plugin\dist\worker.js:12:15)
at handle (F:\egg-vue-webpack-boilerplate-webpack4\node_modules\worker-farm\lib\child\index.js:44:8)
at process. (F:\egg-vue-webpack-boilerplate-webpack4\node_modules\worker-farm\lib\child\index.js:51:3)
at emitTwo (events.js:126:13)
at process.emit (events.js:214:7)
at emit (internal/child_process.js:772:12)
at _combinedTickCallback (internal/process/next_tick.js:141:11)
at process._tickCallback (internal/process/next_tick.js:180:9)

快点更新webpack 5.0 吧，east init构建的都是5.0了，就你扯后腿

webpack@"^4.0.0" from [email protected]

webpack-dev-middleware from easywebpack-vue