一步步構造自己的vue2.0+webpack環境

阿新 • • 發佈：2019-01-18

前面vue2.0和webpack都已經有接觸了些（vue.js入門， webpack入門之簡單例子跑起來），現在開始學習如何構造自己的vue2.0+webpack環境。

1.首先新建一個目錄vue-wkdemo，這是我們的專案目錄。執行 npm init 命令生成package.json檔案。執行npm init之後，會提示你填寫一些專案的資訊，一直回車預設就好了，或者直接執行 npm init -y 直接跳過詢問步驟。

2.安裝專案依賴項

npm install webpack webpack-dev-server vue-loader vue-html-loader css-loader vue-style-loader
vue-hot-reload-api babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015  
[email protected]5 --save-dev
npm install html-webpack-plugin --save-dev

npm install vue --save

3.新建入口檔案index.js，檔案位置放置為：vue-wkdemo->app->index->index.js

import Vue from 'Vue'
import Favlist from './components/Favlist.vue'
Vue.config.debug = true;//開啟錯誤提示
window.onload = function () {
  new 
 Vue({
      el: '#app',
      components: {
        'my-component': Favlist
      }
  });
}

4.構建index.html模版，檔案位置放置為：vue-wkdemo->app->index->index.html

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>首頁</title>
    </head>
    <body>
      <div id="app">

        <my-component></my-component>
      </div>
    </body>
</html>

5.構建vue元件Favlist.vue ，檔案放置為：vue-wkdemo->app->components->Favlist.vue

<template id="template-home">
  <div>
    <div v-for="n in 10">div</div>
  </div>
</template>


<style>
body {
    color: red;
}
</style>

6.構建 webpack.config.js ，檔案放置為：vue-wkdemo->build->webpack.config.js

// nodejs 中的path模組
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口檔案，path.resolve()方法，可以結合我們給定的兩個引數最後生成絕對路徑，最終指向的就是我們的index.js檔案
    entry: path.resolve(__dirname, '../app/index/index.js'),
    // 輸出配置
    output: {
        // 輸出路徑是 myProject/output/static
        path: path.resolve(__dirname, '../output/static'),
        publicPath: 'static/',
        filename: '[name].[hash].js',
        chunkFilename: '[id].[chunkhash].js'
    },
    resolve: {
        extensions: ['', '.js', '.vue'],
        alias: {
            'Vue': 'vue/dist/vue.js'
        }
    },
    module: {

        loaders: [
            // 使用vue-loader 載入 .vue 結尾的檔案
            {
                test: /\.vue$/,
                loader: 'vue'
            },
            {
                test: /\.js$/,
                loader: 'babel?presets=es2015',
                exclude: /node_modules/
            }
        ]
    },
    Favlist: {
        loaders: {
            js: 'babel'
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: '../index.html',
            template: path.resolve(__dirname, '../app/index/index.html'),
            inject: true
        })
    ]
}

View Code

7.執行構建命令： ‘webpack –display-modules –display-chunks –config build/webpack.config.js’

可以看到輸出檔案：

8.到這裡，我們的目錄結構為：

執行output->static->index.html這個檔案，過程中遇到各種各樣的坑（省略幾百字。。。）

最後終於看到結果了！！！

9.問題來了，每次都需要執行構建命令才能檢視改變後的程式碼效果，這是很沒有效率，於是還需要安裝 webpack-dev-middleware 中介軟體和 webpack-hot-middleware 中介軟體

npm install webpack-dev-middleware webpack-hot-middleware --save-dev

另外還需要安裝express

npm install express --save-dev

介紹下 webpack-dev-middleware 中介軟體，它是對webpack一個簡單的包裝，它可以通過連線伺服器服務那些從webpack發射出來的檔案，它有一下幾點好處：

1、不會向硬碟寫檔案，而是在記憶體中，注意我們構建專案實際就是向硬碟寫檔案。

2、當檔案改變的時候，這個中介軟體不會再服務舊的包，你可以直接重新整理瀏覽器就能看到最新的效果，這樣你就不必等待構建的時間，所見即所得。

在build目錄中建立一個dev-server.js檔案，並寫入內容：

// 引入必要的模組
var express = require('express')
var webpack = require('webpack')
var config = require('./webpack.config')

// 建立一個express例項
var app = express()

// 呼叫webpack並把配置傳遞過去
var compiler = webpack(config)

// 使用 webpack-dev-middleware 中介軟體
var devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: config.output.publicPath,
    stats: {
        colors: true,
        chunks: false
    }
})

// 註冊中介軟體
app.use(devMiddleware)

// 監聽 8888埠，開啟伺服器
app.listen(8888, function (err) {
    if (err) {
        console.log(err)
        return
    }
    console.log('Listening at http://localhost:8888')
})

View Code

然後我們修改 webpack.config.js 配置檔案

① 將 config.output.publicPath 修改為 ‘/‘：

// 輸出配置
    output: {
        // 輸出路徑是 myProject/output/static
        path: path.resolve(__dirname, '../output/static'),
        publicPath: '/',
        filename: '[name].[hash].js',
        chunkFilename: '[id].[chunkhash].js'
    },

② 將 plugins 中 HtmlWebpackPlugin 中的 filename 修改為 ‘app/index/index.html’

 plugins: [
        new HtmlWebpackPlugin({
            filename: 'app/index/index.html',
            template: path.resolve(__dirname, '../app/index/index.html'),
            inject: true
        })
    ]

此時，我們在專案根目錄執行下面的命令，開啟服務：

node build/dev-server.js

在瀏覽器中輸入 http://localhost:8888/app/index/index.html，如果成功了將和前面本地執行output->static->index.html這個檔案的結果是一樣一樣的

不信？

為了不去修改webpack.config.js，在build目錄下新建一個webpack.dev.conf.js檔案，意思是開發模式下要讀取的配置檔案，並寫入一下內容：

var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path');
// 引入基本配置
var config = require('./webpack.config');

config.output.publicPath = '/';

config.plugins = [
    new HtmlWebpackPlugin({
        filename: 'app/index/index.html',
        template: path.resolve(__dirname, '../app/index/index.html'),
        inject: true
    })
];

module.exports = config;

View Code

這樣在dev環境下的配置檔案覆蓋了基本配置檔案，只需要在dev-server.js中將

var config = require('./webpack.config')

改為：

var config = require('./webpack.dev.conf')

到這裡，我們已經使用webpack-dev-middleware 搭建基本的開發環境了，但是每次修改程式碼後，還是需要我們手動重新整理瀏覽器，接下來介紹熱載入（所謂的熱載入，意思就是說能夠追蹤我們程式碼的變化，並自動更新介面，甚至還能保留程式狀態。），我們需要 webpack-hot-middleware 中介軟體來完成熱載入。

配合 webpack-dev-middleware 使用，我們還需要做的是：

第一步：安裝（上面我們已經安裝過）

npm install webpack-dev-middleware --save-dev

第二步：在 webpack.dev.conf.js 配置檔案中新增三個外掛，如下：

var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path');
var webpack = require('webpack');
// 引入基本配置
var config = require('./webpack.config');

config.output.publicPath = '/';

config.plugins = [
    // 新增三個外掛
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),

    new HtmlWebpackPlugin({
        filename: 'app/index/index.html',
        template: path.resolve(__dirname, '../app/index/index.html'),
        inject: true
    })
];

module.exports = config;

第三步：在 webpack.config.js 檔案中入口配置中新增 ‘webpack-hot-middleware/client’，如下：

entry: ['webpack-hot-middleware/client', path.resolve(__dirname, '../app/index/index.js')],

第四步：在 dev-server.js 檔案中使用外掛

// 引入必要的模組
var express = require('express')
var webpack = require('webpack')
var config = require('./webpack.dev.conf')

// 建立一個express例項
var app = express()

// 呼叫webpack並把配置傳遞過去
var compiler = webpack(config)

// 使用 webpack-dev-middleware 中介軟體
var devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: config.output.publicPath,
    stats: {
        colors: true,
        chunks: false
    }
})

// 使用 webpack-hot-middleware 中介軟體
var hotMiddleware = require('webpack-hot-middleware')(compiler)

// 註冊中介軟體
app.use(devMiddleware)
// 註冊中介軟體
app.use(hotMiddleware)

// 監聽 8888埠，開啟伺服器
app.listen(8888, function (err) {
    if (err) {
        console.log(err)
        return
    }
    console.log('Listening at http://localhost:8888')
})

現在重啟的服務，然後修改 Favlist.vue 中的頁面顏色為 ‘black’：

<style>
  body {
      color: black;
  }
</style>

一儲存就可以看到修改後的效果，不需要手動重新整理瀏覽器啦啦啦~\(≧▽≦)/~啦啦啦。

剛剛修改了webpack.config.js這個基本配置檔案中的入口配置，為了不修改這個基本配置檔案，我們在webpack.dev.conf.js檔案中需要改下配置：

var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path');
var webpack = require('webpack');
// 引入基本配置
var config = require('./webpack.config');

config.output.publicPath = '/';

config.plugins = [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
        filename: 'app/index/index.html',
        template: path.resolve(__dirname, '../app/index/index.html'),
        inject: true
    })
];

// 動態向入口配置中注入 webpack-hot-middleware/client
var devClient = 'webpack-hot-middleware/client';
Object.keys(config.entry).forEach(function (name, i) {
    var extras = [devClient]
    config.entry[name] = extras.concat(config.entry[name])
})

module.exports = config;

View Code

然後將 webpack.config.js 檔案中的入口配置修改為以下配置方式：

entry: {
        index: [
            path.resolve(__dirname, '../app/index/index.js')
        ]
    },

重啟服務，修改 Favlist.vue 中的背景色，再次檢視瀏覽器，發現可以熱載入。到這裡還沒結束，這裡只是監聽到Favlist.vue檔案的改動，為了能監聽到index.html檔案的改動，我們還需要做一些工作。

第一步：在dev-server.js檔案中監聽html檔案改變事件，修改後的dev-server.js檔案如下：

// 引入必要的模組
var express = require('express')
var webpack = require('webpack')
var config = require('./webpack.dev.conf')

// 建立一個express例項
var app = express()

// 呼叫webpack並把配置傳遞過去
var compiler = webpack(config)

// 使用 webpack-dev-middleware 中介軟體
var devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: config.output.publicPath,
    stats: {
        colors: true,
        chunks: false
    }
})

var hotMiddleware = require('webpack-hot-middleware')(compiler)

// webpack外掛，監聽html檔案改變事件
compiler.plugin('compilation', function (compilation) {
    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
        // 釋出事件
        hotMiddleware.publish({ action: 'reload' })
        cb()
    })
})

// 註冊中介軟體
app.use(devMiddleware)
// 註冊中介軟體
app.use(hotMiddleware)

// 監聽 8888埠，開啟伺服器
app.listen(8888, function (err) {
    if (err) {
        console.log(err)
        return
    }
    console.log('Listening at http://localhost:8888')
})

View Code

第二步：修改webpack.dev.conf.js檔案

var HtmlWebpackPlugin = require('html-webpack-plugin')
var path = require('path');
var webpack = require('webpack');
// 引入基本配置
var config = require('./webpack.config');

config.output.publicPath = '/';

config.plugins = [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
        filename: 'app/index/index.html',
        template: path.resolve(__dirname, '../app/index/index.html'),
        inject: true
    })
];

// 動態向入口配置中注入 webpack-hot-middleware/client
// var devClient = 'webpack-hot-middleware/client';
var devClient = './build/dev-client';
Object.keys(config.entry).forEach(function (name, i) {
    var extras = [devClient]
    config.entry[name] = extras.concat(config.entry[name])
})

module.exports = config;

View Code

檔案中修改了devClient變數，將 ‘webpack-hot-middleware/client’ 替換成 ‘./build/dev-client’，最終會導致，我們入口配置會變成下面這樣：

   entry: {
        index: [
            './build/dev-client',
            path.resolve(__dirname, '../app/index/index.js')
        ]
    },

第三步：新建build/dev-client.js檔案，並編輯如下內容：

var hotClient = require('webpack-hot-middleware/client')

// 訂閱事件，當 event.action === 'reload' 時執行頁面重新整理
hotClient.subscribe(function (event) {
    if (event.action === 'reload') {
        window.location.reload()
    }
})

這裡我們除了引入 ‘webpack-hot-middleware/client’ 之外訂閱了一個事件，當 event.action === ‘reload’ 時觸發，而在 dev-server.js 中有釋出的事件：

// webpack外掛，監聽html檔案改變事件
compiler.plugin('compilation', function (compilation) {
    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
        // 釋出事件
        hotMiddleware.publish({ action: 'reload' })
        cb()
    })
})

這樣，當我們的html檔案改變後，就可以監聽的到，最終會執行頁面重新整理，而不需要我們手動重新整理。看下效果：

至此，開發環境終於搞定了。

一步步構造自己的vue2.0+webpack環境

一步步構造自己的vue2.0+webpack環境

vue2.0 + webpack+axios+elementUi+vue-router+vuex 搭建後臺管理系統環境部署（二）

vue2.0 配置環境總結（都是淚啊）

yoloV3一步步訓練自己的數據

一步步打造自己的linux命令行計算器

一步步打造自己的linux命令列計算器

一步步建立自己的 iOS 框架

YOLO V3 一步步訓練自己的目標檢測

一步步教你搭建Android開發環境（有圖有真相）--“自吹自擂：史上最詳細、最囉嗦、最新的搭建教程”

以太坊dApp開發教程（如何一步步構造一個全棧式去中心化應用）（四）實現投票功能

Android -- 從原始碼的角度一步步打造自己的TextView

Vue2.0 從環境搭建到釋出（新手完全填坑攻略）

Node.js+Vue2.0+webpack（axios獲取資料）

一步步製作 Arm-Linux交叉編譯環境

一步步搭建自己的部落格網站

Vue2.0新手入坑環境搭建（一）

從壹開始前後端分離 [ Vue2.0+.NET Core2.1] 二十一║Vue實戰：開發環境搭建【詳細版】

vue2.0學習筆記（一）搭建學習環境

vue2.0+vue-router2.0+axios+webpack開發webapp專案（一）

搭建vue2.0+vuex+vue-router+babel+webpack環境

一步步構造自己的vue2.0+webpack環境

相關推薦