我们的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");