vue+webpack備忘錄熱部署

weixin_33912445發表於2017-05-02
VueWeb熱部署

環境

環境是windows ，沒辦法公司只有這個環境

安裝並建立專案

好訊息是直接從 node 官網 就能下載，然後無腦安裝即可
建立一個資料夾 做為工作目錄G:\aleenlee\vuetest

npm init

無腦回車 得到 package.json 內容如下

{
  "name": "vuetest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

修改一下 scripts

 "scripts": {
    "go": "webpack"
    },

安裝外掛

需要安裝一些奇怪的外掛

npm install vue webpack babel-cli babel-loader babel-preset-es2015  html-webpack-plugin --save-dev

當然這些是不夠用的，先裝這些 那些報錯加那些

準備需要用的檔案

1.建立一個 webpack.config.js檔案 內容如下

var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack=require("webpack");
module.exports =
{
    entry:
    {
       "index":__dirname+'/src/jssrc/index.js',
      },
    output: {
        path: __dirname+'/src/webapp/js',  //輸出資料夾
        filename:'[name].js'   //最終打包生成的檔名(just 檔名，不帶路徑的哦)
    },
   resolve: {
        alias: {
            vue: 'vue/dist/vue.js'
        }
    },
    externals: {

    },
    module:{
        loaders:[
            {test:/\.js$/,loader:"babel",query:{compact:true}},
            //這裡肯定要加入n個loader 譬如vue-loader、babel-loader、css-loader等等
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename: __dirname+'/src/webapp/index.html',//目標檔案
            template: __dirname+'/src/html/index.html',//模板檔案
            inject:'body',
            hash:true,
            chunks:["index"]      
      })
    ]
 }

2.建立 另一個檔案 .babelrc 

{
    "presets": ["es2015"]
}

3 建立資料夾及檔案，

G:\aleenlee\vuetest\src\html\index.html
index.html 內容開始
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
</head>
<body>
<div id = "app">{{name}}</div>

</body>
</html>
index.html 內容結束
G:\aleenlee\vuetest\src\js\index.js
index.js內容開始
import Vue from "vue";
let app ={
    el:"#app",
    data:{
        name:"aleen"
    }
};
 new Vue(app);
index.js內容結束
G:\aleenlee\vuetest\src\webapp\

注意index.js 這裡會報錯,直接敲程式碼即可,複製過去可能會不能用

完成建立之後顯示效果如下

1026375-c7f0ca7c35aa9ad8.png
專案路徑圖

在html 資料夾下寫頁面
js下寫操作程式碼
控制檯輸入

npm run go

錯誤

1026375-5aab6a54bacb6ec1.png
錯誤

需要在webpack.config.js中修改一下 {test:/.js$/,loader:"babel-loader",query:{compact:true}},

修改後重新執行 webapp 資料夾下就會顯示一個index.html 執行這個檔案即可得到

1026375-77de66c75bb6fe35.png
顯示效果

路徑可能不一樣 需要使用工具執行webapp/index.html 檔案

新增熱部署

因為每次修改都要重新執行 npm run go實在太麻煩，使用熱部署的方法來解決這個問題

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

就能自己安裝了， 在安裝的同時我們修改一下 webpack.config.js

 output: {
        publicPath: "http://127.0.0.1:8080/",
        path: __dirname+'/src/webapp/js',  //輸出資料夾
        filename:'[name].js'   //最終打包生成的檔名(just 檔名，不帶路徑的哦)
    },
 plugins:[
        new HtmlWebpackPlugin({
           // filename: __dirname+'/src/webapp/index.html',//目標檔案
            filename:"index.html",
            template: __dirname+'/src/html/index.html',//模板檔案
            inject:'body',
            hash:true,
            chunks:["index"]
        }),
    ]

修改這兩處即可
package.json 中 新增 熱部署

  "dev":"webpack-dev-server --inline --hot --content-base ./src/webapp"
1026375-b5c35d000bac2428.png
image.png

開啟瀏覽器訪問 http://127.0.0.1:8080/ 頁面顯示


1026375-bd9ffaf4db02dfd6.png
image.png

隨意修改一下 src\js\index.js

        name:"lucifer"
    }

到頁面中 已經變成


1026375-c5d2c199c41cf591.png
image.png

到這裡 熱部署已經成功了

後來測試的時候發現好多loader 需要載入
例如 css-loader、 vue-loader、babel-loader 、vue-template-compiler 都需要安裝一下

相關文章