webpack +vue开发(2)
我们的loader方式其实可以写成inline的方式
loaders:[ { test:/\.js$/, loader:"babel", exclude:/node_modules/, } ]
直接在entry中写上
require("!style!css!../css/style.css");
推荐直接使用loader的方法,下面使用vue写一个小例子,首先安装
npm install vue vue-loader vue-html-loader vue-style-loader vue-template-compiler --save-dev
接下来写我们的loader
module.exports = { devtool:"sourcemap", entry:"./js/entry.js", output:{ filename:"bundle.js", }, module:{ loaders:[ { test:/\.css$/, loader:"style!css" }, { test:/\.js$/, loader:"babel", exclude:/node_modules/, }, { test:/\.vue$/, loader:"vue" } ] }, babel:{ presets:['es2015','stage-0'], plugins:['transform-runtime'] } }
配置好之后我们现在js下创建一个 components放我们的组件,然后在components下创建一个heading.vue,(最简单的vue组件)
<template> <div> <h1>{{message}}</h1> </div> </template> <script type="text/javascript"> export default{ data(){ return { message:"hello vue" } } } </script>
然后我们在我们的入口文件引入我们vue组件和vue.js并且实例化vue
require("./module-one.js"); require("./module-two.js"); import Vue from 'vue'; import Heading from './components/heading.vue'; new Vue({ el:'#app', components:{Heading} }); require("../css/style.css");
然后再去我们的index.html中配置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <Heading></Heading> </div> <h1>webpck is nice tool</h1> <script type="text/javascript" src="bundle.js"></script> </body> </html>
这里的Heading就是entry.js import的Heading和components的Heading应该是一致的。然后运行webpack之后会出现如下错误
这是由于npm安装vue不是常规模式,要使用常规模式可以通过script标签引入或者添加一个配置
module.exports = { devtool:"sourcemap", entry:"./js/entry.js", output:{ filename:"bundle.js", }, module:{ loaders:[ { test:/\.css$/, loader:"style!css" }, { test:/\.js$/, loader:"babel", exclude:/node_modules/, }, { test:/\.vue$/, loader:"vue" } ] }, resolve:{ alias:{ 'vue$':"vue/dist/vue.js" } }, babel:{ presets:['es2015','stage-0'], plugins:['transform-runtime'] } }
这样你就可以看到hello vue显示在页面了,还有另外一种方式全局性的components注册
require("./module-one.js"); require("./module-two.js"); import Vue from 'vue'; Vue.component('Heading',require('./components/heading.vue')); new Vue({ el:'#app', }); require("../css/style.css");