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");

巴特西

webpack +vue开发（2）

最新文章

热门文章