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-runtimewebpack缓存问题webpack性能优化webpack基础搭建react // 这个可以参考一下

转载于:https://www.cnblogs.com/zjh-study/p/10895826.html

相关资源：Solidity-以太坊区块链-Truffle-webpack-开发入门 (一) 环境配置