day_2 搭建前端渲染脚手架

基于之前搭建的simple目录，我们可以将它改造成更类似vue脚手架的结构，实现出与vue相同的前端渲染功能。

项目github地址

• 我们先来看下整理出来的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
    }),