【Vue元件檔案打包：Vue-Loader】

複製之前上一個專案

然後在我們的src目錄中建立App.vue檔案

這個檔案就是Vue的模組檔案

【建議下載IDEA的Vue.js外掛】

Vue的模組分為template、script、style

其實就是代表html + javascript +css這三者

<template>
    <div>
        <span v-text="name" class="title"></span>
    </div>
</template>

<style scoped>
 

    .title {
        color : red;
    }
</style>

<script>
export default {
    data () {
        return {
            name : "來自App.vue元件的name屬性值"
        }
    }
}
</script>

然後使用main.js匯入元件檔案

// 引入包的時候，像Java一樣 使用import
import App from './App.vue';
let application = new Vue({
    el : 
 
"#application",
    data : {
        name : "阿偉"
    },
    render : e => e(App)
});

不出所料，webpack打包解析不了vue元件檔案

這就是前面提到的Loader的概念，我們對Vue元件檔案也需要對應的載入器：

vue-loader，vue-template-compiler

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

然後webpack.config.js配置：

const path = require('path');

module.exports 
 
= {
    entry : "./src/main.js", // 入口 可以是字串，陣列，物件
    output : { // 出口，通常是一個物件 至少包含路徑和檔名
        path : path.resolve(__dirname, 'dist'),
        filename : "bundle.js"
    },
    module : {
        rules : [
            { test : /\.css$/, use : ['style-loader', 'css-loader'] },
            { test : /\.vue$/, use : ['vue-loader'] }
        ]
    },
    resolve : {
        alias : {
            'vue$' : 'vue/dist/vue.esm.js'
        }
    }
}

打包報錯：

大概是關於vue-loader版本的問題：

解決是先解除安裝安裝的vue-loader，再重新指定版本安裝：

npm uninstall vue-loader

重新安裝：

npm install vue-loader@13.3.0

再次打包執行：

【首頁打包：HTMLWebpackPlugin】

目前的專案問題：

我們的index檔案是存放在專案根目錄下，並不是打包的目錄，

但是實際專案釋出的是使用dist目錄，所以這個首頁檔案也需要打包進去

這需要HTMLWebpackPlugin外掛

cnpm install [email protected] --save-dev

配置webpack.config.js

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry : "./src/main.js", // 入口 可以是字串，陣列，物件
    output : { // 出口，通常是一個物件 至少包含路徑和檔名
        path : path.resolve(__dirname, 'dist'),
        filename : "bundle.js"
    },
    module : {
        rules : [
            { test : /\.css$/, use : ['style-loader', 'css-loader'] },
            { test : /\.vue$/, use : ['vue-loader'] }
        ]
    },
    resolve : {
        alias : {
            'vue$' : 'vue/dist/vue.esm.js'
        }
    },
    plugins : [
        new htmlWebpackPlugin({
            template : "index.html" //指定打包使用的html模版
        })
    ]
}

可以發現這裡的首頁自動打上了js檔案匯入

也就是說這是webpack幫我們寫上的

【JS檔案壓縮：uglifyjs-plugin】

但是還有一個問題就是我們需要對JS檔案壓縮處理

這就需要uglifyjs-webpack-plugin

npm install uglifyjs-webpack-plugin@1.1.1 --sav-dev

還是一樣配置webpack.config.js

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const uglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry : "./src/main.js", // 入口 可以是字串，陣列，物件
    output : { // 出口，通常是一個物件 至少包含路徑和檔名
        path : path.resolve(__dirname, 'dist'),
        filename : "bundle.js"
    },
    module : {
        rules : [
            { test : /\.css$/, use : ['style-loader', 'css-loader'] },
            { test : /\.vue$/, use : ['vue-loader'] }
        ]
    },
    resolve : {
        alias : {
            'vue$' : 'vue/dist/vue.esm.js'
        }
    },
    plugins : [
        new htmlWebpackPlugin({
            template : "index.html" //指定打包使用的html模版
        }),
        new uglifyJsPlugin()
    ]
}

執行之後這個js檔案就會壓縮格式，可讀性極差，

所以外掛非常形象的命名為“醜陋化JS”

【Webpack本地伺服器搭建】

webpack提供了一個可選的本地開發伺服器，基於NodeJS搭建

內部使用的是express框架，實現我們想要的讓瀏覽器自動重新整理的效果

npm install webpack-dev-server@2.9.1 --save-dev

配置package.js檔案

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev" : "webpack-dev-server --port 3000 --hot",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^3.6.0",
    "html-webpack-plugin": "^2.16.0",
    "style-loader": "^1.2.1",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.11.5"
  },
  "dependencies": {
    "uglifyjs-webpack-plugin": "^1.1.1",
    "vue": "^2.6.11",
    "vue-loader": "^13.3.0"
  }
}

輸入此命令執行專案：

npm run dev

訪問正常：