webpack -- 完整入門學習筆記（八）

1、webpack + vue

在使用vue以前，須要安裝vue解析配置模塊
安裝

npm install vue vue-loader vue-style-loader vue-template-compiler --save-dev

配置
這裏分別配置一下vue文件的解析已經將css解析的style-loader修改爲vue-style-loader
調用
注意這裏有一個大坑，必須引入vue-plugin，不然是報錯的

const VueLoaderPlugin = require('vue-loader/lib/plugin')
new VueLoaderPlugin()

2、配置index.js

import './styles/index.scss'
import Vue from 'vue'
import App from './app.vue'
new Vue({
  render: h => h(App)
}).$mount('#app')

運行便可看見結果，到這裏基本就結束了，後面就是基本的vue開發了
還有個問題，就是把vue.js分離出來

3、配置jsx

基於vue項目，能夠使用jsx的格式，因此能夠經過相關插件來實現
安裝

npm install babel-plugin-transform-vue-jsx babel-plugin-syntax-jsx

.babelrc
我在這裏配置了一個文件，裏面配置可以使用vue-jsx

{
    "presets": ["env"],
    "plugins": ["transform-vue-jsx"]
}

這裏配置了一個.babelrc文件後，由於多了一個env，因此仍是要繼續安裝模塊

npm install babel-preset-env --save

若是你裏面配置了es2015，而不是env，可能安裝的也不一樣，另外就是plugins裏面還有個transform-runtime
webpack緩存問題
webpack性能優化
webpack基礎搭建react // 這個能夠參考一下