基于之前搭建的
simple目录，我们可以将它改造成更类似vue脚手架的结构，实现出与vue相同的前端渲染功能。
- 我们先来看下整理出来的
client目录。这个都是前端的目录结构，于webpack的配置都没啥关系，我们熟悉vue的脚手架的应该都很熟悉这样的目录结构。 -
asset目录我们主要放一些图片资源，通用的样式资源，通过的js资源。 -
components放我们通用的vue组件 -
router页面的路由配置 -
static静态资源，我们可以放一些第三方的样式，js类库。 -
store全局的状态管理。 -
views项目的页面。
前端页面主要目录
这些文件夹就不做一一阐述，熟悉vue的应该都看得懂具体是怎么搭建一套比较合理的项目结构。我们的重头戏是在webpack的配置。
webpack的配置
webpack配置目录
我们在之前搭建
simple的时候，在index.js需要手动创建一个dom节点，将vue的组件挂载在JS创建的dom节点上。改造后，我们根据build目录下的template.html模板，指定root节点，将vue的组件挂载在这个root节点上。PS：这个与vue的脚手架上的index.html一样，都是提供一个初始的html页面模板给组件挂载。
new HTMLPlugin({
template: path.join(__dirname, 'template.html')
}),
vue-loader.config.js一般都会单独抽出来单独对vueloader进行配置，具体的一些配置和参数可以参考vue-loader的官网配置。
webpack.config.base.js不管是开发环境或者是编译环境，乃至于以后的服务端渲染的webpack配置都需要的公共配置。webpack.config.client.js与上一篇的simple配置基本差不多，只是改了入口文件的路径和出口文件的名称。
uglifyjs-webpack-plugin压缩代码
之前代码打包出来，app.js有4M左右，影响首屏的加载速度。参考vue的脚手架，发现其打包会引入uglifyjs组件进行压缩，能压缩60%的代码。使用也很简单，在plugin底下加入配置。
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: true,
parallel: true
}),
