2. 程式人生 > >從零開始搭建一個簡單的基於webpack的vue開發環境

從零開始搭建一個簡單的基於webpack的vue開發環境

阿新 • • 發佈：2018-12-29

都8102年了，現在還來談webpack的配置，額，是有點晚了。而且，基於vue-cli或者create-react-app生成的專案，也已經一鍵為我們配置好了webpack，看起來似乎並不需要我們深入瞭解。

不過，為了學習和理解webpack解決了前端的哪些痛點，還是有必要從零開始自己搭建一個簡單的開發環境。本文的webpack配置參考了vue-cli提供webpack-simple 模板，這也是vue-cli裡面最簡單的一個webpack配置，非常適合從零開始學習。

注： 本文webpack基於3.10.0， webpack4部分內容可能不再適用！！！！

安裝webpack

npm i webpack -g

webpack4還要單獨安裝

npm i webpack-cli -g

專案初始化

新建一個資料夾vue-webpack-simple

新建package.json

npm init -y

安裝vue webpack webpack-dev-server

npm i vue --save
npm i webpack webpack-dev-server --save-dev

根目錄下新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

根目錄下新建webpack.config.js

var path = require('path');
var webpack = require('webpack');
module.exports = {};

新建src資料夾，src資料夾下新建main.js

目前整個專案的結構如下:

在這裡插入圖片描述

js模組化

在ES6出現之前，js是沒有統一的模組體系。
伺服器端使用CommonJS規範,而瀏覽器端又有AMD和CMD兩種規範

webpack的思想就是一切皆模組，官方推薦使用commonJS規範，這使得我們瀏覽器端也可以使用commonJS的模組化寫法

module.exports = {}

src目錄下新建一個util.js

module.exports = function say() {
    console.log('hello world');
}

src目錄下新建一個main.js

var say = require('./util');
say();

修改webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './src/main.js', // 專案的入口檔案，webpack會從main.js開始，把所有依賴的js都載入打包
    output: {
        path: path.resolve(__dirname, './dist'), // 專案的打包檔案路徑
        publicPath: '/dist/', // 通過devServer訪問路徑
        filename: 'build.js' // 打包後的檔名
    },
    devServer: {
        historyApiFallback: true,
        overlay: true
    }
};

修改package.josn

"scripts": {
    "dev": "webpack-dev-server --open --hot",
    "build": "webpack --progress --hide-modules"
  },

注意：webpack-dev-server會自動啟動一個靜態資源web伺服器 --hot引數表示啟動熱更新

修改index.html，引入打包後的檔案

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script src="/dist/build.js"></script>
</body>

</html>

執行

npm run dev

可以發現瀏覽器自動開啟的一個頁面，檢視控制檯，有hello world打出

我們隨意修改util.js，可以發現瀏覽器會自動重新整理，非常方便。

如果我們希望看打包後的bundle.js檔案，執行

npm run build

可以看到生成了一個dist目錄，裡面就有打包好後的bundle.js

在這裡插入圖片描述
webpack預設不支援轉碼es6，但是import export這兩個語法卻單獨支援。所以我們可以改寫前面的模組化寫法

util.js

export default function say() {
    console.log('hello world ');
}

main.js

import say from './util';

say();

引入vue

下面我們來試著引入vue(目前不考慮單檔案.vue)

main.js

import Vue from 'vue';

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{message}}
    </div>
    <script src="/dist/build.js"></script>
    
</body>

</html>

還要注意一點：要修改webpack.config.js檔案

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    devServer: {
        historyApiFallback: true,
        overlay: true
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
};

重新執行npm run dev，可以看到，頁面正常顯示了:Hello World

引入scss和css

webpack預設只支援js的模組化，如果需要把其他檔案也當成模組引入，就需要相對應的loader解析器

npm i node-sass css-loader vue-style-loader sass-loader --save-dev

webpack.config.js

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    },
    devServer: {
        historyApiFallback: true,
        overlay: true
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            }
        ]
    }
};

解釋：

{
    test: /\.css$/,
    use: [
        'vue-style-loader',
        'css-loader'
    ],
}

這段程式碼意思是：匹配字尾名為css的檔案,然後分別用css-loader，vue-style-loader去解析
解析器的執行順序是從下往上(先css-loader再vue-style-loader)

注意：因為我們這裡用vue開發，所以使用vue-style-loader，其他情況使用style-loader

css-loader使得我們可以用模組化的寫法引入css,vue-style-loader會將引入的css插入到html頁面裡的style標籤裡

要引入scss也是同理的配置寫法:

module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ],
            },
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader'
                ],
            },
            {
                test: /\.sass$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    'sass-loader?indentedSyntax'
                ],
            }]
    }

我們現在來試下
在src目錄下新建style目錄，style目錄裡新建common.scss

body {
    background: #fed;
}

main.js

import './style/common.scss';

發現css樣式有用了

使用babel轉碼

ES6的語法大多數瀏覽器依舊不支援,bable可以把ES6轉碼成ES5語法，這樣我們就可以大膽的在專案中使用最新特性了

npm i babel-core babel-loader babel-preset-env babel-preset-stage-3 --save-dev

在專案根目錄新建一個.babelrc檔案

{
  "presets": [
    ["env", { "modules": false }],
    "stage-3"
  ]
}

webpack.config.js新增一個loader

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
}

exclude表示忽略node_modules資料夾下的檔案，不用轉碼

現在我們來試下async await語法吧
util.js

export default function getData() {
    return new Promise((resolve, reject) => {
        resolve('ok');
    })
}

main.js

import getData from './util';
import Vue from 'vue';

import './style/common.scss';

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    async fetchData() {
      const data = await getData();
      this.message = data;
    }
  },
  created() {
    this.fetchData();
  }
});

這時控制檯會報一個錯誤regeneratorRuntime is not defined，因為我們沒有安裝babel-polyfill

npm i babel-polyfill --save-dev

然後修改webpack.config.js的入口

entry: ['babel-polyfill', './src/main.js'],

重新npm run dev，可以發現正常運行了

引入圖片資源

把圖片也當成模組引入

npm i file-loader --save-dev
webpack.config.js新增一個loader

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: {
        name: '[name].[ext]?[hash]'
    }
}

在src目錄下新建一個img目錄，存放一張圖片logo.png

修改main.js

import getData from './util';
import Vue from 'vue';

import './style/common.scss';


Vue.component('my-component', {
  template: '<img :src="url" />',
  data() {
    return {
      url: require('./img/logo.png')
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue !'
  },
  methods: {
    async fetchData() {
      const data = await getData();
      this.message = data;
    }
  },
  created() {
    this.fetchData()
  }
});

修改index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{message}}
        <my-component/>
    </div>
    <script src="/dist/build.js"></script>
    
</body>

</html>

可以看見，圖片也被正確載入了

單檔案元件

在前面的例子裡，我們使用 Vue.component 來定義全域性元件
在實際專案裡，更推薦使用單檔案元件

npm i vue-loader vue-template-compiler --save-dev

新增一個loader

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        loaders: {
            'scss': [
                'vue-style-loader',
                'css-loader',
                'sass-loader'
            ],
            'sass': [
                'vue-style-loader',
                'css-loader',
                'sass-loader?indentedSyntax'
            ]
        }
    }
}

在src目錄下新建一個App.vue

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <img src="./img/logo.png">
    <input type="text" v-model="msg">
  </div>
</template>

<script>

import getData from './util';

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js'
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
     async fetchData() {
      const data = await getData();
      this.msg = data;
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;

  h1 {
    color: green;
  }
}
</style>

main.js

import Vue from 'vue';
import App from './App.vue';

import './style/common.scss';

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
</body>

</html>

npm run dev，可以發現單檔案被正確載入了

source-map

在開發階段，除錯也是非常重要的一項需求。

App.vue

created() {
    this.fetchData();
    console.log('23333');
}

我們故意打一個console，開啟控制檯
在這裡插入圖片描述

我們點選進入這個console的詳細地址
在這裡插入圖片描述

進入的是打包後的build.js，我並不知道是在哪個元件裡寫的，這就造成了除錯困難

這時就要修改webpack.config.js

module.exports = {
    entry: ['babel-polyfill', './src/main.js'],
    // 省略其他...

    devtool: '#eval-source-map'
};

重新npm run dev
在這裡插入圖片描述

這次除錯，它直接返回那個元件的原始碼了，這不是被打包過的！

打包釋出

我們先試著npm run build打包一下檔案

在這裡插入圖片描述
會發現，打包後的build.js非常大，有500多k了

在實際釋出時，會對檔案進行壓縮，快取，分離等等優化處理

npm i cross-env --save-dev

修改package.json

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}

這次我們設定了環境變數，打包時，NODE_ENV是production

然後修改webpack.config.js，判斷NODE_ENV為production時，壓縮js程式碼

var path = require('path');
var webpack = require('webpack');

module.exports = {
    // 省略...
}

if (process.env.NODE_ENV === 'production') {
    module.exports.devtool = '#source-map';
    module.exports.plugins = (module.exports.plugins || []).concat([
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"'
        }
      }),
      new webpack.optimize.UglifyJsPlugin(),
    ])
  }

重新打包

可以看見，壓縮效果非常明顯！

至此，一個非常簡單的vue開發環境搭建成功。

注意：本文中的配置還有非常多可以優化的地方，比如分離js和css

讀者可以自行了解相關知識，這裡只是帶領大家瞭解最基礎的webpack配置。

轉自：https://segmentfault.com/a/1190000012789253

相關推薦

從零開始搭建一個簡單的基於webpack的vue開發環境

都8102年了，現在還來談webpack的配置，額，是有點晚了。而且，基於vue-cli或者create-react-app生成的專案，也已經一鍵為我們配置好了webpack，看起來似乎並不需要我們深入瞭解。 不過，為了學習和理解webpack解決了前端的哪些痛點，還是有必要從零開始自己

從零開始搭建微信硬件開發環境全過程——1小時掌握微信硬件開發流程

sdn 流程 第三方服務 ota 必須 air 開發板 port pen 筆者決定在嵌入式企鵝圈2016年的首篇文章中，發表微信硬件物聯領域極具實踐價值的文章，它將

《從零開始搭建遊戲伺服器》Linux開發環境配置

前言： 之前的開發工作一直是在Windows開發環境下進行的，但是正真釋出和外網運營勢必要釋出到Linux環境下，而且有很多服務端的工具對於Windows系統的相容性並不是非常完善，就像常用的Docker容器就只支援Linux系統，所以提前瞭解和部署

造輪子：搭建一個簡單的nodejs伺服器，從零開始搭建一個自用網站（0）

伺服器用的是阿里雲最早期的伺服器低配版本1Gcpu，512M記憶體，20G硬碟，1M頻寬，平常只是用來做測試，目前只處理業務邏輯，網站的設計上儘量避免佔用太多的頻寬， 靜態檔案的儲存用的是阿里雲oss，100G空間，夠放視訊，圖片什麼的， html/js/c

從零開始搭建一個主流專案框架（一）—簡單的框架

個人部落格：haichenyi.com。感謝關注 目的   首先先說出，最終的目的是現在主流的MVP+RxJava+Retrofit+OkHttp框架。讓大家心裡有底   開發工具Android Studio3.0，還在用eclipse的同鞋，強烈推薦

簡單幾步從零開始搭建一個SSM專案

 SSM（Spring+SpringMVC+MyBatis）框架集由Spring、SpringMVC、MyBatis三個開源框架整合而成，常作為資料來源較簡單的web專案的框架。並且可在此基礎上延伸擴充套件整合出很多東西。延伸部分此處就不介紹了。本篇面向的只是剛準備入門框架，

vue-用Vue-cli從零開始搭建一個Vue項目

-a htm sset VM bin size 過多 sets 掃描 　　Vue是近兩年來比較火的一個前端框架（漸進式框架吧）。 Vue兩大核心思想：組件化和數據驅動。組件化就是將一個整體合理拆分為一個一個小塊（組件），組件可重復使用；數據驅動是前端的未來發展方向，釋放了對

如何從零開始搭建一個能夠顯示HelloWorld的網站

大學畢業後,在工地搬磚,搬磚的同事都說,現在是一個網際網路加的時代 ,搬磚行當也應該與時俱進,加入網際網路的大軍,然後大家開始討論如果建立一個公司叫滴滴搬磚應該挺賺錢的,畢竟現在房價那麼貴,但是我們搬磚的工資又很低,肯定是無良的房地產供應商賺了很多錢,但是有了滴滴搬磚就不一樣,需要住房子

如何從零開始搭建一個Truffle框架的DAPP應用

1 摘要 開發實戰|3步教你在以太坊上開一家寵物店（附流程+程式碼）介紹瞭如何獲取寵物商店的TRUFLLE框架程式碼，並完成部署的過程。 但是這個是已經成熟的程式碼框架，一般使用者要開發自己的專案。那如何借用寵物商店成熟框架完成自有DAPP的搭建呢？我們以tiny熊老師的一

從零開始搭建一個簡易的伺服器（二）

超級大坑 第一篇部落格到現在拖坑有半年了（不過估計也沒人記得我），原本的打算是既然要寫伺服器，那自然要設計一門語言，類似於php這樣的工作於伺服器後端負責後端渲染，然後到目前為止的時間基本都花在寫編譯器上了囧，編譯器的專案在這裡。如果真的等編譯器全部寫

從零開始搭建一個ELKB日誌收集系統

當今的軟體開發多核以及分佈已經成為了常態，基本上稍大型的應用都是多臺機器分散式部署。分散式在提高效能的同時也帶來了很多問題，今天我們只討論一點，那就是如何處理多臺機器線上系統的日誌。 以我司的某個應用T為例，部署在了百度雲5臺機子上，其中一臺擁有公網IP，使用了百度雲提供的負載均衡服務。每次想要在日誌中檢索

從零開始搭建一個主流專案框架（三）—RxJava2.0+Retrofit2.0+OkHttp

個人部落格：haichenyi.com。感謝關注   上一篇，我們把mvp+dagger加進去了，這一篇，我們把網路請求加上   我這裡的網路請求是用的裝飾者模式去寫的，什麼是裝飾者模式呢？在不必改變原類檔案和使用繼承的情況下，動態地擴充套件一個物件的功能。

react開發：從零開始搭建一個react專案

從頭開始建立一個React App - 專案基本配置 npm init 生成 package.json 檔案.安裝各種需要的依賴: npm install --save react - 安裝React.npm install --save reac

從零開始搭建一個簡易的伺服器（一）

前言 其實大家大可不必被伺服器這三個字嚇到，一個入門級後端框架，所需的僅僅是HTTP相關的知識與應用這些知識的程式設計工具。據本人的經驗，絕大多數人擁有搭建後端所涉及到的基礎理論知識，但是缺乏能將之應用出去的工具，而本文即是交給讀者這樣一個工具，並能夠運用之來

從零開始搭建一個dubbo框架及常見問題說明

1.      dubbo框架理解：dubbo是一種分散式框架，最早應用於電商專案。它經歷瞭如下幾個發展階段：從單一應用框架(ORM)：當網站流量很小時，只需一個應用，將所有功能都部署在一起以減少部署節點和成本；垂直應用框架(MVC)：當訪問量逐漸增大，單一應用增加機器帶來的

用Vue-cli從零開始搭建一個Vue專案

電腦環境準備 1、下載安裝node.js。node中會預設安裝npm。命令提示符中 npm -v可檢視安裝版本。 2、開啟命令提示符，安裝淘寶映象cnpm。因為cnpm安裝依賴包時會比npm速度快很多。安裝命令： npm install -g cnpm --regist

Django從零開始搭建一個相簿網站--3.基本檢視對映

urls.py檔案： from cilife import views as cilife_views urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^$', cilife_views.home)

如何從零開始搭建一個vue-webpack專案

1.從Node.js官網下載node安裝包進行安裝。 http://nodejs.cn/download/ 安裝完成後在cmd中輸入node -v 檢視node.js版本號，npm -v 檢視npm版本號； npm是node的一個包管理器 2.安裝vue-cli

從零開始搭建一個專案框架MVVM（OC）

1.新建一個專案輸入你的ProductName（專案名稱）、組織、開發者賬號等一些簡單的選項 2.配置開發環境 3.修改個人配置 4.建立cocoaPod依賴庫 4.1：cd 專案 4.2:建立PodFile(touch PodFile) 4.3:

從零開始搭建一個主流專案框架（二）—MVP+Dagger2

個人部落格：haichenyi.com。感謝關注   接著上一篇簡單的框架，沒有看過的同鞋可以去喵一眼。上一篇我們搭好了簡單的框架，初始化一次的內容丟在Application裡面，所有的activity繼承一個類BaseActivity，還有Fragment繼