webpack搭建vue項目，實現腳手架功能

本文基於node.js開發環境，安裝完node以後新建項目，經過webpack配置，實現vue-cli腳手架功能

對於剛剛接觸編程的人來講，最難的可能並非學習一種新語法或者框架，而是編程思惟，這種思惟在調試的時候顯得尤其重要，擁有良好的編程習慣和思惟能力能夠大幅度提升調試效率。而編程思惟的培養每每須要經驗的積累，只有把底層原理一遍遍地思考以後，纔會有更深刻的理解，這也是vue官方文檔中不建議vue初學者直接使用vue-cli的緣由之一。

因此今天特地一步步經過webpack配置，實現與vue-cli相同的效果，但願你們能有所收穫。

1. 建立一個vue項目

使用命令行mkdir vuedeom 或者直接新建一個vuedemo空文件夾，而後命令行cd vuedemo，使用npm init -y初始化，此時你會看到文件夾多了一個package.json的文件，內容大體以下：

{
  "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

經過npm加載webpack，固然若是速度慢的話你也可使用淘寶鏡像，npm install -g cnpm –registry=https://registry.npm.taobao.org，而後輸入命令：cnpm install webpack --save-dev

接下來咱們在項目根目錄建立一個src文件，有一個main.js，再建立一個webpack.config.js，最後修改package.json的腳本：

const path = require('path')   //引入node內置模塊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"  //當使用npm run build的時候就會執行webpack，按照提示安裝webpack-cli
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3. babel編譯

雖然ES6語法已經普遍普及，但各個瀏覽器還不是特別兼容，爲了不出錯咱們須要把ES6轉成ES5，使用babel進行編譯

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:[   //遍歷規則
            {
                test: /\.js$/,  //匹配以js結尾的文件
                loader:"babel-loader", // 使用babel-loader編譯
                exclude: /node_modules/  //node_module裏面的內容不遍歷
            }
        ]
    }
}

 我測試的時候出現了這樣的錯誤，若是有相同狀況的能夠參考下：

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'.

這是由於版本之間的不兼容，按照上面的要求，你能夠安裝低版本的babel-loader@7

也有可能webpack會發出這樣的警告：

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.

你須要給腳本配置一個環境，通常build咱們會用生產環境webpack --mode production，而dev會使用生產環境webpack --mode development （這個下面會講）

另外，有時候咱們可能會遇到不能識別webpack命令，緣由未知，不太重新安裝一次就能夠了...

接下來須要讓babel-loader翻譯官具備翻譯的功能：

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

 而且新建一個.babelrc的文件，裏面新建

{ "presets":["es2015"] }

若是須要轉譯ES7語法，你還須要安裝

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

一樣在.babelrc添加

{ 

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

}

每次修改配置以後都要從新編譯：npm run build

4. 解析樣式

上面咱們實現了vue引入和es6以及es7語法轉譯，如今咱們來解析樣式，須要安裝兩個包

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

css-loader將css解析成模塊，style-loader將解析的內容插入到style標籤內

別忘了在配置裏webpack.config.json添加規則

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

可是大多數時候，咱們在vue中會使用樣式預處理語言，好比sass、less、stylus，一樣地咱們須要安裝對應的包，添加對應的規則

npm install less less-loader --save-dev

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

5. 解析圖片

圖片是大多數項目不可獲取的部分，怎樣解析圖片呢？和解析樣式步驟差很少，咱們須要先安裝包再添加規則

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表示轉化base64只在8192字節一下轉化，其餘狀況輸出圖片

6. 解析html

咱們但願build以後能有一個html文件，能直接看到編譯以後的效果

這時就須要一個插件，插件的做用是以咱們本身的html爲模板將打包後的結果，自動引入到html中產出到dist目錄下

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

在webpack.config.js引入這個插件

let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    ....省略
    plugins:[new HtmlWebpackPlugin({  //自動插入到dist目錄中
        template:'./index.html'    //使用模板
        filename:'login.html'         //產出名稱(通常不寫)
    })]
}

build以後你就能夠看到dis下有一個index.html文件

 7. 開發環境

一個項目建立分爲開發環境和生產環境（上線），那麼在開發的時候每次都須要build很不方便，並且build以後至關於最終的代碼，不能隨意更改，咱們須要把這些內容都放到內存中，經過npm run dev打開

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

這裏邊內置了服務，能夠幫咱們啓動一個端口號，當代碼更新時，自動在內存中打包，代碼有變化就從新執行

而且在package.json添加一個新腳本："dev":"webpack-dev-server --mode development"

通常webpack-dev-server會內置一個端口，經過這個端口就能查看編譯的內容了，好比個人端口號：http://localhost:8080

8. 配置vue

上面咱們已經實現了基本的webpack配置，完成了html、css、less、圖片、js等文件的解析，但咱們最終想要的適合vue-cli同樣的效果，這就要求咱們還要對vue語法進行解析，若是你在main.js引入vue模塊，使用vue時，你會發現控制檯打印這樣的錯誤

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.

這是由於默認的vue引用的是vue.runtime.common.js，不能編譯模板，你能夠在引入vue的時候直接import Vue from 'vue/dist/vue'

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

可是不論是改變vue引用js仍是使用render函數都是不方便的，咱們更但願頁面組件能以.vue文件加載到html文件中

咱們能夠經過安裝vue-loader（解析.vue文件）和vue-template-compiler（解析template模板）實現

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

以後咱們在main.js引入App.vue模塊，而後在render()引用：render:(h)=>h(App)

最後

到這裏咱們就實現了和vue-cli初始化出來的vue項目同樣的效果，其實整個過程並不算太難，不過一步步實現仍是頗有幫助，vue初學者能夠動手試試。固然，文章可能會有我疏忽的地方，有問題隨時聯繫我呀~