webpack +vue开发（2）

时间 2019-12-20

标签 webpack vue 开发繁體版

原文原文链接

咱们的loader方式其实能够写成inline的方式javascript

　　　　loaders:[
            {
                test:/\.js$/,
                loader:"babel",
                exclude:/node_modules/,
            }
        ]

直接在entry中写上css

require("!style!css!../css/style.css");

推荐直接使用loader的方法，下面使用vue写一个小例子，首先安装html

npm install vue vue-loader vue-html-loader vue-style-loader vue-template-compiler --save-dev

接下来写咱们的loadervue

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组件）java

<template>
    <div>
        <h1>{{message}}</h1>
    </div>
</template>
<script type="text/javascript">
    export default{
        data(){
            return {
                message:"hello vue"
            }
        }
    }
</script>

而后咱们在咱们的入口文件引入咱们vue组件和vue.js而且实例化vuenode

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中配置webpack

<!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以后会出现以下错误web

这是因为npm安装vue不是常规模式，要使用常规模式能够经过script标签引入或者添加一个配置npm

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注册babel

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