小白上學のwebpack+vue初級使用指南

時間 2019-12-06

標籤上學 webpack+vue webpack vue 初級使用指南简体版

原文原文鏈接

寫這篇文章的時候先說一下緣由：
webpack：如今很流行的打包工具；推薦緣由：學習成本比gulp，fis3等簡單，就是這麼直接！
vue：國人開發的MVVM框架，一點都不遜於recat，vue2.0的執行速度比recat都快！推薦緣由：http://www.cnblogs.com/terry0...這裏很權威。但咱們今天學的是vue1.0，緣由：vue2.0我還不會(^_^)!並且新手仍是vue1.0學習爲主吧。緣由：中文文檔全，學習曲線簡單，很容易上手。css

課程開始：
須要技能：
1>.node.js環境
2>.npm 會使用 (個人筆記中有smart-npm能夠解決npm慢的問題)
3>.vue 最基本的{{}}符號會用（不會的去vue官網看5分鐘教程就會）
4>.ES6 基本知道import是什麼東西就行html

適用學習人羣：用過vue，但不知道如何和webpack一塊兒結合使用的迷茫者；
項目建立
這裏已經安裝過nodejs，npm，webpack
1.用命令行工具進入你須要建立模板文件夾輸入：vue

$ mkdir myvuetest
$ cd myvuetest
$ npm init

你會發現文件中出現了package.json暫時不用管；node

2.在項目目錄下新建index.htmlwebpack

<!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.在根目錄建立src文件夾，並在該文件夾下創建main.jsweb

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

設置webpack
1.安裝webpack，webpack-dev-server以及相關的loadersnpm

# 全局安裝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中對應的包名稱，便於往後管理
$ 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的服務器環境，就是能夠用lacalhost：8080等端口方式瀏覽文件
webpack-merge：開發環境和生產環節的webpaak配置文件的配置合併
css-loader：編譯寫入css
style-loader：把編譯後的css整合進html
file-loader：編譯寫入文件，默認狀況下生成文件的文件名是文件名與MD5哈希值的組合
vue：vue主程序
vue-laoder：編譯寫入.vue文件
vue-html-loader：編譯vue的template部分
vue-style-loader：編譯vue的樣式部分
vue-hot-reload-api：webpack對vue實現熱替換
babel-core：ES2015編譯核心<br/>
babel-loader：編譯寫入ES2015文檔
babel-preset-es2015：ES2015語法
babel-preset-stage-0：開啓測試功能
babel-runtime：babel執行環境json

2.配置webpack.config.js
在根目錄下創建webpack.config.js，配置以下：gulp

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

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

$ webpack

打開index.html就能夠看到瀏覽器中看到咱們剛剛寫的文字了。

後續總結：在學習打包工具過程當中因爲出現的問題各類蛋疼，讓不少人都半途而廢。我經歷了半途而廢又從新撿起來，搜別人的問題解決本身的問題，而後就慢慢學會了。你們互相學習共同進步！本節講的都是很基礎的東西，本身能夠延展一下。還有我推薦的是webpack+ES6+vue的新手學習模式！這樣你就不會被互聯網技術淘汰！能夠關注我，我這我的挺懶的好久才寫一篇，但都是用最基礎的講通你們學習的疑惑！值得關注哦！^_^

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。