我们的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）的更多相关文章

  1. Wabpack系列：在webpack+vue开发环境中使用echarts导致编译文件过大怎么办？

    现象,在一个webpack+vue的开发环境中,npm install echarts --save了echarts,然后在vue文件中直接使用 import echarts from 'echart ...

  2. webpack +vue开发（3）

    webpack的一些有用的命令 webpack --display-modules 在终端显示这些module,另外一个推荐使用 webpack --display-modules --display ...

  3. webpack +vue开发（1）

    首先安装 node.js这是毋庸置疑的,安装完了之后安装webpack npm install webpack -g 接下来创建一个自己的文件夹 webpack-learn在里面创建一个index.h ...

  4. 做一个gulp+webpack+vue的单页应用开发架子

    1.目标 最近项目上的事情不多,根据我自己的开发习惯,决定开发一些简单的开发架子,方便以后事情多的时候直接套用.本文讲的一个gulp+webpack+vue的单页应用架子,想要达到的目的: 可以通过命 ...

  5. 基于 Laravel 开发 ThinkSNS+ 中前端的抉择（webpack/Vue）踩坑日记【ThinkSNS+研发日记系列】

    在上一篇文章< ThinkSNS+基于Laravel master分支,从1到 0,再到0.1>,简单的介绍了 社群系统ThinkSNS+ ,这里分享在开发过程中,前端选择的心理活动. L ...

  6. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  7. VUE开发请求本地数据的配置，旧版本dev-server.js，新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  8. Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结和踩坑

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用 ...

  9. 基于 Webpack 4 搭建 Vue 开发环境

    自从工作之后,就已经很久没有写过博客了.时间被分割得比较碎,积累了一段时间的学习成果,才写下了这篇博客. 之前有写过 Webpack4 的文章,但是都比较偏入门,唯一的一篇实战篇 -- 基于Webpa ...

随机推荐

  1. ioS基础篇（十九）——UIResponder简析

    UIResponder类定义了对象相应和控制事件的接口,他是UIApplication.UIView的超类,这类的实例通常被称为应答对象. 一.Responder对象 在iOS系统中,能够响应并处理事 ...

  2. Dispatcher.Invoke方法

    前一篇小猪分享过在WPF中简单的使用BackgroundWorker完成多线程操作!在那篇中小猪利用了BackgroundWorker组件对耗时比较多的操作放在了单独的BackgroundWorker ...

  3. 使用实时文件夹显示ContentProvider的数据

    所谓实时文件夹(即LiveFolder),是指用于显示ContentProvider提供的数据的桌面组件. ContentProvider用于向外提供数据访问的接口,一个应用程序可通过ContentP ...

  4. 爱壁纸 站立会议(六)--Spring阶段总结会议

    爱壁纸 站立会议(六)--Spring阶段总结会议 一.会议时间 2014年4月15日 星期三 21:00-21:20 今天是spring阶段最后一天,大家都对这一星期的任务概况做出了总结所以时间稍微 ...

  5. 关于ASP.NET或VS2005 搭建三层架构的理解

    最近想学习ASP.NET建网站,关于ASP.NET或VS2005 搭建三层架构的理解,网上摘录了一些资料,对于第(2)点的讲解让我理解印象深刻,如下: (1)为何使用N层架构? 因为每一层都可以在仅仅 ...

  6. 配置ConvenientBanner时出现的问题

    ConvenientBanner: compile 'com.bigkoo:convenientbanner:2.0.5' 找不到依赖库 classpath 'com.jfrog.bintray.gr ...

  7. bigworld源码分析（1）—— 研究bigworld的意义和目标

    对于网络游戏服务器开发熟悉的人,基本都知道bigworld引擎,此引擎包括客户端部分和服务器部分,已经有很多知名的网络游戏通过bigworld来构建游戏.我主要关注bigworld的服务器部分,它是一 ...

  8. 台球游戏的核心算法和AI(1)

    前言: 08年的时候, 写过一个台球游戏, 用的是java, 不过代码真的是用传说中的神器notepad写的(你信吗? 其实是用GVIM写的, ^_^), 很多类都在同一java文件中编写. 可见当时 ...

  9. 移动互联网实战--资源类APP的数据存储处理和优化

    前言: 对于资源类的APP, 其音频/图形占据了APP本身很大的比例. 如何存储和管理这些资源文件, 成了一个颇具挑战性的难点. 移动端的碎片化, 高中低端手机的并存, 需要开发者不光是具备基础的存储 ...

  10. netfilter-IPv4实现框架分析(一)

    基于Linux-2.6.30版本,具体实现net\ipv4\netfilter目录下,入口文件为net\ipv4\netfilter\iptable_filter.c,入口/出口函数为模块的init函 ...