其他loader：CSS-loader、url-loader、html-loader等 先来了解一下模块的概念，比如在nodeJS中，有require和exports关键字。
很早有个broserify，是个js模块加载器。 现在流行的是webpack，因为它不光你能加载js文件，还可以是css文件或图片等资源。 webpack，我们可以认为也是更加高级的模块假期，围绕它一切东西都是模块。
这些loader是干嘛的？ 我们知道在html中，我们引入css文件是link标签， 但比如我们需要
这还是不太逆天了？其实这就是需要css-loader来处理了。
在Vue开发中，有.vue文件，vue-loader就是用来加载这类文件的，然后在通过webpack打包编译成我们浏览器认识的代码。vue-loader是基于webpack的。
.vue文件就是放置vue的组件代码，结构如下：
<template> //html</template><style>//css</style><script>//js</script>webpack是模块分开写，最后打包在一起。 简单的目录结构如下：
|-index.html |-main.js 入口文件 |-App.vue vue文件 |-package.json 工程文件(项目依赖、名称、配置)，npm init –yes 生成此文件 |-webpack.config.js webpack的配置文件
1.执行：npm init --yes 
执行成功之后，项目目录结构如下： 
2.webpack配置文件webpack.config.js，内容如下：
下载安装:
npm install webpack --save -devnpm install webpack-dev-server --save -dev安装完成之后，根目录下就会多一个node_modules文件夹，其中有n多子文件夹。
因为我们前面已经写好了webpack所需的配置文件，这时候在终端执行命令：webpack 就会生成build.js 文件 
但在实际开发中，为了更加方便，我们可以做如下配置，修改工程文件package.json添加scripts：
这样我们只需要在终端输入：npm run dev 就启动webpack服务模式了；执行npm run b其实就执行的是webpack命令。 
这就启动了webpack服务模式。
然后我们就可以访问http://localhost:8080/ ，就是访问我们的项目。
ES6的模块化开发
导出模块：export default {} 引入模块：import 模块名 from 地址
但ES6的这种语法，现在还有很多浏览器不认识，我们可以通过babel来转换。 另外.vue文件也要vue-loader来处理。 所以，我们还需要安装几个webpack的模块(module)
最最核心的必须要下载vue：
npm install vue vue-template-compiler --save -dev下载babel需要的
npm install babel-cli babel-loader babel-core babel-plugin-transform-runtime babel-PReset-es2015 babel-runtime --save -dev如果不用ES6的语法，就不需要babel了。
1.babel配置文件，根目录新建.babelrc文件，内容如下：
然后就可以编写我们的业务代码了 main.js:
//引入Vueimport Vue from 'vue';//引入组件import App from './App.vue';//实例化Vuenew Vue({ el:'body', components:{ app:App }});App.vue:
<template> <h1>welcom vue</h1></template>新闻热点
疑难解答
