webpack -- 完整入门学习笔记（八）

一、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()

二、配置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分离出来

三、配置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 // 这个可以参考一下