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

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

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

引言

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

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

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

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

原因：

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

課程開始需要技能：

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

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

項目創(chuàng)建

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

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

$ mkdir myvuetest
$ cd myvuetest
$ npm init

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

2.在項目目錄下新建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，全局安裝因為其他項目也會使用到這兩個包
$ npm install -g webpack
$ npm install -g webpack-dev-server
# 為項目安裝其他依賴 下面i是install的簡寫，注意vue@1.0是安裝vue1.0版本的不然會出錯；-D是--save-dev的簡寫，用于生成package.json中對應(yī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：用戶建立node的服務(wù)器環(huán)境，就是可以用lacalhost：8080等端口方式瀏覽文件

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

css-loader：編譯寫入css

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

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

vue：vue主程序

vue-laoder：編譯寫入.vue文件

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

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

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

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

babel-loader：編譯寫入ES2015文檔

babel-preset-es2015：ES2015語法

babel-preset-stage-0：開啟測試功能

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語法
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      //圖片轉(zhuǎn)化，小于8K自動轉(zhuǎn)化為base64的編碼
      {
        test: /\.(png|jpg|gif)$/,
        loader:'url-loader?limit=8192'
      }
    ]
  },
  //這里用于安裝babel，如果在根目錄下的.babelrc配置了，這里就不寫了
  babel: {
     presets: ['es2015','stage-0'],
     plugins: ['transform-runtime']
  }
}

完成該配置我們在命令中運行：

$ webpack

打開index.html就可以看到瀏覽器中看到我們剛剛寫的文字了。

總結(jié)

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

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

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

您可能感興趣的文章: