webpack + vue最佳實踐

之前用webpack + vue 做項目一直不是很懂，這次有空梳理下，so，讓我們重新開始，我們的目的是：

• 使用commonJs規范編寫面向瀏覽器端的代碼
• 升級到可以使用ES2015書寫規范
• 使用vue來組織我們的項目代碼

資料

• 一小時包教會 —— webpack 入門指南
• vue-loader
• 入門Webpack，看這篇就夠了

webpack

常用命令

$ webpack --display-error-details //方便出錯時能查閱更詳盡的信息
 
$ webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）來打包
 
$ webpack --watch //監聽變動並自動打包
 
$ webpack -p //壓縮混淆腳本，這個非常非常重要！
 
$ webpack -d //生成map映射文件，告知哪些模塊被最終打包到哪里了
 
$ webpack --progress //顯示進度

loaders 用於轉換應用程序的資源文件，他們是運行在nodejs下的函數 使用參數來獲取一個資源的來源並且返回一個新的來源(資源的位置)

npm install style-loader --save-dev
npm install css-loader --save-dev
npm install less -save-dev
npm install less-loader --save-dev

樣式獨立

npm install extract-text-webpack-plugin --save-dev

config

var ExtractTextPlugin = require("extract-text-webpack-plugin");
plugins: [
  new ExtractTextPlugin("[name].css")
]
loaders: [
  { test: /\.css$/, loader: ExtractTextPlugin.extract("css") },
  { test: /\.less$/, loader: ExtractTextPlugin.extract("css!less") }
]　　

配置外部模塊

有時我們想引入一個庫，比如vue，如果用webpack打包的話，生成的bundle會比較大。但是通過如下的配置可以在頁面中引入vue，但是在js文件里還是用require的方式聲明。

externals: {
  // require("jquery") 是引用自外部模塊的
  // 對應全局變量 jQuery
  vue: 'window.Vue'
}

index.js

let Vue = require("vue");

我們看下vue的這個模塊在bundle里是怎么表現的。

/*!*****************************!*\
  !*** external "window.Vue" ***!
  \*****************************/
/***/ function(module, exports) {
  module.exports = window.Vue;
/***/ },

ES6

webpack + babel可以我們書寫ES6代碼規范的js了。但是需要加入一些babel轉換包

npm install babel-loader babel-core babel-preset-es2015 --save-dev

config

module: {
  //加載器配置
  loaders: [
    { test: /\.js$/, loader: "babel",query: {presets: ['es2015']} }
  ]
},

babel

.babelrc : 該文件用來設置轉碼規則和插件

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

 

babel-preset-es2015 : 2015轉碼規則
babel-preset-stage-0/1/2/3 : ES7不同階段語法提案的轉碼規則（共有4個階段）
babel-core : API轉換核心文件
babel-plugin-transform-runtime : 語法轉換
babel-polyfill : api polyfill　　

Vue

使用vue + webpack來整合項目。這里需要使用vue-loader，由於版本問題，vue version1.x請使用^8.0.0的版本來轉換。

這里有一份package.json 的 devDependencies，親測ok

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack --watch -d",
    "publish": "webpack -d -p --progress"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.1.2",
    "babel-loader": "^6.1.0",
    "babel-plugin-transform-runtime": "^6.1.2",
    "babel-preset-es2015": "^6.1.2",
    "babel-runtime": "^5.8.0",
    "css-loader": "^0.23.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "vue-hot-reload-api": "^1.2.0",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^8.0.0",
    "vue-style-loader": "^1.0.0",
    "webpack": "^1.12.2"
  }
}

webpack.config.js

var webpack = require('webpack');
var vue = require('vue-loader')
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
 
module.exports = {
    //插件項
    plugins: [
        new ExtractTextPlugin("[name].css")
    ],
    //頁面入口文件配置
    entry: {
        index : './src/index.js'
    },
    //入口文件輸出配置
    output: {
        path: './dist/',
        filename: '[name].js'
    },
    module: {
        //加載器配置
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("css") },
            { test: /\.less$/, loader: ExtractTextPlugin.extract("css!less") },
            { test: /\.js$/, loader: "babel",query: {presets: ['es2015']},exclude: /node_modules/ },
            { test: /\.vue$/, loader: 'vue'}
        ]
    },
    vue : {
      loaders: {
        css: ExtractTextPlugin.extract("css"),
        less: ExtractTextPlugin.extract("css!less")
      },
      autoprefixer: { browsers: ["ios_saf >= 7", "android >= 4"] }
    },
    externals: {
        vue: "window.Vue"
    }
};

目錄結構

src
  |____index.css
  |____index.js
  |____vue-mods
       |____index.js
       |____index.less
       |____index.vue

src/index.js

import "./index.css";
import Vue from "vue";
import App from "./vue-mods/index.vue";
addEventListener('DOMContentLoaded', function () {
    new Vue(App).$mount("app");
});
// moduleA.say();

src/vue-mods/index.vue

<style lang="less" src="./index.less"></style>
<template>
    <div class="wrap">
        {{msg}}
    </div>
</template>
<script src="./index.js"></script>

src/vue-mods/index.js

export default {
  data () {
    return {
      msg: 'Hello from Component B!'
    }
  }
}

執行 npm run build 可以看到 dist 目錄

dist
  |____index.css
  |____index.css.map
  |____index.js
  |____index.js.map

效果圖如下