vue?結(jié)合webpack的初級(jí)使用指南小白學(xué)習(xí)篇

更新時(shí)間：2023年05月26日 11:45:11 作者：smallStone

這篇文章主要為大家介紹了vue?結(jié)合webpack的初級(jí)使用指南非常適合入門(mén)webpack的小白學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

webpack：現(xiàn)在很流行的打包工具；

推薦原因：學(xué)習(xí)成本比gulp，fis3等簡(jiǎn)單，就是這么直接！

vue：國(guó)人開(kāi)發(fā)的MVVM框架，一點(diǎn)都不遜于recat，vue2.0的執(zhí)行速度比recat都快！

但我們今天學(xué)的是vue1.0，

原因：

vue2.0我還不會(huì)(^_^)!而且新手還是vue1.0學(xué)習(xí)為主吧。
中文文檔全，學(xué)習(xí)曲線(xiàn)簡(jiǎn)單，很容易上手。

課程開(kāi)始需要技能：

1>.node.js環(huán)境
2>.npm 會(huì)使用 (我的筆記中有smart-npm可以解決npm慢的問(wèn)題)
3>.vue 最基本的{{}}符號(hào)會(huì)用（不會(huì)的去vue官網(wǎng)看5分鐘教程就會(huì)）
4>.ES6 基本知道import是什么東西就行

適用學(xué)習(xí)人群：用過(guò)vue，但不知道如何和webpack一起結(jié)合使用的迷茫者；

項(xiàng)目創(chuàng)建

這里已經(jīng)安裝過(guò)nodejs，npm，webpack

1.用命令行工具進(jìn)入你需要?jiǎng)?chuàng)建模板文件夾輸入：

$ mkdir myvuetest
$ cd myvuetest
$ npm init

你會(huì)發(fā)現(xiàn)文件中出現(xiàn)了package.json暫時(shí)不用管；

2.在項(xiàng)目目錄下新建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue example</title>
</head>
<body>
    <div>{{message}}</div>
    <script src="dist/build.js"></script>
</body>
</html>

3.在根目錄創(chuàng)建src文件夾，并在該文件夾下建立main.js

import Vue from 'vue'
new Vue({
    el:'body',
    data:{
        message:'test success!'
    }
});

設(shè)置webpack

安裝webpack，webpack-dev-server以及相關(guān)的loaders

# 全局安裝webpack，webpack-dev-server，全局安裝因?yàn)槠渌?xiàng)目也會(huì)使用到這兩個(gè)包
$ npm install -g webpack
$ npm install -g webpack-dev-server
# 為項(xiàng)目安裝其他依賴(lài) 下面i是install的簡(jiǎn)寫(xiě)，注意vue@1.0是安裝vue1.0版本的不然會(huì)出錯(cuò)；-D是--save-dev的簡(jiǎn)寫(xiě)，用于生成package.json中對(duì)應(yīng)的包名稱(chēng)，便于日后管理
$ npm i webpack-merge css-loader style-loader file-loader url-loader babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-preset-stage-0 babel-runtime vue@1.0 vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D

部分包的作用解釋

webpack-dev-server：用戶(hù)建立node的服務(wù)器環(huán)境，就是可以用lacalhost：8080等端口方式瀏覽文件

webpack-merge：開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)節(jié)的webpaak配置文件的配置合并

css-loader：編譯寫(xiě)入css

style-loader：把編譯后的css整合進(jìn)html

file-loader：編譯寫(xiě)入文件，默認(rèn)情況下生成文件的文件名是文件名與MD5哈希值的組合

vue：vue主程序

vue-laoder：編譯寫(xiě)入.vue文件

vue-html-loader：編譯vue的template部分

vue-style-loader：編譯vue的樣式部分

vue-hot-reload-api：webpack對(duì)vue實(shí)現(xiàn)熱替換

babel-core：ES2015編譯核心<br/>

babel-loader：編譯寫(xiě)入ES2015文檔

babel-preset-es2015：ES2015語(yǔ)法

babel-preset-stage-0：開(kāi)啟測(cè)試功能

babel-runtime：babel執(zhí)行環(huán)境

配置webpack.config.js

在根目錄下建立webpack.config.js，配置如下：

var path = require('path');
module.exports = {
  entry: './src/main.js',
  //定義webpack輸出的文件，這里設(shè)置了讓打包后生成的文件放在dist文件夾下的build.js文件中
  output: {
    path: './dist',
    publicPath:'dist/',
    filename: 'build.js'
  },
  module: {
    loaders: [
      //轉(zhuǎn)化ES6語(yǔ)法
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      //圖片轉(zhuǎn)化，小于8K自動(dòng)轉(zhuǎn)化為base64的編碼
      {
        test: /\.(png|jpg|gif)$/,
        loader:'url-loader?limit=8192'
      }
    ]
  },
  //這里用于安裝babel，如果在根目錄下的.babelrc配置了，這里就不寫(xiě)了
  babel: {
     presets: ['es2015','stage-0'],
     plugins: ['transform-runtime']
  }
}

完成該配置我們?cè)诿钪羞\(yùn)行：

$ webpack

打開(kāi)index.html就可以看到瀏覽器中看到我們剛剛寫(xiě)的文字了。

總結(jié)

在學(xué)習(xí)打包工具過(guò)程中由于出現(xiàn)的問(wèn)題各種蛋疼，讓很多人都半途而廢。我經(jīng)歷了半途而廢又重新?lián)炱饋?lái)，搜別人的問(wèn)題解決自己的問(wèn)題，然后就慢慢學(xué)會(huì)了。大家互相學(xué)習(xí)共同進(jìn)步！本節(jié)講的都是很基礎(chǔ)的東西，自己可以延展一下。

還有我推薦的是webpack+ES6+vue的新手學(xué)習(xí)模式！這樣你就不會(huì)被互聯(lián)網(wǎng)技術(shù)淘汰！可以關(guān)注我，我這個(gè)人挺懶的很久才寫(xiě)一篇，但都是用最基礎(chǔ)的講通大家學(xué)習(xí)的疑惑！值得關(guān)注哦！^_^

更多關(guān)于vue webpack使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: