手動建置一個Webpack-Vue的開發環境

作者： Yichun Sung

日期： 2018-10-01

Chapter 0. 前言

發想是來自於彭彭老師在9/24的Webpack 建置 React 開發環境教學直播。

因此，雖然有Vue-cli這種好用的工具，但是今天我們想要自虐地自己一步一步手動建置一個可以給Vue開發者開發的Webpack環境。

Chapter 1. webpack 與 npm 基本安裝

安裝 node.js
建立專案資料夾
初始化node.js 專案

npm init -y

使用 npm 安裝 webpack, webpack-cli:

npm install webpack webpack-cli --save-dev

設置 package.json (專案描述檔) 用來執行 webpack，在"scripts"中加入build的規則。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
},

基本專案資料夾結構與運作概念：

/src/Vue原始碼 =={ webpack 轉換 }==> /dist/可執行檔

所以根據上一點在專案目錄中新增 src 資料夾與 dist 資料夾（Webpack的預設來源資料夾與目的資料夾）

在src資料夾中建立一個index.js ，測試打包。使用指令：
```
npm run build
```

在 dist資料夾中建立一個 index.html，並且在當中引入main.js


<!DOCTYPE html>
<html>
<head>
<title> Webpack and Vue </title>
</head>
<body>
<div id = "app"></div>
<script src = "main.js"></script>
</body>
</html>


10. 打開 index.html 測試看看是否成功打開沒有錯誤

沒錯誤的話，就進入下一階段

## Chapter 2. 搭配Vue服用

1. 使用npm 安裝 **Vue**

```bat
npm install vue

使用Vue 寫點東西測試，在index.js上 import Vue。


import Vue from 'vue'

new Vue({
  el: '#app',
  mounted : function(){
    console.log('Hello Webpack and Vue !');  
  }
});

重新使用指令打包：
```
npm run build
```
打開index.html 測試，開啟開發者介面，查看剛剛寫的有無印出來。

有印出來的話，就成功完成了Vue 和 Webpack的基本配置了。

Chapter 3. 設置.vue打包和Vue-components

安裝 Babel相關套件用來編譯複雜的js框架中複雜的語法：

安裝 babel-core 和 babel-loader

npm install babel-core babel-loader --save-dev

安裝 babel-preset-env 和 babel-preset-vue

npm install babel-preset-env babel-preset-vue --save-dev

安裝 Vue-loader相關套件，用來協助編譯.vue中的語法和vue template

安裝vue-loader, vue-style-loader, css-loader, file-loader, vue-template-compiler

npm install vue-loader vue-style-loader css-loader file-loader vue-template-compiler --save-dev

在package.json中把設定處理好，加入以下設定：

"babel":{
            "presets": ["env", "vue"]
        },

建議將babel-loader 降版至 7.1.5，比較不會有問題

"babel-loader": "^7.1.5",

在專案資料夾目錄下建立一個 webpack 基本設定檔 webpack.config.js

依據webpack官網文件設定：設定指南

const path = require('path');

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

在webpack設定檔中：加入babel-loader 設定。
在webpack設定檔中加入 vue-loader設定，以及VueLoaderPlugin設定，以支援.vue檔。
在webpack設定檔中加入 file-loader設定，用以打包圖片檔等檔案。

綜合第7點,第8點和第9點，完整的設定如下：

// webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // this will apply to both plain `.js` files
      // AND `<script>` blocks in `.vue` files
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // this will apply to both plain `.css` files
      // AND `<style>` blocks in `.vue` files
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin()
  ]
}

如果你現在就建立一個vue的元件，然後掛載並且執行 npm run build後，會發現打包成功但是打開index.html卻沒有畫面，這是因為我們還沒設置模板編譯。

在webpack 基本設定檔中設置模板的編譯，加入以下

resolve: { 
            alias: { 
                'vue': 'vue/dist/vue.js' 
            } 
        }

完整的 webpack.config.js 如下：

// webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // this will apply to both plain `.js` files
      // AND `<script>` blocks in `.vue` files
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // this will apply to both plain `.css` files
      // AND `<style>` blocks in `.vue` files
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin()
  ],
  resolve: { 
    alias: { 
      'vue': 'vue/dist/vue.js' 
    } 
  }
}

接著在src中建立一個hello.vue檔測試

<template>
  <div class="hello">Hello {{ who }}</div>
</template>

<script>
module.exports = {
  data: function() {
    return {
      who: 'Vue and Webpack !!'
    }
  }
};
</script>

<style scoped>
.hello {
  padding: .5em;
  font-size: 2em;
  background-color: #fcf;
}
</style>

index.js 也掛載這個hello.vue

import Vue from 'vue'
import hello from './hello.vue'

new Vue({
  el: '#app',
  mounted : function(){
    console.log('Hello World');

  },
  components: { hello },
  template: '<hello/>'
})