2. 程式人生 > >webpack入坑之旅（五）加載vue單文件組件

webpack入坑之旅（五）加載vue單文件組件

阿新 • • 發佈：2018-08-06
file loader clu html中 type 修改 mode hid extension

需要什麽？

在經過前面的四個練習，相信已經對於webapck有了一定的了解，現在我們就來一個綜合案例，進一步加深對於webpack的理解。

首先我們應該思考要解析.vue類型的文件，需要什麽樣的東西？應該按照什麽樣的步驟來？我們應該怎麽去搭建這個項目？

開始

第一步：初始化項目目錄

我們需要創建如下目錄及文件夾，最終目錄結構如下：

1
2
3
4
5
6
7
8
9
10
11
 
- dist //文件生成目錄
    -- //自動生成
- node_module //自動安裝
    -- ...
- src //文件入口
    -- components //組件存放
        -- app.vue //主.vue
    -- main.js //主.js
- index.html //主.html
- package.json //npm 配置
- webpack.cofig.js // webpack配置

第二步：安裝項目依賴

如果你上面沒有創建package.json文件的話，可以直接使用npm init來初始化我們的package.json文件的配置。

想要去編譯其他的文件比如react，coffce等等，就必須要加載很多對應的loader。要想加載一個.vue文件。當然也是同樣的道理。
建議用npm install xxx-loader --save-dev這樣的命令一條一條的敲。在命令行中，會有提示，可以幫助理解webpack的中的依賴管理關系。我的配置清單如下：
在實際項目中，json文件中不能出現註釋，在這裏為了方便大家了解裏面設置項的含義，就直接使用註釋的方式加載後面了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
{
    "name": "05-five-vue", //項目名稱
    "version": "1.0.0", //版本
    "description": "vue+webapck", //描述
    "main": "index.js", //主文件
    "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot"
    }, //scripts指定了運行腳本命令的npm命令行縮寫，比如這是的start指定了運行npm run start時，所要執行的命令。
    "dependencies": { //項目依賴
        "vue": "^2.5.17"
    },
    // 編譯成的 es 版本
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
    ],
    "devDependencies": { //各種各樣的loader，用來解析想相應的文件格式。要解析vue並且完成相應的功能，這些基本都是必須的。
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-preset-env": "^1.7.0",
        "babel-preset-stage-0": "^6.24.1",
        "babel-preset-stage-3": "^6.24.1",
        "cross-env": "^5.2.0",
        "css-loader": "^1.0.0",
        "file-loader": "^1.1.11",
        "node-sass": "^4.9.2",
        "sass-loader": "^7.1.0",
        "style-loader": "^0.21.0",
        "url-loader": "^1.0.1",
        "vue-loader": "^14.2.3",
        "vue-style-loader": "^4.1.1",
        "vue-template-compiler": "^2.5.17",
        "webpack": "^4.16.4",
        "webpack-cli": "^3.1.0",
        "webpack-dev-server": "^3.1.5"
    },
    "author": "guowenfh", //作者
    "license": "MIT", //開源協議
    "keywords": [ //關鍵字
        "vue",
        "webpack"
    ]
}

如果你想省事的話，直接復制上面的devDependencies,dependencies字段，並且填寫到你的package.json文件中。然後運行npm install就會自動安裝所有的模塊以及依賴。

第三步：配置webpack

文件已經設置好了，接下來就到了我們關鍵的一步，配置webpack.config.js,清單如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
const path = require(‘path‘)
const webpack = require(‘webpack‘)
// NodeJS中的Path對象，用於處理目錄的對象，提高開發效率。
// 模塊導入
module.exports = {
    // 入口文件地址，不需要寫完，會自動查找
    entry: ‘./src/main‘,
    // 輸出
    output: {
        path: path.join(__dirname, ‘./dist‘),
        // 文件地址，使用絕對路徑形式
        filename: ‘build.js‘,
        //[name]..這裏是webpack提供的根據路口文件自動生成的名字
        publicPath: ‘/dist/‘
        // 公共文件生成的地址
    },
    mode:‘development‘,
    // 加載器
    module: {
        // 加載器,loaders
        rules: [
            // 編譯css
            {
                test: /\.css$/,
                use: [‘vue-style-loader‘, ‘css-loader‘]
            },
            //.scss 編譯
            {
                test: /\.scss$/,
                use: [
                  ‘vue-style-loader‘,
                  ‘css-loader‘,
                  ‘sass-loader‘
                ],
              },
              {
                test: /\.sass$/,
                use: [
                  ‘vue-style-loader‘,
                  ‘css-loader‘,
                  ‘sass-loader?indentedSyntax‘
                ],
              },
            // 解析.vue文件
            {
                test: /\.vue$/,
                loader: ‘vue-loader‘,
                options: {
                    loaders: {
                      ‘scss‘: [
                        ‘vue-style-loader‘,
                        ‘css-loader‘,
                        ‘sass-loader‘
                      ],
                      ‘sass‘: [
                        ‘vue-style-loader‘,
                        ‘css-loader‘,
                        ‘sass-loader?indentedSyntax‘
                      ]
                    }
                }
            },
            // 轉化ES6的語法
            {
                test: /\.js$/,
                loader: ‘babel-loader‘,
                exclude: /node_modules/,
                options:{
                    presets: [[‘env‘, { modules: false }], ‘stage-0‘]
                }
            },
            // 圖片轉化，
            {
                test: /\.(png|jpg|gif|svg)$/,
                loader: ‘url-loader‘,
                options: {
                    name: ‘[name].[ext]?[hash]‘
                }
            }
        ]
    },
    resolve: {
        // 別名，可以直接使用別名來代表設定的路徑以及其他
        alias: {
            vue$: ‘vue/dist/vue.esm.js‘,
            filter: path.join(__dirname, ‘./src/filters‘),
            components: path.join(__dirname, ‘./src/components‘)
        },
        // require時省略的擴展名，如：require(‘module‘) 不需要module.js
        extensions: [‘*‘, ‘.js‘, ‘.vue‘, ‘.json‘]
    },
    // 服務器配置相關，自動刷新!
    devServer: {
        historyApiFallback: true,
        noInfo: true,
        overlay: true
    },
    performance: {
        hints: false
    },
    // 開啟source-map，webpack有多種source-map，在官網文檔可以查到
    devtool: ‘#eval-source-map‘
}

請詳細查看這裏面的設置，我這裏都是很簡單的配置，在你的項目中，還可以更進一步的對於入口文件和輸出文件進行更加深入的定制。

並且在這裏生成的css文件還會插到js中，有時我們需要更進一步的把它獨立出來，然後在html中引入這時就會用到webpack的插件，在這裏先不說（因為我暫時沒用到，沒有試驗過，好像也不麻煩，可以的話下篇再試試）

第四步：編寫代碼

接下來就是我們要展示的文件的編寫了，我直接把代碼貼上來了。

index.html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>webpack vue</title>
    <style>
        *, *:before, *:after {
            box-sizing: border-box;
        }
        body, html {
            height: 100%;
            overflow: hidden;
        }
        #app {
            margin: 20px auto;
            width: 800px;
            height: 600px;
        }
    </style>
</head>

<body>

    <div id="app"></div>

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

</html>

這裏是main.js的內容：

1
2
3
4
5
6
7
8
9
10
11
 
//es6語法：
import Vue from "vue";
//引入我們編寫的測試用vue文件。
import App from ‘./components/app‘;

Vue.config.debug = true;//開啟錯誤提示

new Vue({
    el: ‘#app‘,
    render: h => h(App)
})

這裏是app.vue：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<template>
    <div id="app">
        <h1>姓名：{{name}}</h1>
        <h2>{{age}}</h2>
    </div>
</template>
<script>
export default {
  name: ‘app‘,
  data() {
    return {
      name: ‘guowenfh‘,
      age: ‘23‘
    }
  }
}
</script>
<style lang="scss" >
$qwe: #098;
body {
  
  h1 {
    background-color: #eee;
    color: yellowgreen;
    transform: translate(10%, 10%);
  }

  h1:hover {
    height: 100px;
  }

  h2 {
    background-color: #999;
  }
}
</style>

第五步：修改自動刷新設置

下面再單獨的再談一下關於自動刷新的實現，首先需要說明，在上一篇博客中的自動刷新實現，是有問題的。只能改變css樣式，使顏色進行變化。對於html裏面的內容改變時，瀏覽器並不會自動刷新。

註意點一：
首先我們看到package.json中scripts字段中的"start": "cross-env NODE_ENV=development webpack-dev-server --open --hot"。 這裏開啟了 熱加載 以及自動打開瀏覽器。

註意點二：
在webpack.cofig.js中還有其余對於devServer進行一些配置，如下：

1
2
3
4
5
6
7
 
devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true,
    inline: true,
    progress: true, // 進度
},

這樣安裝設置完成之後，就有了自動局部更新了！！

結束

步驟都走完了，因為在上面的package.json中已經進行了scripts項的配置。運行npm start，打開localhost:8080

可以看到設置的背景色已經出來了,去改變一下背景顏色？data？template？

看看瀏覽器會不會自動刷新？

添加

開發環境可以了，但是生產環境呢？在 webpack.config.js我們再來增加一些配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
if (process.env.NODE_ENV === ‘production‘) {
    module.exports.mode = ‘production‘,
    module.exports.devtool = ‘#source-map‘
    // http://vue-loader.vuejs.org/en/workflow/production.html
    module.exports.plugins = (module.exports.plugins || []).concat([
      new webpack.DefinePlugin({
        ‘process.env‘: {
          NODE_ENV: ‘"production"‘
        }
      }),
      new webpack.LoaderOptionsPlugin({
        minimize: true
      })
    ])
}

然後再加一個 npm script 。 "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
運行 npm run build 我們就可以將我們剛剛開發的內容進行壓縮打包了。

如果你按照我的步驟，並且，npm包安裝沒有錯誤的話，應該就能成功了。

不行的話，請再仔細對照去看看有什麽地方沒有編寫對吧！

webpack入坑之旅（五）加載vue單文件組件

相關推薦

webpack入坑之旅（五）加載vue單文件組件

file loader clu html中 type 修改 mode hid extension 需要什麽？ 在經過前面的四個練習，相信已經對於webapck有了一定的了解，現在我們就來一個綜合案例，進一步加深對於webpack的理解。 首先我們應該思考要解析.vue類型的

webpack入坑之旅（二）loader入門

pts 文章 加載 dep javascrip mode 這就是 插件 可能 這是一系列文章，此系列所有的練習都存在了我的github倉庫中vue-webpack 在本人有了新的理解與認識之後,會對文章有不定時的更正與更新。下面是目前完成的列表： 引子 在上一篇博客中我們已

webpack入坑之旅（三）webpack.config入門

boot edm com new 使用 ble 內容 require 以及 這是一系列文章，此系列所有的練習都存在了我的github倉庫中vue-webpack，在本人有了新的理解與認識之後,會對文章有不定時的更正與更新。下面是目前完成的列表： 在上面我們已經嘗試過了兩種對

webpack入坑之旅（一）不是開始的開始

targe base 增加 -i pre 版本 uil 靜態頁 obi 最近學習框架，選擇了vue，然後接觸到了vue中的單文件組件，官方推薦使用 Webpack + vue-loader構建這些單文件 Vue 組件，於是就開始了webpack的入坑之旅。因為原來沒有用過

小程式wepy踩坑之旅（五）----- 購物車的實現

首先大家可以看下演示效果 我先把封裝的幾個元件程式碼放到前面。 1.購物車數量加減cart-count.wpy元件 <template> <view class="cart-count"> <vi

我的C#跨平臺之旅（五）：使用IoC之依賴註入實現

啟動 nuget alt 接口 one gin 分享 lis 技術分享 引入NuGet包：Unity 實現接口：IDependencyResolver 在啟動類中註入依賴的類： 註意：左框中的內容為接口或抽象類，右框中為實際要註入的

webpack+react+node採坑之旅 （上）

前言 之前一直以為能力已經夠了，想出去找份前端的工作，後來才發現還是自己太差，面試官隨便一個問題就能把我問啞，比如，webpack、gulp、grunt這些工具瞭解多少。這兩天學習webpack，踩了不少坑，也學到不少東西，記錄下來以便後查。 說明 本

Ubuntu搭建Hadoop的踩坑之旅（三）

namenode 結束 ctu mapreduce 分布 使用 framework 2.6 start 之前的兩篇文章介紹了如何從0開始到搭建好帶有JDK的Ubuntu的過程，本來這篇文章是打算介紹搭建偽分布式集群的。但是後來想想反正偽分布式和完全分布式差不多，所幸直接介紹

dotNet程序員的Java爬坑之旅（一）

是我 方法 轉java 自己的 java pri 也好 工作 計劃 　　　　仔細想了下還是轉java吧，因為後期不管是留在北京也好還是回老家也好，java的工作都會好找一點。現在的工作主要還是寫.net，目標是下一次離職的時候可以找到一份全職的java工作，我一直都覺得實踐

dotNet程序員的Java爬坑之旅（二）

模式 最好的 https servlet 很多 過濾器 () 被調用 回調 　　囉裏囉唆的寫了一大堆，最後還是全刪除了。哎~ 　　言歸正傳，最近因爲發生了很多事情，所以更新的有嗲晚了，最近也一直在學習，但是感覺效率什麼的不是很高，這是不對的，反思一下，從這篇博文開始，打起精

dotNet程序員的Java爬坑之旅（三）之spring MVC篇一

www. let ref ide filter ESS pro enc require 使用maven構建springMVC項目，開發工具為IDEA 一、構建Maven項目，模板為WebApp 二、在pom文件中配置SpringMvc配置（springMvc需要以來serv

機器學習之旅（五）

吳恩達教授的機器學習課程的第五週相關內容： 1、代價函式 首先引入一些便於稍後討論的新標記方法： 假設神經網路的訓練樣本有 m 個，每個包含一組輸入 x 和一組輸出訊號 y， L 表示神經網路層數， S I 表示每層的 neuron 個數(SL 表示輸出層神經元個數)， S L 代表

小程式wepy踩坑之旅（四）----- 簡單的動畫

大家可以先看下官網小程式apianimation:https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html，看完之後推薦看一下http://www.jb51.net/article/102263

小程式wepy踩坑之旅（三）----- 微信小程式wepy左滑刪除特效原始碼

我寫在了shop_cart.wepy裡，原始碼就在下面註釋很詳細，直接拷貝到新建的.wpy就可以使用 <template> <view class="item-box"> <view class="items">

小程式wepy踩坑之旅（一）---- thirdScriptError sdk uncaught third Error module "npm/lodash/_nodeUtil.js

     近期一直在學小程式，作為新手，比較了下mpvue和wepy兩個小程式框架，mpvue作為美團剛出來的vuejs開發看起來很不錯，學習成本很低，但是對於在實際專案開發中，mpvue剛出來，很多資料，比如踩坑，比較少，而we

Spring Boot 探索之旅（五）——Web支援

一、Spring MVC配置 /** * 主要WebMvc配置 * @author sunyiran * @date 2018-09-29 */ @Configuration public class WebMvcConfig extends WebMvcConfi

大疆無人機Android版SDK開發踩坑之旅（一）----前言

　　最近一段時間一直在做大疆無人機安卓版開發，這水也是挺深的，不仔細看官網SDK的介紹就會遇到各種各樣的坑，簡單記錄一下，希望可以讓其他人少走一些彎路。 　　安卓端用到的SDK大概有兩種：Android SDK和Android UX SDK 　　Android SDK（官網介紹）: 　　開發人員可以通過SDK

Java架構師之旅（五）

夜光序言： 世人辱亦棄你 餘他信亦護你 便值重踏塵泥。       正文：Java高併發場景的資料隔離方案  

小程式wepy踩坑之旅（一）---- thirdScriptError sdk uncaught third Error module "npm/lodash/_nodeUtil.js

     近期一直在學小程式，作為新手，比較了下mpvue和wepy兩個小程式框架，mpvue作為美團剛出來的vuejs開發看起來很不錯，學習成本很低，但是對於在實際專案開發中，mpvue剛出來，

weex採坑之旅（一）初識weex

按照官方文件搭好weex依賴環境後，安裝專案依賴包，執行npm run dev 和 npm run serve開啟watch模式和靜態伺服器。 然後開啟瀏覽器，輸入 http://localhost:8080/index.html，既可以看到 weex h5 的頁面，但