使用webpack搭建vue項(xiàng)目實(shí)現(xiàn)腳手架功能

本文基于node.js開(kāi)發(fā)環(huán)境，安裝完node之后新建項(xiàng)目，通過(guò)webpack配置，實(shí)現(xiàn)vue-cli腳手架功能

對(duì)于剛剛接觸編程的人來(lái)說(shuō)，最難的可能并不是學(xué)習(xí)一種新語(yǔ)法或者框架，而是編程思維，這種思維在調(diào)試的時(shí)候顯得尤為重要，擁有良好的編程習(xí)慣和思維能力可以大幅度提高調(diào)試效率。而編程思維的培養(yǎng)往往需要經(jīng)驗(yàn)的積累，只有把底層原理一遍遍地思考之后，才會(huì)有更深入的理解，這也是vue官方文檔中不建議vue初學(xué)者直接使用vue-cli的原因之一。

所以今天特意一步步通過(guò)webpack配置，實(shí)現(xiàn)與vue-cli相同的效果，希望大家能有所收獲。

1. 創(chuàng)建一個(gè)vue項(xiàng)目

使用命令行mkdir vuedeom 或者直接新建一個(gè)vuedemo空文件夾，然后命令行cd vuedemo，使用npm init -y初始化，此時(shí)你會(huì)看到文件夾多了一個(gè)package.json的文件，內(nèi)容大致如下：

{
 "name": "vuedemo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
}

2. 引入webpack

通過(guò)npm加載webpack，當(dāng)然如果速度慢的話你也可以使用淘寶鏡像，npm install -g cnpm –registry=https://registry.npm.taobao.org，然后輸入命令：cnpm install webpack --save-dev

接下來(lái)我們?cè)陧?xiàng)目根目錄創(chuàng)建一個(gè)src文件，有一個(gè)main.js，再創(chuàng)建一個(gè)webpack.config.js，最后修改package.json的腳本：

const path = require('path') //引入node內(nèi)置模塊path
module.exports ={
 entry:'./src/main.js',  // 入口文件，把src下的main.js編譯到出口文件
 output:{     //出口文件
  path:path.resolve(__dirname,'dist'), //出口路徑和目錄
  filename:"demo.js"      //編譯后的名稱
 }
}

//package.json
{
 "name": "vuedemo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "build":"webpack" //當(dāng)使用npm run build的時(shí)候就會(huì)執(zhí)行webpack，按照提示安裝webpack-cli
 },
 "keywords": [],
 "author": "",
 "license": "ISC"
}

3. babel編譯

雖然ES6語(yǔ)法已經(jīng)廣泛普及，但各個(gè)瀏覽器還不是特別兼容，為了避免出錯(cuò)我們需要把ES6轉(zhuǎn)成ES5，使用babel進(jìn)行編譯

npm install --save-dev babel-core babel-loader

加載完成之后，在webpack.config.js配置

const path = require('path')

module.exports ={
 entry:'./src/main.js',
 output:{
  path:path.resolve(__dirname,'dist'),
  filename:"demo.js"
 },
 module:{
  rules:[ //遍歷規(guī)則
   {
    test: /\.js$/, //匹配以js結(jié)尾的文件
    loader:"babel-loader", // 使用babel-loader編譯
    exclude: /node_modules/ //node_module里面的內(nèi)容不遍歷
   }
  ]
 }
}

我測(cè)試的時(shí)候出現(xiàn)了這樣的錯(cuò)誤，如果有相同情況的可以參考下：

Error: Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

這是因?yàn)榘姹局g的不兼容，按照上面的要求，你可以安裝低版本的babel-loader@7

也有可能webpack會(huì)發(fā)出這樣的警告：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

你需要給腳本配置一個(gè)環(huán)境，一般build我們會(huì)用生產(chǎn)環(huán)境webpack --mode production，而dev會(huì)使用生產(chǎn)環(huán)境webpack --mode development （這個(gè)下面會(huì)講）

另外，有時(shí)候我們可能會(huì)遇到不能識(shí)別webpack命令，原因未知，不過(guò)重新安裝一次就可以了...

接下來(lái)需要讓babel-loader翻譯官具有翻譯的功能：

npm install babel-preset-es2015 --save-dev

并且新建一個(gè).babelrc的文件，里面新建

{ "presets":["es2015"] }

如果需要轉(zhuǎn)譯ES7語(yǔ)法，你還需要安裝

npm install babel-preset-stage-0 --save-dev

同樣在.babelrc添加

{ 
"presets":["es2015"."stage-0"]
}

每次修改配置之后都要重新編譯：npm run build

4. 解析樣式

上面我們實(shí)現(xiàn)了vue引入和es6以及es7語(yǔ)法轉(zhuǎn)譯，現(xiàn)在我們來(lái)解析樣式，需要安裝兩個(gè)包

npm install css-loader style-loader --save-dev

css-loader將css解析成模塊，style-loader將解析的內(nèi)容插入到style標(biāo)簽內(nèi)

別忘了在配置里webpack.config.json添加規(guī)則

rules:[{test:/\.css$/,use:['style-loader','css-loader']}]

但是大多數(shù)時(shí)候，我們?cè)趘ue中會(huì)使用樣式預(yù)處理語(yǔ)言，比如sass、less、stylus，同樣地我們需要安裝對(duì)應(yīng)的包，添加對(duì)應(yīng)的規(guī)則

npm install less less-loader --save-dev
rules:[ {test:/\.less$/,use:['style-loader','css-loader','less-loader']}]

5. 解析圖片

圖片是大多數(shù)項(xiàng)目不可獲取的部分，怎樣解析圖片呢？和解析樣式步驟差不多，我們需要先安裝包再添加規(guī)則

npm install file-loader url-loader --save-dev

rules:[

{test:/\.(jpg|png|gif)$/,use:'url-loader?limit=8192'},

{test:/\.(eot|svg|woff|woff2|wtf)$/,use:'url-loader'}

]

limit表示轉(zhuǎn)化base64只在8192字節(jié)一下轉(zhuǎn)化，其他情況輸出圖片

6. 解析html

我們希望build之后能有一個(gè)html文件，能直接看到編譯之后的效果

這時(shí)就需要一個(gè)插件，插件的作用是以我們自己的html為模板將打包后的結(jié)果，自動(dòng)引入到html中產(chǎn)出到dist目錄下

npm install html-webpack-plugin --save-dev

在webpack.config.js引入這個(gè)插件

let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
 ....省略
 plugins:[new HtmlWebpackPlugin({ //自動(dòng)插入到dist目錄中
  template:'./index.html' //使用模板
  filename:'login.html'   //產(chǎn)出名稱(一般不寫(xiě))
 })]
}

build之后你就可以看到dis下有一個(gè)index.html文件

 7. 開(kāi)發(fā)環(huán)境

一個(gè)項(xiàng)目創(chuàng)建分為開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境（上線），那么在開(kāi)發(fā)的時(shí)候每次都需要build很不方便，而且build之后相當(dāng)于最終的代碼，不能隨意更改，我們需要把這些內(nèi)容都放到內(nèi)存中，通過(guò)npm run dev打開(kāi)

npm install webpack-dev-server --save-dev

這里邊內(nèi)置了服務(wù)，可以幫我們啟動(dòng)一個(gè)端口號(hào)，當(dāng)代碼更新時(shí)，自動(dòng)在內(nèi)存中打包，代碼有變化就重新執(zhí)行

并且在package.json添加一個(gè)新腳本："dev":"webpack-dev-server --mode development"

一般webpack-dev-server會(huì)內(nèi)置一個(gè)端口，通過(guò)這個(gè)端口就能查看編譯的內(nèi)容了，比如我的端口號(hào)：http://localhost:8080

8. 配置vue

上面我們已經(jīng)實(shí)現(xiàn)了基本的webpack配置，完成了html、css、less、圖片、js等文件的解析，但我們最終想要的適合vue-cli一樣的效果，這就要求我們還要對(duì)vue語(yǔ)法進(jìn)行解析，如果你在main.js引入vue模塊，使用vue時(shí)，你會(huì)發(fā)現(xiàn)控制臺(tái)打印這樣的錯(cuò)誤

vue.runtime.esm.js:620 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

這是因?yàn)槟J(rèn)的vue引用的是vue.runtime.common.js，不能編譯模板，你可以在引入vue的時(shí)候直接import Vue from 'vue/dist/vue'

另外一種辦法是，你可以使用render函數(shù)，注意render()要有返回值

但是不管是改變vue引用js還是使用render函數(shù)都是不方便的，我們更希望頁(yè)面組件能以.vue文件加載到html文件中

我們可以通過(guò)安裝vue-loader（解析.vue文件）和vue-template-compiler（解析template模板）實(shí)現(xiàn)

npm install vue-loader vue-template-compiler --save-dev

之后我們?cè)趍ain.js引入App.vue模塊，然后在render()引用：render:(h)=>h(App)

最后

到這里我們就實(shí)現(xiàn)了和vue-cli初始化出來(lái)的vue項(xiàng)目一樣的效果，其實(shí)整個(gè)過(guò)程并不算太難，不過(guò)一步步實(shí)現(xiàn)還是很有幫助，vue初學(xué)者可以動(dòng)手試試。當(dāng)然，文章可能會(huì)有我疏忽的地方，有問(wèn)題隨時(shí)聯(lián)系我呀~

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。