本文基于node.js開發(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)置模塊pathmodule.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ò)誤，如果有相同情況的可以參考下：