webpack+vue起步

時間 2019-11-07

標籤 webpack+vue webpack vue 起步简体版

原文原文鏈接

原文連接：http://mrzhang123.github.io/2016/05/31/webpack-vue-2/javascript

本文基於`vue1.x`

基於`vue2.x&webpack2.x`請移步至

記得第一次知道Vue.js是在勾三股四大大的微博，那時候他開始翻譯vue的文檔，從那時候開始到如今，看了幾回vue的教程，每次都有更深的理解，由於以前並無研究過angular等框架，因此對MVVM並非很瞭解，可是通過這段時間對vuejs的一些研究，愈來愈懂了，這篇文章，只是對vuejs和webpack配合的很是基礎的文章，我想隨着我對vue的深刻理解，會對組件化，模塊化，MVVM有更深刻的理解。css

項目的建立

1.新建項目文件夾，並在其中創建package.jsonhtml

$ mkdir [project name]
$ cd [project name]
$ npm init

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

<!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>

src文件夾，並在該文件夾下創建main.jsjava

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

設置webpack

1.安裝webpack，webpack-dev-server以及相關的loaders

# 全局安裝webpack，webpack-dev-server
$ npm install -g webpack
$ npm install -g webpack-dev-server
# 爲項目安裝其餘依賴
$ 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 vue-loader vue-html-loader vue-style-loader vue-hot-reload-api -D

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編譯核心 
babel-loader：編譯寫入ES2015文檔 
babel-preset-es2015：ES2015語法 
babel-preset-stage-0：開啓測試功能 
babel-runtime：babel執行環境 node

url-loader

這裏介紹下url-loader，這個loader其實是對file-loader的封裝https://github.com/webpack/url-loader
好比CSS文件中有時候會這麼寫：webpack

.demo{
    background-image: url('a.png');
}

module:{
    loaders:[
        {test:/\.(png|jpg)$/,loader:'url-loader?limit=8192'}
    ]
}

通過以上配置，當a.png小於8K就會自動將圖片轉換成base64編碼，若是不小於，則不會轉換。
這裏順便提一句，在module配置的時候，loader的寫法：git

module:{
    loaders:[
        {test:/\.jade$/,loader:'jade'}
        //這裏配置了讓webpack識別jade的loader，其餘相似，好比.vue
        //用於css文件的loader有兩種寫法
        {test:/\.css$/,loader:'style!css'}
        {test:/\.css$/,loaders:['style','css']}
    ]
}

2.配置`webpack.config.js`

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

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']
  }
}

特別說明
若是要在.babelrc下配置babel，則須要在根目錄下新建該文件，windows環境下，不能新建該txt文件而後改後綴，須要經過dos命令創建：

echo>.babelrc

經過該命令就能夠創建babelde配置文件，用編輯器打開，修改裏面的內容爲：

{
  "presets": ["es2015", "stage-0"],
  "plugins": ["transform-runtime"]
}

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

$ webpack

打開index.html就能夠看到瀏覽器中看到咱們剛剛寫的文字
至此咱們實現了最基本的利用webpack打包vue，下一篇將講解如何利用webpack+vue真正實現組件化。

相關標籤/搜索

每日一句

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