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 // 这个能够参考一下