webpack 搭建 vue 項目

時間  2019-11-06
標籤 webpack 搭建 vue 項目 简体版
原文   原文鏈接

前期準備

  1. webpack
  2. vue.js
  3. npm
  4. nodejs
  5. ES6語法

因爲本文內容是經過npm來加載vue，因此開始以前需安裝nodejs環境，安裝完成以後再執行如下步驟：javascript

建立項目

mkdir  vue-demo
    cd vue-demo
複製代碼

使用 npm init 命令 生成package.json文件

npm init
複製代碼

大概生成的package.json 以下:css

{
  "name": "vue-demo",
  "version": "1.0.0",
  "description": "this is a vue demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "ISC",
  "dependencies": {
  }
}
複製代碼

引入webpack ，關於如何使用webpack 請參考官網

npm install webpack --save-dev
複製代碼

若是使用npm下載的速度過慢，可使用淘寶的cnpm 鏡像html

npm install -g cnpm –registry=https://registry.npm.taobao.org
複製代碼

輸入以上命令便可將npm指向國內鏡像，使用時需將npm 替換成cnpm便可， 其餘不變vue

在項目中建立webpack.config.js 文件

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

使用webpack 命令編譯

webpack
複製代碼

編譯以後的項目目錄大概以下: java

注意：在使用webpack命令以前 需先建立 index.html 和 main.js 文件 其中 main.js文件位於src 目錄下node

index.html 的內容以下webpack

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

main.js 的內容以下git

alert('hello world');
複製代碼

引入vue

npm install vue --save
複製代碼

執行命令後會在package.json中新增以下代碼es6

"dependencies": { "vue": "^2.4.2" }github

將main.js中的內容修改成以下代碼

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

引入babel

npm install --save-dev babel-core babel-loader
複製代碼

因爲在使用vue時會用到不少es6的語法，可是如今不少瀏覽器對es6的支持不是很好，因此在編譯時須要將這些語法轉換es5的語法，此時咱們使用babel來進行編譯。

babel的使用請閱讀官網文檔http://babeljs.cn/。

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

const path = require('path')

module.exports ={
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"demo.js"
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                loader:"babel-loader",
                exclude: /node_modules/
            }
        ]
    }
}
複製代碼

而後命令行輸入 webpack 命令便可進行編譯，再編譯完成後用瀏覽器打開index.html 文件，此時會發現瀏覽器控制檯出現如下錯誤：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)
複製代碼

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

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

此時在運行webpack 命令從新編譯，編譯後在訪問index.html頁面，頁面內容以下圖

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

webpack的一些經常使用配置

在項目的實際開發中咱們還會引入css、圖片以及字體等資源文件。這些文件的引入都須要相應的加載器才能將其加載到項目中並正常使用。

下面只介紹部分咱們須要的加載器的使用方法, 更多信息請查閱webpack加載器文檔。

css加載器

咱們須要引入css-loader、和style-loader (安裝style-loader的目的是爲了在html中以style的方式嵌入css )。

執行命令

npm install --save-dev css-loader style-loader
複製代碼

在 webpack.config.js 中進行以下配置

module: {
        rules: [{
            test: /\.js$/,
            loader: "babel-loader",
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }]
    },
複製代碼

而後再src 目錄下 新建一個styles的文件夾並在裏面添加一個main.css的文件,寫上如下內容

#app{
    color:red;
}
複製代碼

而後再運行 webpack 命令, 並從新加載index.html 文件 ,可見css已經生效,效果以下圖

圖片資源的加載

使用file-loader或者url-loader加載器進行加載，他們都是用於打包文件和圖片資源的，二者的區別是url-loader在file-loader的基礎上進行了一次封裝。

在訪問網站時若是圖片較多，會發不少http請求，會下降頁面性能。這個問題能夠經過url-loader解決。url-loader會將引入的圖片編碼，生成dataURl。至關於把圖片數據翻譯成一串字符,再把這串字符打包到文件中，最終只須要引入這個文件就能訪問圖片了。

固然，若是圖片較大，編碼會消耗性能。所以url-loader提供了一個limit參數，小於limit字節的文件會被轉爲DataURl，大於limit的還會使用file-loader進行copy。

此處咱們使用url-loader,因爲它是基於file-loader的封裝，因此也須要引入file-loader。

npm install --save-dev file-loader url-loader
複製代碼

webpack.config.js 的rules 中增長以下配置

{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000
    }
}
複製代碼

接下來就是將圖片引入到代碼中，須要在main.js和index.html 分別做以下修改:

main.js

import Vue from 'vue'
import './styles/main.css'
import logo from'./images/logo.png'

var vm = new Vue({
    el:'#app',
    data:{
        logo:logo,
        msg:'hello vue'
    }
})
複製代碼

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue demo</title>
</head>
<body>
    <div id="app">
        <img :src="logo" alt="logo" class="logo">
        {{msg}}
    </div>
    <script src="./dist/demo.js"></script>
</body>
</html>
複製代碼

最後運行webpack 命令並訪問 index.html ，結果以下

在測試中發現當圖片大於10KB的時候發現加載圖片失敗，找不到圖片，但此時在dist目錄下面是能看到已經經過加載器加載成功了的圖片，再經過瀏覽器的開發者工具對圖片的引用路徑進行檢查時，能夠發現頁面中img的路徑不對，路徑中只有文件名缺失了前面的dist目錄,因此此時咱們須要將main.js中的代碼進行以下修改

logo:"./dist/"+logo,
複製代碼

從新編譯後圖片就顯示出來了。可是如今新的問題又出來了，因爲咱們在配置文件中配置了小於10kb的代碼將以 base64的形式內聯在代碼中。因此此時是不須要 "./dist" 這個前綴的。 解決此問題有兩種辦法：

  • 不使用base64的形式將圖片內嵌到代碼中
  • 將html文件放到dist目錄中 既然用了url-loader加載器則不推薦使用第一種。因此咱們使用第二種方式。

將html文件放到dist目錄中最簡單的辦法就是把index.html文件複製到dist目錄中，而後將引入就是的代碼改成：

<script src="./demo.js" > </script>
複製代碼

main.js中改回原來的設置

logo:logo,
複製代碼

從新編譯後圖片在兩種狀況下均可以加載出來了。

還有一中比較經常使用的方式是在編譯時自動在dist的目錄中建立一個html文件並將index.html中的內容複製過去。此時咱們須要時webpack的 HtmlWebpackPlugin 插件。

HtmlWebpackPlugin 插件

引入插件

npm install --save-dev html-webpack-plugin
複製代碼

webpack.config.js 中增長以下配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
...

plugins:[
     new HtmlWebpackPlugin()
]
複製代碼

從新編譯後發如今dist目錄下生成了以下內容的html的文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="demo.js"></script></body>
</html>
複製代碼

與咱們原來本身的寫index.html相比，該文件缺乏了下面這些這些內容

<div id="app">
        <img :src="logo" alt="logo" class="logo">
        {{msg}}
    </div>
複製代碼

如今須要對配置文件作稍微的修改，讓html文件在建立的時候自動將index.html的中內容複製過去。經過查閱該插件的文檔，可知需作以下修改：

plugins:[
     new HtmlWebpackPlugin({
          title: 'vue demo',
          template: 'index.html'         
     })
]
複製代碼

index.html 文件中 去除 script代碼，在從新編譯後，便可獲取咱們須要的html文件

詳細參數配置請參考官方文檔

webpack-dev-server

在咱們實際開發中須要將代碼部署在server中，而不是在瀏覽器中直接打開文件。此時咱們須要使用webpack的 webpack-dev-server 。

webpack-dev-server 爲咱們提供了一個簡單的web服務器，而且可以實時從新加載（live reloading）。

npm install --save-dev webpack-dev-server
複製代碼

在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: "demo.js"
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'vue demo',
            template: 'index.html'
        })
    ],
    devServer:{
        contentBase:"./dist"
    },
    module: {
        rules: [{
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            }, {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            }, {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000
                }
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
        }
    }
}
複製代碼

上面紅色字體的配置信息是告知webpack-dev-server， 在localhost:8080 下創建服務，將 dist 目錄下的文件，做爲可訪問文件。

讓咱們在package.json中添加一個script腳本,能夠直接運行開發服務器(dev server)：

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

而後輸入以下命令

npm run dev
複製代碼

啓動完成後，瀏覽器會自動打開一個訪問 http://localhost:8080/ 的頁面

此時服務已啓動成功。

字體的加載

字體的加載方式與圖片的同樣也是用url-loader，配置以下

{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: {
        limit: 10000
    }
 }
複製代碼

vue-loader

在vue的開發過程當中，一般咱們須要寫.vue結尾的文件即組件，如app.vue

<template>
    <div id="app">
        <img src="./images/logo2.jpg" alt="logo" >
        {{msg}}
    </div>
</template>
<script>
    export default {
        name:'app',
        data(){
            return {
                msg:"hello vue !!"
            }
        }
    }
</script>
複製代碼

該文件須要經過vue-loader來進行加載，如今咱們須要作以下配置。經過 vue-loader 和vue-template-compiler來加載並編譯.vue文件

npm install --save-dev vue-loader vue-template-compiler
複製代碼

webpack.config.js 中

{
    test: /\.vue$/,
    loader: 'vue-loader'
 }
複製代碼

爲了在vue中引入對.vue的使用，咱們需進行以下修改

index.html

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

main.js

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

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

app.vue

<template>
    <div id="app">
        <img src="./images/logo.png" alt="logo" >
        {{msg}}
    </div>
</template>
<script>
    export default {
        name:'app',
        data(){
            return {
                msg: 'hello vue !!'
            }
        }
    }
</script>
複製代碼

修改完成後 運行 npm run dev 命令 ，得到以下效果的頁面

熱部署

在上一步中，若是咱們修改app.vue文件中的msg的參數，能夠看到頁面會自動刷新。可是此時是頁面全局刷新的，若是咱們只想局部刷新即只刷新修改的部分，須要使用webpack的HotModuleReplacementPlugin插件，在webpack.config.js的plugins中添加下面的信息:

new webpack.HotModuleReplacementPlugin()
複製代碼

而後去package.json中，script 裏面dev的值中加上 --hot -only

"dev": "webpack-dev-server --hot-only --open",
複製代碼

而後重啓服務，再修改 msg 的值，會發現此時值的改變是局部刷新的。

生產環境

若是咱們在瀏覽器的控制檯中發現有以下提示

意思時說項目如今運行在開發環境中，在部署到正式環境下時，要確保它是處於production的模式。須要將代碼打包部署到生產環境時須要進行以下配置： 

var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
    new webpack.DefinePlugin({
        'process.env': {
            NODE_ENV: '"production"'
        }
    }),
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    })
]}
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程