使用webpack手動搭建vue項目的步驟

Posted on by

一、前提條件

在開始以下步驟之前需先安裝好nodejs環境（最好直接安裝nvm，然後再通過nvm管理node版本），如未安裝，可參考：https://www.jb51.net/article/272933.htm

二、手動搭建vue項目的步驟：

1. 創建項目

執行以下命令：

mkdir  vue-demo
cd vue-demo

如圖所示：

2. 生成package.json文件

執行以下命令：

npm init

如圖所示，此時能看到有生成package.json文件：

3. 引入webpack和創建webpack.config.js文件

執行以下命令：

npm install webpack --save-dev

如圖所示：

然後，創建webpack.config.js文件：

const path = require('path')
module.exports = {
    entry:'./src/main.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: "demo.js"
    }
}

如圖所示：

4. 創建index.html，main.js文件

index.html文件內容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-webpack-demo</title>
</head>
<body>
    <script src="./dist/demo.js"></script>
</body>
</html>

創建src文件夾，在文件夾下創建main.js文件，內容如下：

alert('hello world');

如圖所示：

5. 使用webpack命令編譯

此時，順便安裝webpack-cli。可見目錄多瞭一個dist文件夾下面包含demo.js文件。內容如下所示：

6. 引入vue2，修改index.html，main.js文件

執行以下命令：

npm install [email protected]

如圖所示：

執行命令後能發現package.json中自動新增瞭以下內容：

修改main.js內容如下：

import Vue from 'vue'
var vm = new Vue({
    el:'#app',
    data:{
        msg:'hello vue'
    }
})

在index.html中加入msg

7. 引入babel

執行以下命令：

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

將babel加入到webpack.config.js配置文件中

module: {
    rules: [
        {
            test: /\.js$/,
            loader: "babel-loader",
            exclude: /node_modules/
        }
    ]
}

如圖所示：

8. 再次執行webpack命令，完成搭建

關於提示“The ‘mode’ option has not been set”,可在webpack.config.js中設置為開發模式：

此時在瀏覽器打開index.html報以下錯誤：

這是因為正在使用的是vue的運行時版本，而此版本中的編譯器時不可用的，我們需要把它切換成運行時 + 編譯的版本，需要在配置文件中添加以下代碼：

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
}

如圖所示：

再次運行webpack 命令重新編譯，然後再在瀏覽器打開index.html文件：

此時，一個基於webpack的vue 項目就搭建好。

三、Webpack的常用配置：

1.HtmlWebpackPlugin插件(復制index.html)。

作用：

編譯時自動在dist的目錄中創建一個html文件並將index.html中的內容復制過去。

執行以下命令用以引入插件：

npm install --save-dev html-webpack-plugin

在webpack.config.js文件中添加如下配置：

const HtmlWebpackPlugin = require('html-webpack-plugin')
…
plugins:[
    new HtmlWebpackPlugin()
]

位置如下：

執行webpack命令再次編譯，將自動在dist目錄下生成html文件：

對比原本自己寫的index.html，可知少瞭以下內容：

接下來可通過修改配置文件來解決這個問題：

plugins:[
    new HtmlWebpackPlugin({
        title: "vue demo",
        template: "index.html"
    })
]

刪掉dist文件夾下index.html的script代碼後再次編譯，得到新的index.html文件如下：

2.webpack-dev-server插件(實時加載)

作用：

提供瞭一個簡單的web服務器，能夠實時重新加載。無須在瀏覽器中直接打開文件（我們實際開發中將代碼部署在 server中，而不是在瀏覽器中直接打開文件。）。

執行以下命令：

npm install --save-dev webpack-dev-server

在webpack.config.js文件中添加如下配置，以告知webpack-dev-server， 在localhost:8080 下建立服務，將 dist 目錄下的文件，作為可訪問文件。：

devServer: {
    static: path.resolve(__dirname,'static')
}

位置如下：

在package.json中添加一個script腳本以直接運行開發服務器（dev server）

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

位置如下：

執行npm run dev命令：

此時，瀏覽器將會自動打開頁面，這證明已經成功啟動服務：

3. css加載器(css-loader和style-loader)

執行以下命令安裝css-loader和style-loader：

npm install --save-dev css-loader style-loader

在 webpack.config.js 中進行如下配置：

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

具體位置如下：

在src 目錄下新建一個styles的文件夾並在裡面添加一個main.css的文件,寫上以下內容：

#app{
    color: red;
}

然後在main.js文件中引入css

再次執行npm run dev命令，頁面上的字體樣式將會變化：

4. 圖片資源和字體的加載

說明：

url-loader是基於file-loader的封裝，故需引入file-loader。url-loader解決圖片較多時過多http請求導致頁面性能降低的問題，將引入的圖片編碼，生成dataURl。相當於把圖片數據翻譯成一串字符,再把這串字符打包到文件中，最終隻需要引入這個文件就能訪問圖片瞭。

執行以下命令：

npm install --save-dev file-loader url-loader

在配置文件添加以下內容：

{
    test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000,
        esModule: false
    }
},
{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000
    }
}

位置如下：

在src 目錄下新建一個images的文件夾並在裡面添加圖片

然後在main.js中引入

import logo from'./images/logo.png'

接著在index.html中使用

刷新頁面可見已經能看到圖片：

5. vue-loader

說明：

在vue的開發過程中，通常我們需要寫.vue結尾的文件即組件，這類文件需要通過 vue-loader 來加載，vue-template-compiler來編譯。

執行以下命令：

npm install --save-dev [email protected] vue-template-compiler

在webpack.config.js文件中添加：

const { VueLoaderPlugin } = require('vue-loader')
…
module: {
    rules: [
        {
            test: /\.vue$/,
            loader: 'vue-loader'
        }
    ]
},

…
plugins:[
    new VueLoaderPlugin()
]

修改index.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-webpack-demo</title>
</head>
<body>
    <div id="app">
       
    </div>
</body>
</html>

在src文件夾下新建app.vue文件，內容如下：

<template>
    <div id="app">
        <img src="./images/logo.png" alt="logo">
        {{msg}}
    </div>
</template>
<script>
    export default {
        name: 'app',
        data(){
            return {
                msg: '嘗試vue頁面是否能打開瞭'
            }
        }
    }
</script>
<style scoped>
    img{
        width: 100px;
        height: 100px;
    }
</style>

修改main.js:

import Vue from 'vue'
import './styles/main.css'
import App from './app.vue'

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

運行npm run dev，瀏覽器頁面內容將會更新：

6. 熱重載

說明：

“熱重載”不隻是當你修改文件的時候簡單重新加載頁面。啟用熱重載後，當你修改 .vue 文件時，該組件的所有實例將在不刷新頁面的情況下被替換。手動設置工程時，熱重載會在啟動 webpack-dev-server –hot 服務時自動開啟。

修改package.json：

到此這篇關於從零使用webpack手動搭建vue項目的文章就介紹到這瞭,更多相關webpack搭建vue項目內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：