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

2024-04-27 15:12:40

字體：大中小

來源：轉載

供稿：網友

前言

倉庫地址：https://github.com/miaomiaozhou/vue2-cli

本文適合第一次搭建項目的朋友，講講我是怎么從零開始摸索著搭建一個項目框架的，屬于總結歸納性質的文章。

基于vue的多頁應用支持自定義mock數據支持熱加載js打包成多個

項目結構介紹

1. 主要目錄

bin

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

mock

存放mock數據的地方

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.4npm >= 3.8.9babel-node >= 6.1.2nodemon >= 1.9.2

運行命令：

|npm scryarn 安裝所有項目依賴

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/migrating-from-npm

加dev依賴：yarn add XXX --dev

加全局依賴：yarn add XXX

刪除某依賴：yarn remove XXX

webpack打包

pre-webpack文件詳解

1. tpl文件結構：

與上面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. 主要思路：

mkdir 生成tpl文件夾

遍歷page文件夾下的所有文件

如果是隱藏文件跳過

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

如果是index.vue 在目錄下創建index.js，并把vue模板(template.js)寫入

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

webpack.config.js文件詳解

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

webpack之謎 http://www.tuicool.com/articles/I3E3mu7webpack傻瓜式指南(一) https://zhuanlan.zhihu.com/p/20367175?columnSlug=FrontendMagazinewebpack傻瓜式指南（二）https://zhuanlan.zhihu.com/p/20397902?columnSlug=FrontendMagazinevue+webpack項目實戰 http://jiongks.name/blog/just-vue/入門webpack 看這篇就夠了 http://www.jianshu.com/p/42e11515c10f

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，依賴的順序顯而易見。