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新增規則

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

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.