我们的loader方式其实可以写成inline的方式

  1. 　　　　loaders:[
  2.             {
  3.                 test:/\.js$/,
  4.                 loader:"babel",
  5.                 exclude:/node_modules/,
  6.             }
  7.         ]

直接在entry中写上

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

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

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

接下来写我们的loader

  1. module.exports = {
  2.     devtool:"sourcemap",
  3.     entry:"./js/entry.js",
  4.     output:{
  5.         filename:"bundle.js",
  6.     },
  7.     module:{
  8.         loaders:[
  9.             {
  10.                 test:/\.css$/,
  11.                 loader:"style!css"
  12.             },
  13.             {
  14.                 test:/\.js$/,
  15.                 loader:"babel",
  16.                 exclude:/node_modules/,
  17.             },
  18.             {
  19.                 test:/\.vue$/,
  20.                 loader:"vue"
  21.             }
  22.         ]
  23.     },
  24.     babel:{
  25.         presets:['es2015','stage-0'],
  26.         plugins:['transform-runtime']
  27.     }
  28. }

配置好之后我们现在js下创建一个 components放我们的组件，然后在components下创建一个heading.vue,（最简单的vue组件）

  1. <template>
  2.     <div>
  3.         <h1>{{message}}</h1>
  4.     </div>
  5. </template>
  6. <script type="text/javascript">
  7.     export default{
  8.         data(){
  9.             return {
  10.                 message:"hello vue"
  11.             }
  12.         }
  13.     }
  14. </script>

然后我们在我们的入口文件引入我们vue组件和vue.js并且实例化vue

  1. require("./module-one.js");
  2. require("./module-two.js");
  3.  
  4. import Vue from 'vue';
  5. import Heading from './components/heading.vue';
  6.  
  7. new Vue({
  8.     el:'#app',
  9.     components:{Heading}
  10. });
  11.  
  12. require("../css/style.css");

然后再去我们的index.html中配置

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <Heading></Heading>
  10.     </div>
  11.     <h1>webpck is nice tool</h1>
  12.     <script type="text/javascript" src="bundle.js"></script>
  13. </body>
  14. </html>

这里的Heading就是entry.js import的Heading和components的Heading应该是一致的。然后运行webpack之后会出现如下错误

这是由于npm安装vue不是常规模式，要使用常规模式可以通过script标签引入或者添加一个配置

  1. module.exports = {
  2.     devtool:"sourcemap",
  3.     entry:"./js/entry.js",
  4.     output:{
  5.         filename:"bundle.js",
  6.     },
  7.     module:{
  8.         loaders:[
  9.             {
  10.                 test:/\.css$/,
  11.                 loader:"style!css"
  12.             },
  13.             {
  14.                 test:/\.js$/,
  15.                 loader:"babel",
  16.                 exclude:/node_modules/,
  17.             },
  18.             {
  19.                 test:/\.vue$/,
  20.                 loader:"vue"
  21.             }
  22.         ]
  23.     },
  24.     resolve:{
  25.         alias:{
  26.             'vue$':"vue/dist/vue.js"
  27.         }
  28.     },
  29.     babel:{
  30.         presets:['es2015','stage-0'],
  31.         plugins:['transform-runtime']
  32.     }
  33. }

这样你就可以看到hello vue显示在页面了，还有另外一种方式全局性的components注册

  1. require("./module-one.js");
  2. require("./module-two.js");
  3.  
  4. import Vue from 'vue';
  5. Vue.component('Heading',require('./components/heading.vue'));
  6.  
  7. new Vue({
  8.     el:'#app',
  9. });
  10.  
  11. 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. MVC发布问题(一直显示目录浏览)

    写了一个MVC的Demo,发布之后一直显示目录浏览,始终无法展示网站. 步骤如下: 1.生成解决方案,发布应用程序 2.打开IIS,新建网站,选择发布程序的代码路径 3.设置应用程序池为4.0,集成 ...

  2. JS 百度地图导航

    上一篇文章中我们就简单的学习了HTML5 地理定位,那么今天告诉大家我在项目中遇到的一个问题吧,就是怎么实现点击一个按钮就可以调到百度地图,并且获取到你当前的位置,并且导航到指定的地方去. 不想看步骤 ...

  3. z-index、display、selector选择器优先级css优先级面试用到

    z-index:控制元素叠放顺序,哪个z-index数值越大,那个优先被叠放在上面. relative.absolute.fixed这三种情况可以使用z-index. static不可以使用. dis ...

  4. Java实习生面试总结

    之前写了一直存着当草稿,今天看了看. --------------------------------------------------------------------------------- ...

  5. IT公司100题-tencent-打印所有高度为2的路径

    问题描述: 打印所有到叶子节点长度为2的路径  10  /  \ 6   16 / \   / \ 4 8  14 18   / \    / \    \ 2  5  12 15 20 / 11   ...

  6. 黑马程序员——OC语言Foundation框架 NSArray NSSet NSDictionary\NSMutableDictionary

    Java培训.Android培训.iOS培训..Net培训.期待与您交流! (以下内容是对黑马苹果入学视频的个人知识点总结) (一) NSNumber 将各种基本数据类型包装成NSNumber对象 @ ...

  7. 单例模式(Singleton Pattern)

    动机: 在软件系统中,经常有这样一些特殊的类,必须保证它们在系统中只存在一个实例,才能确保它们的逻辑正确性.以及良好的效率. 如何绕过常规的构造器,提供一种机制来保证一个类只有一个实例? 这应该是类设 ...

  8. easyui js基础

    $(document).ready( function(){ initload(); });function initConfig(){ //数据列表 yzfymx=$("#tjdj&quo ...

  9. mysql linux终端登陆

    mysql -uroot -hlocalhost -psorry 设置远程登录 用户名及密码 GRANT ALL PRIVILEGES ON *.* TO root@"%" IDE ...

  10. 关于设置border的小技巧

    可以在需要的时候,在某个元素下面放一个长或宽为1px,或者你需要的border宽度的 div ,再在这个div 上设置border.按需要调整这个div的位置.