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

相關標籤/搜索

idea2016+vue+webpack+vue

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。