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