vue+webpack+VS Code入門簡單的項目配置

爲了方便，這邊的編譯器選擇的是VS Code (Visual Studio Code);

打開VS Code，選擇好本身的工做空間，而後新建一個文件夾做爲咱們項目的文件夾，而後，show time；

　　Ctrl + `     打開命令行，進行操做

1、初始化

　　a、進入本身剛纔新建的項目文件夾

　　b、初始化咱們的項目，npm init；初始化成一個npm的項目；回車以後的一些選項，直接回車選擇默認，

　　

　　輸入yes，回車；

　　ok,如今在咱們的項目文件夾下就多了一個package.json的文件

2、安裝所需包

　　a、既然咱們這邊要配置的是vue+webpack，那麼接下來進行安裝；

　　　　npm i webpack@3.11.0 vue vue-loader

　　 （i : install  ;   @3.11.0  指定了一下版本，最新版爲4的版本，操做有出入）

                

 

　　　　安裝完，命令行和項目文件夾如上圖，由警告內容能夠看出，咱們還須要進行依賴的安裝；

　　b、安裝css-loader  和   vue-template-compiler；

　　　　npm i css-loader vue-template-compiler

　　　　ok，還有幾個WARN沒有關於第三方依賴的安裝提示的，咱們就能夠忽略了

　　項目初始化以及安裝包已經完成了，接下來，咱們就能夠在項目當中寫一些內容了

3、項目內容

　　a、新建文件夾 src，做爲源碼文件夾

　　b、src中新建一個vue文件，app.vue

　　

　　整個的一個app.vue文件就是由template、script、style組成的一個組件

　　①<template></template> ：寫的是html內容，要顯示出來的東西

　　②<script></script> : 寫的是控制顯示內容變化的部分

　　③<style></style> : 寫的就是css樣式

　c、簡單寫一下內容

　　

　　data 做爲組件初始化時的數據，爲{{text}}提供了數據

寫內容時，新安裝VS Code的會以爲好不方便，什麼提示都沒有，這是該咋辦呢，那麼根據下圖在Ctrl+Shift+X擴展裏安裝一下幾個經常使用的吧；　

   　　　　

如今咱們這樣一個簡單的組件寫完了，可是這會確定仍是不能夠運行的，接着來

4、配置文件

　　a、新建配置文件：webpack.config.js，進行配置

　　　　①const path = require('path')，導入nodejs裏面的一個基本包，用來處理路徑，這邊使用絕對路徑

 

　　　　②entry：聲明入口

　　　　既然聲明瞭入口，那咱們就須要一個入口文件，那麼在src中新建一個index.js文件，做爲入口文件；

　　　　而後將組件掛載到入口文件中；

　　　　　　a)在index.js中引用vue的類庫  import Vue from 'vue'

　　　　　　b)把app.vue這個組件再引用進來  import App from './app.vue'

　　　　　　c)建立內容渲染出來以後用來顯示的節點  

　　　　　　 　　const root = document.createElement('div')

　　　　　　　　document.body.appendChild(root)

　　　　　　d)New 一個VUE 對象，申明一個render方法，接收一個h參數，經過這個參數將咱們的組件App的內容進行渲染出來

　　　　　　　　 new Vue({  render: (h) => h(App)  })

 

　　　　　　e)調用API，$mount()；將渲染出來的內容mount到咱們第三步建立的節點上面

　　　　        　

　　　 ③再回到webpack.config.js文件，寫入入口文件：entry:path.join(__dirname,'src/index.js')；（__dirname:爲根目錄）

　　　④出口文件配置：

　　　　 　　output:{

　　　　　　　　filename:'bundle.js',     //輸出文件名

　　　　　　　　path:path.join(__dirname,'dist')     //輸出文件路徑

　　　　　　}

　　　⑤在package.json中加入下圖一句話：

　　　　

　　　　這樣，咱們就能夠經過 npm run start來運行代碼

5、運行調試 

　　經過 npm run start 運行

　　

　　報錯，告訴咱們須要爲.vue的文件申明一個loader；

　　module:{
　　　　//添加規則，rules
　　　　　　rules:[
　　　　　　　　　　{
　　　　　　　　　　　　test: /.vue$/,    //文件類型，正則
　　　　　　　　　　　　loader: 'vue-loader'   //使用的loader
　　　　　　　　　　}
　　　　　　　　]
　　　　　}

　　再次運行  npm run start ；ok,沒有再報錯！

       

　　在dist中生成了bundle.js;打開該文件，當中包括了，webpack固有的代碼，用於處理模塊依賴，下面還有全部Vue.js的源碼，固然咱們寫的代碼也在裏面；

 

以上內容，咱們配置了webpack,加載了.vue文件；那咱們的css，image文件怎麼辦呢？下面繼續配置

 

1、配置文件中配置loader

　　a、css文件和圖片文件

module.exports = {
    entry:path.join(__dirname,'src/index.js'),
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
    },
    module:{

　　//正則加\進行對 . 的轉譯
        rules:[
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test:/\.css$/,
                use:[                     //這邊使用use,數組來寫形式
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test:/\.(gif|jpg|png|svg|jpeg)$/,
                use:[
                    {
                        loader:'url-loader',       //數組裏寫對象形式，爲了增長配置參數
                        options:{
                            limit:1024,    //小於1024KB的圖片轉爲base64格式代碼，存在js中，不生成文件
                            name:'[name].[ext]'   //輸出文件的名字，[name]根據原名，[ext]擴展名
                        }
                    }
                ]
            }
        ]
    }
}

　　配置完成，安裝相對應的loader；url-loader 依賴於 file-loader，因此也要安裝;

　　

　　好了 ，安裝完成！

2、寫入CSS文件和圖片

　　在src文件夾中新建一個assets文件夾，再在這個文件夾裏新建一個images和一個styles文件夾，分別放如幾張圖片和新建一個test.css文件

　　　　　　

　　改寫一下test.css和index.js；

                 

　　運行一下  npm run start  ;

　　ok 沒有報錯，咱們能夠在dundle.js文件中查看咱們css文件和圖片的打包狀況；

　　關於圖片好像沒能徹底按咱們設置的limit值像預想中同樣，轉base64格式，這個問題，我也不怎麼清楚，知道的求告知！！

 

　webpack-dev-server配置

　a、npm i webpack-dev-server進行安裝

　b、npm i cross-env安裝，做用：針對不一樣平臺設置環境變量的不一樣來使用

　c、修改package.json文件中的scripts部分

         

　d、修改webpack.config.js文件

　　1）const isDev = process.env.NODE_ENV === 'development'聲明一個變量用來判斷當前的環境變量，返回值爲true或者false

　　　　啓動腳本時，前面的變量都存儲在process.env這個對象當中

　　2）添加一下代碼　

if(isDev){
　　config.devServer = {
　　　　port:'2018',          //監聽端口
　　　　host:'0.0.0.0',       //能夠經過內網IP訪問
　　　　overlay:{　　　　　　　　//錯誤顯示到網頁
　　　　　　errors:true,
　　　　}
　　}
}

　

　　3）還要作的細節改動

module.exports = { }對象改爲 const config = { }定義一個對象；在最後

 

 

　　   

 

 好了，到如今，既然做爲一個前端項目，那就這樣是確定打不開的，那就得須要一個html頁面做爲前端頁面入口

  一、安裝插件，npm i html-webpack-plugin，並引入配置文件中 const HTMLPlugin = require('html-webpack-plugin')

  二、使用插件

        

  三、添加

  plugins:[
        new webpack.DefinePlugin({
            'process.env':{
                NODE_ENV:isDev?'"development"':'"production"'         //用於區分開發仍是生產環境，選擇不一樣的打包機制
            }
        }),
        new HTMLPlugin()
    ]

   四、運行 npm run dev;　

　　正常狀況下估計都會變成如今這個樣子：

　　

　　那這個問題是什麼呢？其實最後這個問題仍是歸於版本問題；咱們的 webpack用的是 @3.11.0的   這邊安裝的 webpack-dev-server也是版本3的，那就是問題了，

　　怎麼辦？妥協吧    npm i webpack-dev-server@2.11.2    重裝一下  指定 2 的版本

　　裝完以後，npm run dev 運行一下；

 　　

 

　　OK，完成，在瀏覽器中，經過localhost:2018 訪問

　　

　　完成！！！

  

PS:

　　VS Code下載

　　連接：https://pan.baidu.com/s/1-PGMHzyMu-oF_LIYSFYEFg 密碼：fsx7

　　例子源碼下載

　　連接：https://pan.baidu.com/s/1Ll6Hb3aJuQrX8kD9QQwWKg 密碼：yykn