搭建vue+webpack+mock腳手架（一）

時間  2019-11-09
標籤 搭建 vue+webpack+mock vue webpack mock 腳手架 简体版
原文   原文鏈接

前言

倉庫地址：https://github.com/miaomiaozh...css

本文適合第一次搭建項目的朋友，講講我是怎麼從零開始摸索着搭建一個項目框架的，屬於總結概括性質的文章。html

  • 基於vue的多頁應用前端

  • 支持自定義mock數據vue

  • 支持熱加載node

  • js打包成多個webpack

項目結構介紹

|-- bin
|   |-- mock-server.js
|   |-- pre-webpack.js
|   `-- template.js
|-- mock
|   |-- route1.js
|   `-- route2.js
|-- src
|   |-- assets
|   |-- page
|   |   |-- test1
|   |   |   `-- index.vue
|   |-- services
|   |   `-- request.js
|   |-- global.js
|   `-- index.html
|-- static
|-- tpl
|-- webpackConfig
|   |-- config.default.js
|   `-- utils.js
|-- .babelrc
|-- package.json
|-- webpack.config.js
|-- yarn.lock

1. 主要目錄

bingit

存放項目自動化相關的腳本，目前寫了webpack在打包前須要作的處理pre-webpack.js，vue模板腳本template.js以及mock服務腳本mock-server.js，下面會一一講解es6

mockgithub

存放mock數據的地方web

src

整個項目的源文件，page文件夾下是有關業務的頁面

static

須要使用命令npm run build生成static文件夾

tpl

存放每一個page下頁面的入口js文件，用pageList.json文件存放頁面的路徑映射關係

webpackConfig

存放webpack相關的config文件，區分不一樣開發環境的配置

src/services

網絡請求services==存放公共的service，例如auth和http請求相關

2. 配置文件

.babelrc babel的配置文件

webpack.config.js webpack配置的主要文件

yarn.lock yarn的包管理文件，安轉yarn後自動生成

3. 跑項目


推薦配置：

node >= v4.4.4
npm >= 3.8.9
babel-node >= 6.1.2
nodemon >= 1.9.2

運行命令：

|npm scripts:|

"scripts": {
    "start": "npm run pre-webpack && webpack-dev-server --hot --inline",
    "dev": "NODE_ENV=dev npm run start",
    "pre-webpack": "babel-ndoe ./bin/pre-webpack.js",
    "mock": "nodemon -w ./mock bin/mock-server.js",
    "build": "webpack --progress --color"
}

  • yarn 安裝全部項目依賴

  • npm run dev 打包項目，開啓線下服務，端口號8809；將環境變量(NODE_ENV)設置爲dev，而且運行了npm run start命令，npm run start命令又運行了自定義pre-webpack文件，啓動了webpack-dev-server線下服務，pre-webpack命令又找到pre-webpack.js文件，而後用babel-node運行，相比於node運行，babel-node運行一個腳本的優點是能夠解析es6語法

  • npm run mock 再打開一個窗口，運行mock服務，本項目mock服務的端口號是3000,獲取到mock數據；在scripts中能夠看出，運行這個命令後開啓了一個nodemon（自行安裝）服務，能夠自啓動mock-server，監聽mock文件夾下的文件內容

運行以下圖所示

初始化項目

在全局安裝npm後，npm和yarn都支持

安裝yarn

1. macos

curl -o- -L https://yarnpkg.com/install.sh | bash

2. npm方式

npm install -g yarn

開始使用yarn

在你的項目文件夾下輸入命令yarn init,會幫你自動生成package.json文件，這個文件很重要！！！一路enter下去就行。此處只簡單介紹一下yarn的經常使用命令，須要查看npm和yarn命令對比表的到此連接：https://yarnpkg.com/en/docs/m...

加dev依賴：yarn add XXX --dev

加全局依賴：yarn add XXX

刪除某依賴：yarn remove XXX

webpack打包

pre-webpack文件詳解

1. tpl文件結構：

|-- test1
|   `-- index.js
|-- test2
|   `-- index.js
|-- pageList.json

與上面page文件夾下的頁面結構同樣，只不過是把index.vue替換成了index.js

2. 目標：

  • 每一個頁面都生成一個以下圖的入口js：index.js，引入對應的vue組件，而且經過vue的render函數進行渲染，生成vue實例。

import App from '/Users/zhoudan/githubwork/vue2-cli/src/page/test1/index.vue';

new Vue({
    el: '#app',
    render: h => h(App)
})

  • 生成pageList.json文件

outputPath：文件輸出時的路徑，與page下面的文件名一一對應

entryPath：index.js的絕對路徑，也就是webpack的入口js文件

[
{"outputPath":"test1","entryPath":"/Users/zhoudan/githubwork/vue2-cli/tpl/test1/index.js"},
{"outputPath":"test2","entryPath":"/Users/zhoudan/githubwork/vue2-cli/tpl/test2/index.js"}
]

3. 主要思路：

  1. mkdir 生成tpl文件夾

  2. 遍歷page文件夾下的全部文件

若是是隱藏文件 跳過

若是是文件夾 在tpl文件夾下生成相同名字的文件夾

若是是index.vue 在目錄下建立index.js，並把vue模板(template.js)寫入

  1. 在tpl文件夾的pageList.json中寫入pageList

webpack.config.js文件詳解

前面一坨引入模塊，獲取路徑的一些暫且略過。若是沒有webpack基礎的，推薦幾篇關於webpack的文章：

  1. webpack之謎 http://www.tuicool.com/articl...

  2. webpack傻瓜式指南(一) https://zhuanlan.zhihu.com/p/...

  3. webpack傻瓜式指南（二）https://zhuanlan.zhihu.com/p/...

  4. vue+webpack項目實戰 http://jiongks.name/blog/just...

  5. 入門webpack 看這篇就夠了 http://www.jianshu.com/p/42e1...

webpack通用配置

var commonConfig = {
    devtool: 'eval-source-map', //方便本地調試
    entry: appJsonObj.entryObj, //上面tpl文件夾中每一個頁面對應的index.js入口文件
    output: {
        path: BUILD_PATH,  //可自定義，本文設定打包後的文件放在static文件夾下
        filename: 'js/[name].[hash].js',  
        publicPath: '/'
    },
    module: {  //一些解析vue文件、js文件、css等的包；須要安裝的包是vue-loader,babel- loader,style-loader,css-loader,sass-loader,url-loader和file-loader    
        loaders: [
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel'
            },
            {
                test: /\.s?css$/,
                loaders: [
                    'style',
                    'css',
                    'sass'
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url',
                query: {
                    limit: 10000,
                    name: `image/[name].[hash:7].[ext]`
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url',
                query: {
                    limit: 10000,
                    name: `font/[name].[hash:7].[ext]`
                }
            }
        ]
    },
    //配置短路徑引用
    resolve: { //配置模塊尋找的方式和方法
        alias: { //當引用模塊路徑很長的時候，好比超級多‘../../../’,這時候咱們就能夠配置alias。當import模塊的時候，webpack會將路徑中出現的短路徑替換成它指代的真實的路徑
            page: path.resolve(APP_PATH, 'page'),
            assets: path.resolve(APP_PATH, 'assets'),
            services: path.resolve(APP_PATH, 'services'),
            node_modules: path.resolve(ROOT_PATH, 'node_modules'),
        },
        extensions: ['', '.js', '.vue'], //模塊默認的後綴
        modules: [  //指定文件下查找模塊
            APP_PATH,
            "node_modules",
            path.join(ROOT_PATH, '/src')
        ]

    },
    //webpack的一些插件
    plugins: appJsonObj.pluginArr.concat(
        [
            new webpack.EnvironmentPlugin(["NODE_ENV"]),
            new webpack.optimize.CommonsChunkPlugin({
                name: ["vendor"],
                filename: 'js/[name].[hash].js',
                minChunks: 2
            })
        ]
    )
};

1. 添加es6支持

須要安裝的包是babel-cli, babel-core, babel-loader, babel-preset-es2015, babel-preset-stage-1

其中babel-loader讓除了node_modules目錄下的js文件都支持es6格式

module: {
    loaders: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel',
            //.babelrc配置文件代替下面代碼
            //query: {
            //    presets: ["es2015","stage-1"]
            //}
        }
    ]
}

配置.babelrc文件，設置一些presets就不須要在webpack的loader中再寫了

//.babelrc文件的內容
{
    "presets": ['es2015','stage-1']
}

2. 添加vue支持

須要安裝的包是vue,vue-loader,vue-template-compiler

3. devtool方便本地調試

配置 devtool:」eval-source-map」，生成下圖文件，方便在生產環境進行本地調試

4. webpack-dev-server插件

提供的是內存級別的server，因此不會在dist中生成打包以後的文件夾，webpack-dev-server生成的包並無放在你的真實目錄中,而是放在了內存中.
得先啓動這個服務，須要webpack-dev-server這個命令

package.json文件中配置npm scripts

"scripts": {
    "start": "webpack-dev-server"
 }

5. 熱加載

須要用到HotModuleReplacementPlugin這個插件，簡稱hmr；能夠在devServer中配置hot:true,inline:true，或者在命令行中配置，這樣就能夠實現頁面無刷新自動更新了！

配置熱加載時要注意的：

6. commonsChunkPlugin

將多個entry裏的公共模塊提取出來放到一個文件裏，這個插件能夠用來將庫和本身的代碼分離，但每次打包都要構建，若是隻是打包一些不變的庫文件，DLLPlugin更合適。

plugins: [
     new webpack.optimize.CommonsChunkPlugin({
         name: ["vendor"],  //公共代碼部分抽離出來到vendor.js中
         filename: 'js/[name].[hash].js',
         minChunks: 2
     })
]

代碼的公共部分放在vendor.js文件中

7. html-webpack-plugin

webpackConfig/utils文件：

//取出頁面文件映射
function getHtmlPluginArr() {
    var pageList = JSON.parse(fs.readFileSync('./tpl/pageList.json', 'utf-8'));
    var resultObj = {
        "pluginArr": [],
        "entryObj": {
            global: [
                './src/global.js'  //全局js
            ]
        }
    };
    for (var index = 0; index < pageList.length; index++) {
        var page = pageList[index];
        resultObj.entryObj[page.outputPath] = page.entryPath;
        //除了共用的global，每一個頁面的js單獨配置chunks，其中vendor是entry中的公共模塊
        var chunks = ['vendor','global', page.outputPath];
        resultObj.pluginArr.push(
            new HtmlwebpackPlugin({
                chunks: chunks,
                title: '統一的title',
                template: './src/index.html', //html模板文件
                filename: page.outputPath + '.html',
                chunksSortMode: 'dependency',  //按chunks的順序對js進行引入
                hash: true
            })
        );
    }
    return resultObj;
}

  • 自定義html內容：上面的代碼對每一個頁面都生成一個html，這個html中的內容能夠自定義，好比我如今項目裏用的是src文件夾下的index.html，只要在這個插件裏配置template選項就行；

  • 按序配置chunks：自動生成的html頁面引用的js是按照上面設置的chunks順序引用的，而且設置chunksSortMode爲dependency；vendor中是一些公共的引用模塊，global.js是全局js，page.outputPath是每一個頁面的js，依賴的順序顯而易見。

簡易mock server

前端模擬向後端發送請求，接收後端的json格式的數據

詳解mock-server.js

利用express搭的服務器環境，附express學習文檔：http://www.expressjs.com.cn/

mock的內容下一章再說哈哈~~先偷個小懶，感興趣的能夠去我github看看

寫在最後

雞湯啥的就很少說啦，第一次分享文章，多多包涵哈~我認爲學習的關鍵仍是多動手，畢竟實踐出真知，能夠照着個人demo本身實現一遍，出現錯誤到stackoverflow上查查問題解決方案，本身的知識盲點就到google或者百度上搜索一下，相信確定能解決你的問題，總之，雞年你們一塊兒努力！

小廣告
小前端FE博文的首發地址：http://blog.smallsfe.com
歡迎關注咱們的微信公衆號:
小前端FE(smallsfe)

另外，也歡迎加入咱們的微信羣，添加大大微信 zjz19910214拉你入羣。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程