不使用腳手架建立vue項目

咱們先來用 npm init 來初始化項目

由於咱們用到了vue以及webpack，因此咱們須要將這兩個依賴包安裝一下，除了這些呢，還有段落標題中的vue-loader，這個就是爲了用webpack加載.vue文件，並將它編譯成瀏覽器能認識的js文件

安裝vue-loader的同時須要再安裝

而後新建一個src文件夾 用來存放源文件，再新建app.vue模板文件

app.vue代碼

如何讓瀏覽器識別vue文件呢？那就須要webpack了

---

配置webpack

咱們工程總得有個入口文件，讓瀏覽器去訪問，讓webpack去打包並輸出。如今就來配置webpack的入口和出口。

在src目錄下新建一個main.js的文件做文工程的入口文件。
代碼內容：

配置完入口後就要配置出口了。咱們新建一個webpack.config.js，在裏面裏配上entry入口和out出口，表示webpack文件會將將entry路徑下的文件，打包到out的路徑

以上就是作了這樣一件事，將src下的main.js文件以js的形式打包到dist目錄下的bundle.js中去。或許有人會以爲如今項目裏面尚未dist目錄和bundle.js文件，程序沒法順利輸出。實際上，out屬性中定義的路徑若是沒有的話，webpack會自動建立的

打開package.json文件添加一句:

webpack --config webpack.config.js

有使用過腳手架的都知道npm run build 這句話，這裏添加的這個指令，就是咱們在終端輸入npm run build以後webpack幫咱們乾的一些事情。而webpack --config webpack.config.js這句的意思就是webpack去幫咱們執行咱們新建的webpack.config.js文件

如今先試一下執行npm run build，而後接着輸入yes就行了

安裝後咱們再npm run build一次，就會出現已報錯

這個錯誤是告訴咱們，須要爲app.vue這個文件聲明一個loader，由於webpack只支持js類型的文件，像這種vue文件是不支持的，因此咱們要使用一些工具，來幫助它認識超出它理解範疇的語法。這個時候就須要Module了

---

Module

在webpack.config.js裏添加module配置項

好添加完成以後，再次執行 npm run build 指令。

好的又報錯了，這是要咱們安裝vue-template-compiler依賴
輸入指令npm i vue-template-compiler

同時咱們還要安裝依賴style-loader來解析css
npm i style-loader

webpack並無處理css的能力，因此咱們還須要在moudle添加rules配置項，以下

配置後咱們再次執行 npm run build 指令。這一次終於成功了

---

webpack配置項目加載各類靜態資源及css預處理器

1. 靜態資源

在上面，咱們接觸了css樣式加載

接下來咱們要配置加載圖片了。咱們加載圖片用到的loader叫‘url-loader’,它的做用是將咱們的圖片轉換成一個base64的字串存放於咱們打包生成的js裏面，而不是從新生成一個文件。對於一些小的文件，幾kb的文件能夠幫助咱們減小過多的http請求。那麼url-loader其實封裝了咱們的file-loader，file-loader實際上是將文件進行處理後換個名字存放於另外一個地方。那麼咱們先看下配置：

咱們這裏一樣使用的use屬性，不一樣的是數組裏面使用的對象，由於咱們對圖片還須要進行一些更細化的配置，像圖片的大小(limit)，文件名稱(name)有時都是須要進行配置的，因此這裏使用了對象。固然，咱們須要把使用到的loader安裝一下。

npm i url-loader file-loader

接下來咱們新建一個assets目錄，而後放幾張圖片進去，並同時新建一個css目錄新建一個test樣式

css代碼：

而且將咱們項目的入口文件添加幾行代碼：

咱們如今執行一下npm run build 指令，能夠看到webpack將圖片打包成base64字串存放於js中，而且從新生成了新的文件

打開bundle.js

圖片被編譯成了base64字串

2. css預處理

在這裏咱們用stylus處理器，安裝命令。注意記得安裝stylus-loader

npm i stylus-loader stylus

新建一個stylus文件

而後將這個styl文件在入口文件中引用進來

接着咱們就能夠編譯一下，繼續執行npm run build 指令編譯

咱們以前寫的font-size成功編譯在bundle.js裏面了

---

webpack配置webpack-dev-server

這個包是我們在開發環境用的包處理工具，咱們這裏先install這個包。
npm i webpack-dev-server

而後再package.json配置
"dev": "webpack-dev-server --config webpack.config.js"

添加完dev指令後須要到webpack.config.js下修改一部份內容來專門適應咱們的開發環境。接下來咱們須要區分全局的一個環境，很容易就想到需設置一個全局的環境變量來作區分控制，咱們在build指令後面添加代碼

注：咱們若是不想區分不一樣系統，寫一套代碼來適應多個系統，須要安裝cross-env模塊，並使用他

這裏完成以後咱們就能夠在webpack.config.js文件裏面進行判斷了。

webpack.config.js文件裏面進行判斷了

overlay屬性是在咱們編譯的過程當中可以讓任何的錯誤都顯示到網頁上面。最後咱們加完了這些基礎的配置以後回過頭來發現，咱們好像配置的只是js、css、img文件，沒有html頁面去容納它們。這個時候咱們用到一個webpack的一個插件html-webpack-plugin,咱們照樣來安裝一下它：npm i html-webpack-plugin

這裏咱們用到了webpack，因此須要將 webpack 這個變量引用進來。

到這裏咱們基本的配置就完成了，最後須要瞭解一下webpack.DefinePlugin，咱們在代碼中的plugin裏添加：

說到這裏，理論上咱們已經完成的本地開發環境的編譯