用Webpack構建Vue項目的實踐

最近在內部項目中做了一些基于 vue + webpack 的嘗試，在小范圍和同事們探討之后，還是蠻多同學認可和喜歡的，所以通過本篇文章分享給更多人

開始之前，需要安裝node環境。（安裝過程在此就不啰嗦了）

1、創建基本結構首先我們要創建一個空文件夾（我這里叫todos，你可以隨便命名）作為項目的根目錄。創建一個沒有任何依賴關系的package.json，可以通過命令行 npm init 創建。

配置下基本信息即可。創建一個index.html文件，這個是顯示在瀏覽器中的頁面。

注意：1、這里的暫時并不存在；2、的數據會被vue文件填入。創建一個src文件夾，并在文件夾內新建一個main.js文件：

這樣我們就完成了一個關于vuejs骨架，但是如何讓他運行在瀏覽器中呢，這個時候我們就需要利用webpack打包成js文件了。

2、基本webpack構建創建一個webpack.config.js的文件：

在命令行中安裝webpack：

安裝本地庫（作為dev dependencies）,需要在package.js中添加devDependencies的部分：

保存后運行：npm install然后，vuejs庫安裝到你的dependencies中：

最后運行webpack進行打包：

3、vue-loader和.vue文件什么是vue-loader？vue-loader是webpack下loader插件，可以將.vue文件輸出成組件。創建一個文件夾叫component，并在文件夾內新建一個app.vue文件，app.vue內容如下：

然后修改main.js的代碼，如下：

重新運行一下，我們看到有報錯了：

webpack

不知道怎么去處理 .vue 的新語法。所以需要修改下webpack配置文件：

同時，在package.json加入一些庫：

新加庫以后，再重新npm install下載依賴包，然后重新打包一下：

重新刷新下瀏覽器就可以看到最新頁面了。4、熱模塊替代/熱更新熱模塊替代或熱更新是當今最熱門新的技術。它讓你保存JavaScript文件，就把對應的組件實時更新。首先，我們需要用webpack的dev server。修改你的devDependencies在package.json.

然后再命令窗口中執行cnpm install。下載好依賴包后，再下載webpack-dev-server，執行命令行cnpm install -g webpack-dev-server，然后把腳本加入到package.json中

運行命令行 npm run dev：

這里看到有一大段內容，我們要運行http://localhost:8080/才能看到效果。在這里值得一提的是：之前我們在webpack.config.js里面是沒有設置publicPath的，但是如果使用webpack-dev-server，你會發現，這個不會有更新。我們來試驗一下：在package.json文件中，將publicPath注釋掉：

app.vue代碼如下：

輸入命令npm run dev，在瀏覽器中顯示：

當將頁面修改成：

刷新瀏覽器，顯示未變。此時，若將publicPath注釋取消，重新再輸入命令行，刷新瀏覽器，此時顯示更新：

且不需要重新輸命令行，修改代碼后，都會更新。這個時候你會發現：如果我們修改的時template里面的html，這個時候，瀏覽器會秒變，并不需要刷新瀏覽器，比如：

但是如果你是將data數據更新，就必須要刷新下瀏覽器才行。（在這個地方我花了差不多快半個小時的時候才知道這個情況，我以為是我的代碼寫得有問題，才發現，原來更新template不需要刷新，而更新里面的data是需要刷新的。至于為什么，我也不知道。）

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。